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

  • 24
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

だいぶ遅れてしまいましたが、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

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

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

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

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

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

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_USERBASIC_AUTH_PASSWORDという環境変数を設定することでBASIC認証のユーザ名とパスワードを設定できます。

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

export BASIC_AUTH_USER=user
export BASIC_AUTH_PASSWORD=password

Heroku Appの作成

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

スクリーンショット 2015-12-19 20.56.35.png

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

スクリーンショット 2015-12-20 21.07.26.png

werckerの設定

Herokuへのデプロイはwerckerを利用します。

アプリケーションの作成

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

スクリーンショット_2015-12-20_21_12_23.png

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

スクリーンショット 2015-12-20 21.25.58.png

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

スクリーンショット_2015-12-20_21_31_10.png

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

スクリーンショット 2015-12-20 21.34.38.png

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

スクリーンショット 2015-12-20 21.34.55.png

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

スクリーンショット 2015-12-20 21.35.07.png

デプロイ先の設定

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

スクリーンショット 2015-12-20 21.51.05.png

HerokuのアカウントページからAPIキーをコピペしてきます。

スクリーンショット 2015-12-20 22.12.29.png

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

スクリーンショット 2015-12-20 22.06.03.png

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

designブランチにpushしてみる

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

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

スクリーンショット 2015-12-20 22.18.28.png

最後に

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

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