【開発】npm+bower+webpack+railsでいい感じにアプリケーションをデプロイする

f:id:keisuke_ohta:20160701172513j:plain

今、業務でwebpack（知ってるとは思うけどassetのビルドツール）を使っているですが、開発環境では問題なく動いているものの、いざサーバにデプロイしようとしたのですがうまくいきませんでした。

いろいろ試行錯誤してなんとか動くようになったので、今回はその知見について共有したいと思います。

前提条件

既にwebpack.config.jsでひととおりのwebpackの設定が終わっていること
開発環境で webpack -w がちゃんと動くこと
ある程度開発が進んでいる（≒サーバ上にビルドするに値するレベルになっている）こと

やること

サーバ側

npm、bowerをインストールする（これらのコマンドを使うため）

# hoge.sh
$ sudo apt-get install nodejs npm #node.jsとnpmをインストール
$ sudo npm cache clean #npmのキャッシュ削除
$ sudo npm install n -g #nodeのバージョン管理ツール「n」をインストール
$ sudo n stable #安定版をインストール、または選択
$ sudo ln -sf /usr/local/bin/node /usr/bin/node #リンクを貼る
$ sudo apt-get purge -y nodejs npm #nodejsとnpmをアンインストール
$ sudo apt-get autoremove #不要なパッケージをアンインストール
$ node -v #nodeがちゃんと入ってるか確認
$ sudo npm install -g bower

こんな感じでnpmとbowerが入ったと思います。

アプリケーション側

npmのパッケージをインストール
bowerのパッケージをインストール
webpackのビルドの実行
上記3つをassets:precompileの前に実行するようにする

package.jsonにwebpackのビルドスクリプトを定義

  "scripts": {
    "build": "webpack -p --config webpack.config.js"
  }

rake assets:precompile の前に実行する処理（タスク）を定義して拡張

# before_precompile.rake
task :build_frontend do
  sh "npm install --silent --no-spin"
  sh "bower install --quiet --config.interactive=false"
  sh "npm run build --progress --colors"
end

Rake::Task["assets:precompile"].enhance(%i(build_frontend))

これでプリコンパイル前にnpm, bowerパッケージのインストールとwebpackによるビルドが走るようになりました。

以上で設定完了です。あとはこれで cap hogehoge deploy するだけで、webpackを使ったデプロイができると思います。