EC2にnodeとyarnをインストールしてwebpackerを動かす

RailsプロジェクトにReact-Rails + Webpackerを導入したはいいものの、いざcapistranoでEC2にデプロイするときにEC2の環境整備が必要だったのでその作業をまとめます。

環境

Rails 4.2.8
webpacker (3.2.2)

前提

webpackerを導入すると、webpackのビルドプロセスはwebpacker:compileがよしなにやってくれます。
また、webpacker:compileはassets:precompileをフックして実行されるようになっているので、既存のcapistranoのデプロイプロセスに手を加える必要はありません。

EC2の環境構築

webpacker（というよりwebpack）を動かすために、nodeとyarnをEC2にインストールしていきます。
EC2にsshでログインし、capistranoユーザと同じユーザで作業していきます。

nvmをインストール

まずはnvmをインストールします。

$ git clone git://github.com/creationix/nvm.git .nvm
$ . .nvm/nvm.sh

次回ログイン時からもnvmが使えるように.bashrcに以下を追加します。

.bashrc

# nvm
if [[ -s ~/.nvm/nvm.sh ]];
 then source ~/.nvm/nvm.sh
fi

※.bash_profileはcapistranoのデプロイ時に読み込まれないので.bashrcに書く

nodeをインストール。

$ nvm install v9.5.0
Downloading and installing node v9.5.0...
Downloading https://nodejs.org/dist/v9.5.0/node-v9.5.0-linux-x64.tar.xz...
######################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v9.5.0 (npm v5.6.0)
Creating default alias: default -> v9.5.0
$ nvm current
v9.5.0
$ node --version
v9.5.0

yarnをインストール

お次はyarn。

$ curl -o- -L https://yarnpkg.com/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  7033    0  7033    0     0  54326      0 --:--:-- --:--:-- --:--:-- 54519
Installing Yarn!
> Downloading tarball...

[1/2]: https://yarnpkg.com/latest.tar.gz --> /tmp/yarn.tar.gz.NMAgUCWjay
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    91  100    91    0     0   1029      0 --:--:-- --:--:-- --:--:--  1034
  0     0    0   608    0     0    829      0 --:--:-- --:--:-- --:--:--   829
100  865k  100  865k    0     0   206k      0  0:00:04  0:00:04 --:--:--  297k

[2/2]: https://yarnpkg.com/latest.tar.gz.asc --> /tmp/yarn.tar.gz.NMAgUCWjay.asc
100    95  100    95    0     0   8591      0 --:--:-- --:--:-- --:--:--  8591
  0     0    0   612    0     0   2160      0 --:--:-- --:--:-- --:--:--  2160
100  1027  100  1027    0     0   2170      0 --:--:-- --:--:-- --:--:--  2170
> Verifying integrity...

...(中略)

> Successfully installed Yarn 1.3.2! Please open another terminal where the `yarn` command will now be available.
$ source ~/.bashrc
$ yarn -v
1.3.2

.bashrcに以下が追加されてることを確認します。

.bashrc

export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"

これでwebpackが動く環境が整いました

補足：capistranoでデプロイするとwebpackerでエラー

サーバ側の準備が整ったところで、capistranoでデプロイしてみます。

盛大にエラる。。

...(中略)

 DEBUG [b18056c3]       Webpack binstubs not found.

Have you run rails webpacker:install ?

Make sure the bin directory or binstubs are not included in .gitignore

Exiting!

え、、、binディレクトリあるけど、、、

調べてみるとwebpackerのバグだったので、アップデート（3.0.2 -> 3.2.2）したら通りました

webpack binstubs not found, but present? · Issue #1166 · rails/webpacker

以上。

参考

• reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
• rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails
• Capistrano で.bash_profileに書いてある環境変数が読まれない件 - Qiita
• Amazon Linux AMIに最新NodeJSをNVMでインストール、ついでにYarnもインストール - Qiita
• Webpacker is installed 🎉 🍰 - Misoca開発者ブログ