Vagrant + chef + Berkshelfでフロントエンドの環境構築を自動化

最近のフロントエンド

GitやNode.jsやSassやaltJSのコンパイラなど、使うものが増えて
環境構築の手順も複雑になってきています。
そこでVagrantとchef、それからcookbookの依存関係を管理するBerkshelfを使って
環境構築の手順を自動化かつ共有できるようにしました。

開発環境の中身

最近自分がよく使っているものを入れてみます。

  • Git
  • Node.js
  • grunt-cli
  • Bower
  • testem
  • PhantomJS
  • CasperJS

セットアップ

スケルトンの作成

berks cookbook chef-frontend

実行するとchefリポジトリのセットアップから
Vagrantfileの生成、.gitの追加までやってくれます。

Berksfileの編集

使用するサードパーティのcookbookを記述します。
要するにGemfileとかpackage.jsonのようなものです。

Berksfile
site :opscode

metadata
# Git, Node.js, PhantomJSはOpscodeにホスティングされているcookbookを使用してインストール
cookbook 'git'
cookbook 'nodejs'
cookbook 'phantomjs'

自前recipeの編集

サードパーティのcookbookを使わずにセットアップするものは
こちらに記述していきます。

recipe/default.rb
extract_path = "/usr/local/bin"

# githubからCasperJSのリポジトリをクローン
git "/vagrant/casperjs" do
    repository "git://github.com/n1k0/casperjs.git"
    user "root"
    revision "1.1-beta1"
    action :checkout
end

# シンボリックリンクを作成
bash "install casperjs" do
  cwd "/vagrant/casperjs"
  user "root"
  code <<-EOH
    ln -sf `pwd`/bin/casperjs #{extract_path}/casperjs
  EOH
end

# Node.jsのパッケージで必要なものをグローバルインストール
bash "install npm packages" do
  cwd "/home/vagrant"
  user "root"
  code <<-EOH
    npm install -g grunt-cli bower testem
  EOH
end

Vagrantfileの編集

使用するBoxの設定*1
# 今回はUbuntuを使用
# Every Vagrant virtual environment requires a box to build off of.
config.vm.box = "Ubuntu precise 64 VirtualBox"

# The url from where the 'config.vm.box' box will be fetched if it
# doesn't already exist on the user's system.
config.vm.box_url = "http://files.vagrantup.com/precise64.box"
起動時に実行するレシピを追記
chef.run_list = [
     "recipe[git]",
     "recipe[nodejs]",
     "recipe[phantomjs]",
     "recipe[chef-frontend::default]"
]

実行してみる

# cookbookのインストール
berks install --path=cookbooks
# Vagrantマシンの起動、レシピの実行
vagrant up

これだけで環境構築完了です。
仮想マシンにログインして各コマンドが使用できることを確認してみます。

vagrant ssh
# -> git, node, grunt, bower, testem, phantomjs, casperjsコマンドが使える!

まとめ

リポジトリをクローンしてコマンド2発で環境を構築できるのはお手軽で良いですね。
実際の開発で使う場合、OS別の構築手順の差異を吸収する、
あまり黒い画面を使わないデザイナーやマークアップの人向け
といったメリットが期待できるんじゃないかなと。*2

Berkshelfによるcookbookの管理や、スケルトンの作成はknifeを使うより簡単でした。

t93/chef-frontend

*1:このあたりのデフォルト値はberks configureで設定可能です。

*2:環境構築だけなら普通にVMイメージ配布した方が手っ取り早いかも