Logic Delight

明日のワシは忘れてしまうから、コードにはコメントを書くのです。

MacOS XのVagrant上にGruntとSASSをインストールした作業ログ

たまにしかやらないので毎回忘れて調べながらやることになってしまうVagrantまわりの環境セットアップを、今度こそ作業ログって覚えるぞ、の巻。

今回は、Vagrant上にGrunt/SASSをインストールするところまでやります。

まずはVagrant用のディレクトリを作成してVagrant(Ubuntu)をテキトーに立ち上げる。

# on Mac OS X

$ mkdir ubuntuGrunt
$ cd $_

$ vagrant init hashicorp/precise32
$ vagrant up
$ vagrant ssh

無事に仮想ホストにssh接続できることが確認できたが、これだけでは素のUbuntuなので、プロビジョニングで諸々ツールがインストール済みの状態にして仮想ホストが立ち上がるようにする。

$ exit
$ vi provisioning.sh
#!/usr/bin/env bash

echo "*** install by apt-get ***"

apt-get update
apt-get install -y curl
curl -sL https://deb.nodesource.com/setup | bash -
apt-get install -y nodejs

echo "*** install by ruby-gem ***"

gem update --system
gem install sass

echo "*** install by npm ***"

npm config set registry http://registry.npmjs.org/

npm install -g grunt-cli
$ vi Vagrantfile
Vagrant.configure(2) do |config|
  # :
  # :

  config.vm.provision :shell, path: "provisioning.sh"
end
$ vagrant reload --provision
$ vagrant ssh

# on Vagrant(ubuntu)

$ node -v
$ npm -v
$ scss -v

インストールされたバージョンが確認できれば、最後にGruntをインストールして作業終了☆

$ mkdir mysite
$ cd $_
$ npm init
$ npm install grunt --save-dev

ですが実際は動作確認で何度もハマってやり直したので、その点をメモっておくと

  • apt-get insatll で -y オプションを忘れると、Y/N ? の問いに応えられずにプロビジョニングが失敗して終わる
  • 何もせずに apt-get install nodejs をしても、インストールされるNode.jsのバージョンが古いので、後に控えている npm install 系がことごとく(バージョンが対応していないよ)エラーで失敗する
    • curl -sL ... の行を追加することで新しいバージョンのNode.jsがインストールされるように
  • 何もせずに npm install -g grunt-cli してもregistry見つからないエラーになる
    • npm config set registry ... の行を追加して解消
  • 初回の vagrant up 時に初回のプロビジョニングが走ってしまうので、プロビジョン設定を追記した後は reload --provision する必要がある