Boxenで開発環境の構築を自動化する

最近開発に使用しているMacの調子が悪くなってしまい、修理に出すため代替機に開発環境を構築したりと、何度か開発環境を構築する必要に迫られてしまったので、これを機会にboxenで自動化をしてみました。MacのOSはYosemiteになります。

まず、boxenの基本的な設定をし1台目を構築します。その上で、boxen-webをheroku上に設定し、2台目以降を簡単に構築する手順をご紹介します。

## boxenの基本的な設定

まっさらなMac上に設定するのを前提としています。すでにrvmやhomebrewなどがはいっているとうまく動かないようです。そのあたりは、[BoxenのREADME](https://github.com/boxen/our-boxen)を参照してください。

### Xcodeのインストール

まず、始めにXcodeが必要になります。App Storeを起動してインストールします。

https://itunes.apple.com/jp/app/xcode/id497799835?mt=12

この後のboxenの実行するのに、利用許諾などの同意が必要なので、Xcodeを1度起動しておきます。

### Command Line Toolsのインストール

次にgitなどの開発ツール類を下記よりダウンロードしてインストールします。ダウンロードにApple Developerへの登録が必要になります。

https://developer.apple.com/jp/xcode/downloads/

ダウンロードしたファイルをダブルクリックしてインストールします。

### 自分用のboxenの準備

boxenを自分用にカスタマイズしていきます。

#### リポジトリの設定

boxenの基本となるリポジトリをcloneします。

```
$ sudo mkdir -p /opt/boxen
$ sudo chown hirotaka:staff /opt/boxen
$ git clone https://github.com/boxen/our-boxen /opt/boxen/repo
```

ここで、`hirotaka`はMacに登録しているユーザ名になります。

Githubに新規でレポジトリを作成して、先ほどcloneしたレポジトリのoriginをそちらにむけます。

```
$ cd /opt/boxen/repo
$ git remote rm origin
$ git remote add origin git@github.com:hirotaka/our-boxen.git
$ git push -u origin master
```

ここで、`git@github.com:hirotaka/our-boxen.git`はGitHubで作成したレポジトリになります。

#### boxenのカスタマイズ

cloneしたファイルを修正していきます。

Boxenでインストールしたいパッケージ類を`Puppetfile`の以下の箇所に追加していきます。

https://github.com/hirotaka/our-boxen/blob/master/Puppetfile#L63

githubに指定するのは、以下のURLからインストールしたいパッケージ名を「Find a repository...」に入力して、検索結果の頭の`puppet-`を抜いた文字列をいれます。

https://github.com/boxen

バージョンは検索した結果のリンク先のリポジトリを開いてtagを参照して入力します。

その上で、puppetに指示するための記述を追加します。`manifests/site.pp`に共通の設定として追加してもいいのですが、今回は個人毎の設定として追加します。

私のgithubのログイン名がhirotakaなので、`modules/people/manifests/
hirotaka.pp`に記述していきます。

https://github.com/hirotaka/our-boxen/blob/master/modules/people/manifests/hirotaka.pp

どのような記述をすればいいのかはPuppetfileで指定したリポジトリのREADMを参照してください。大体、`include モジュール名`を指定します。

#### boxenの実行

boxenを実行して環境を構築するのですが、デフォルトだとFileVaultが入になっている必要があります。[設定の]の[セキュリティーとプライバシー]から[FileVault]タブを選択して[FileVaultを入にする...]をしておきます。

FileVaultが切でも引数にオプションを渡すことで実行可能です。

```
$ ./script/boxen
```

ダウンロードするファイル類が大きいと途中で何回か失敗する場合がありました。その場合は何度かコマンドを再実行します。

これで期待通りに動作を確認したら、編集したファイル類をcommitしてpushしておきます。

```
$ git add modules/people/manifests/hirotaka.pp
$ git commit -am`Add my configurations`
$ git push origin master
```

#### パスなどの設定

boxen経由でパッケージ類をインストールすると、/opt/boxen配下にインストールされます。パス類を設定するために、下記のシェルスクリプトを読み込みます。

```
$ source /opt/boxen/env.sh
```

また、ログイン時に読み込まれるように`~/.bashrc`に追記しておきます。

## boxen-webを設定

2台目以降はXcodeとCommand Line Toolsをインストールした上で、先ほど作成したour-boxenレポジトリーをcloneしてboxenを実行すれば、自動で環境を構築できます。

ここでは、Xcodeをインストールしたり、git cloneしないでもいいようにboxen-webを設定します。

### GitHubの設定

GitHub側でいくつか設定が必要になります。

![step1.png](https://qiita-image-store.s3.amazonaws.com/0/4116/a135f19a-a61b-d7dc-c0fa-c7bfd95bacee.png)

右上の[Setting]を開きます。

![step2.png](https://qiita-image-store.s3.amazonaws.com/0/4116/9a844fc8-b0dc-0dbe-042f-cf4dd266284c.png)

左の[Applications]を開きます。

![step3.png](https://qiita-image-store.s3.amazonaws.com/0/4116/afbe9d88-a89b-a235-144f-990e112a4351.png)

[Developer applications]の[Register new application]をクリックします。

![step4.png](https://qiita-image-store.s3.amazonaws.com/0/4116/dfe4890f-8c78-3f5b-6c03-b626b9c29782.png)

以下を入力します。

Application name: Boxen Web
Homepage URL: hirotaka-boxen.herokuapp.com
Authorization callback URL: https://hirotaka-boxen.herokuapp.com/auth/github/callback

ここで、hirotaka-boxenというのは後で作成するherokuのアプリ名になります。
項目を入力したら[Register application]をクリックします。

![step5.png](https://qiita-image-store.s3.amazonaws.com/0/4116/c6298fb6-0a06-90d2-9be2-56ada3c15af0.png)

登録するとApplicationの詳細画面が表示されるので、[Client ID]と[Client Secret]を控えておきます。

![step6.png](https://qiita-image-store.s3.amazonaws.com/0/4116/afece0ce-0179-a498-b5ff-84c6f6a1dd51.png)

左サイドメニューの[Applications]を開いて、[Personal access tokens]の[Generate new token]をクリックします。

![step7.png](https://qiita-image-store.s3.amazonaws.com/0/4116/a08eb0a2-53c0-fe65-c402-e3e2fdadd43f.png)

[Token description]のBoxenと入力して、[Select scopes]はデフォルトのままで、[Generate token]をクリックします。

![step8.png](https://qiita-image-store.s3.amazonaws.com/0/4116/93dc7745-cc83-2177-7574-6883bc8eb736.png)

[Personal access tokens]が発行されるので控えておきます。

### Herokuの設定

Herokuに新しくアプリケーションを作成し設定します。

```
$ git clone git@github.com:boxen/boxen-web.git
$ cd boxen-web
$ heroku create hirotaka-boxen
$ heroku config:set \
  REPOSITORY="hirotaka/our-boxen" \
  GITHUB_CLIENT_ID="*******************" \
  GITHUB_CLIENT_SECRET="*************************" \
  SECRET_TOKEN="*****************************"
$ git push heroku master
$ heroku run bundle exec rake db:migrate
```

GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, SECRET_TOKENは先ほど控えた値を入力します。


設定したアプリケーションをブラウザで開きます。

```
$ heroku open
```

GitHubの認証をした後、ブラウザにコマンドが表示されるので、その通りにターミナルに入力することで、Macの環境を構築します。

![Boxen.png](https://qiita-image-store.s3.amazonaws.com/0/4116/e114ab6b-e0ca-2b39-658c-9c45662ccc58.png "Boxen.png")


## 2台目以降のセットアップ

2台目以降は非常に簡単です。

### 1. FileVaultをオンにする

まず、[システム環境設定]から[セキュリティとプライバシー]を開いて、[FileVault]のタブで、[FileVaultを入りにする...]でFileVaulをオンにします。

### 2. ブラウザで開くURLを開く

次に、Safariを立ち上げ、`http://hirotaka-boxen.herokuapp.com`を入力してGitHubに登録しているユーザで認証します。

### 3. コマンドを実行

ターミナルを立ち上げ、開いたページに表示されるコマンドをコピペして実行します。

最初にsudoのパスワードが聞かれますが、あとはほっといて数時間で環境がセットアップされます。

## まとめ

ここまでの設定は大変かもしれませんが、一回設定してしまえば後はブラウザでアドレスを開いて、コマンドを実行して、待つだけで簡単に構築できてしまいます。

また、チームで同じ環境にしておけば、こっちで動いたのにあっちでは動かないみたいな無駄なやりとりが減るのではないでしょうか。

以上です。