読者です 読者をやめる 読者になる 読者になる

【開発】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を使ったデプロイができると思います。

課題

  • sprocketsを使わないで、assetsのビルドはwebpackだけで完結するようにする
  • capistrano/npm」とか「bower-capistrano」といったcapistranoプラグインを使った方がいい?(未検証)

参考サイト

engineer.crowdworks.jp

qiita.com

qiita.com

qiita.com

photo credit: cmd.exe via photopin (license)