外注したデザインのレビュー環境を手軽に作って運用した話（BitBucket & wercker & Heroku）

だいぶ遅れてしまいましたが、[mixiグループアドベントカレンダー](http://qiita.com/advent-calendar/2015/mixi)8日目の記事です。

# はじめに

ミクシィ・リサーチでは、デザイナーがいないのでフリーランスの方に外注しています。
外注する範囲としては、デザインからHTML/CSS/Javascriptに落とすところまで。
納品は、Git（BitBucket）でお願いしており、GitHubフローに近い運用をしています。

masterブランチとdesignブランチを用意し、デザイナーさんにdesignブランチへHTML等をpushしてもらい、その後一定の粒度でdesignブランチからmasterブランチへプルリクを出してもらいます。
プルリクが来たら社内でコードレビューを行い適宜修正をお願いするなどし、最終的にmasterブランチへマージします。

また、masterブランチ用のサイトとdesignブランチ用のサイトをHerokuで運用するようにしており、masterブランチとdesignブランチへのpushをフックにして、Herokuへ静的サイトとしてデプロイされるようにしています。
やっと今回の本題なのですが、このBitBucketへpushされると、werckerがHerokuにデプロイしてくれる環境を作った話をしたいと思います。

※今回「レビュー」というのは、実際にHTMLに落ちた際のデザインレビューと、コードレビューのことを指します。

# BitBucketへリポジトリ作成

下記のURLからリポジトリを作成します。　

https://bitbucket.org/repo/create

![スクリーンショット 2015-12-19 22.22.31.png](https://qiita-image-store.s3.amazonaws.com/0/14366/4fcee7b6-2d4c-9814-faef-87cb2977eb9a.png)


下記のリポジトリをクローンしてきて、BitBucketのリポジトリにpushしておきます。

https://github.com/takaya1992/heroku-statics

pushしたら、designブランチを作っておきます。

```
$ git checkout -b design
$ git push -u origin design
```

デザインのレビュー環境なので外部からアクセスされたくないため、BASIC認証をかけています。

```js
var basicAuth = require('basic-auth-connect');

var username = process.env.BASIC_AUTH_USER;
var password = process.env.BASIC_AUTH_PASSWORD;
app.use(basicAuth(username, password));
```

としているため、`BASIC_AUTH_USER`、`BASIC_AUTH_PASSWORD`という環境変数を設定することでBASIC認証のユーザ名とパスワードを設定できます。

ローカルで設定する場合は以下のようにします。

```bash
export BASIC_AUTH_USER=user
export BASIC_AUTH_PASSWORD=password
```


# Heroku Appの作成

designブランチに対応するHeroku Appを作成します。

<img width="956" alt="スクリーンショット 2015-12-19 20.56.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/14366/c0b30d5e-6efa-9a78-a6e9-749e70631e0f.png">

BASIC認証のための環境変数を設定します。

![スクリーンショット 2015-12-20 21.07.26.png](https://qiita-image-store.s3.amazonaws.com/0/14366/9150e507-1abb-0187-86bd-ba2c6ce3daf4.png)


# werckerの設定

Herokuへのデプロイは[wercker](http://wercker.com/)を利用します。

## アプリケーションの作成

上部メニューの「Create」から「Application」を選択します。

![スクリーンショット_2015-12-20_21_12_23.png](https://qiita-image-store.s3.amazonaws.com/0/14366/041ae9bf-dba1-5d64-0672-27b950465f28.png)

連携先としてGitHubかBitBucketのどちらを使うかを聞かれるので、今回はBitBucketを選択します。

![スクリーンショット 2015-12-20 21.25.58.png](https://qiita-image-store.s3.amazonaws.com/0/14366/eb0e10a1-6887-95d4-932c-daaab5241ad5.png)

次にリポジトリを選択します。

![スクリーンショット_2015-12-20_21_31_10.png](https://qiita-image-store.s3.amazonaws.com/0/14366/328057b6-4e20-c991-f8c1-9483b5f06116.png)

Herokuへのdeploy keyの登録方法を選択します。
レコメンドされている「Add the deploy key to the selected repository for me」を選択します。

![スクリーンショット 2015-12-20 21.34.38.png](https://qiita-image-store.s3.amazonaws.com/0/14366/314e603f-119d-2423-f787-bab3416ff99b.png)

werckerの設定をするには、リポジトリにwercker.ymlを置いておきます。すでにリポジトリ内にwercker.ymlがあるため、とくに設定の必要はありません。
また、「Docker enabled」のチェックは外しておきます。

![スクリーンショット 2015-12-20 21.34.55.png](https://qiita-image-store.s3.amazonaws.com/0/14366/ce681761-0a90-5e82-d5e7-eb6ab383cdee.png)

最後に「Finish」ボタンを押して完了です。

![スクリーンショット 2015-12-20 21.35.07.png](https://qiita-image-store.s3.amazonaws.com/0/14366/5ce335cb-e816-b892-dad3-5622c54b3652.png)

## デプロイ先の設定

今回作成したアプリケーションの設定から「Targets」を選択します。「Add deploy target」ボタンから「Heroku」を選択します。

![スクリーンショット 2015-12-20 21.51.05.png](https://qiita-image-store.s3.amazonaws.com/0/14366/9c426469-233c-8392-371f-1c5a653f4a18.png)

[Herokuのアカウントページ](https://dashboard.heroku.com/account)からAPIキーをコピペしてきます。

![スクリーンショット 2015-12-20 22.12.29.png](https://qiita-image-store.s3.amazonaws.com/0/14366/709d506d-feda-1c89-84b4-0c6f6a5db423.png)


designブランチへpushがあった場合に自動的にデプロイさせたいため、下記の画像のように設定します。

![スクリーンショット 2015-12-20 22.06.03.png](https://qiita-image-store.s3.amazonaws.com/0/14366/65e2c456-ec68-1122-bb4b-39396b18b839.png)

これでやっと準備完了です。

# designブランチにpushしてみる

適当なコミットを作って、designブランチへpushしてみてください。

push後、werckerのアプリケーションページを見ていると、下記の画像のようにビルドとデプロイが始まると思います。herokuへ正常にデプロイされたら成功です。

![スクリーンショット 2015-12-20 22.18.28.png](https://qiita-image-store.s3.amazonaws.com/0/14366/08bc247e-8714-4c44-ac07-311dc8acf1ba.png)

# 最後に

werckerでのbuild時に、HTMLやCSS,JSのlintをかけたり、Less/SassやJSのビルドをするなど工夫もできるかと思います。

この仕組みを作ったおかげでレビューがだいぶ楽になったので、仕組み化するのは大事だなと思いました。（小並感）