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をインストールします。

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

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

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

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

nodeをインストール。

```sh
$ 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。

```sh
$ 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に以下が追加されてることを確認します。

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

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

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

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

盛大にエラる。。

```sh
...(中略)

 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）したら通りました :tada: 

[webpack binstubs not found, but present? · Issue #1166 · rails/webpacker](https://github.com/rails/webpacker/issues/1166)

以上。

# 参考
- [reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.](https://github.com/reactjs/react-rails)
- [rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails](https://github.com/rails/webpacker)
- [Capistrano で.bash_profileに書いてある環境変数が読まれない件 - Qiita](https://qiita.com/AknEp/items/6e47ee6c363ed1ba9c68)
- [Amazon Linux AMIに最新NodeJSをNVMでインストール、ついでにYarnもインストール - Qiita](https://qiita.com/nju33/items/aaba3f995b4bb298a13e)
- [Webpacker is installed 🎉 🍰 - Misoca開発者ブログ](http://tech.misoca.jp/entry/2017/06/23/110000)