LoginSignup
25

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-02-23

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

環境

Rails 4.2.8
webpacker (3.2.2)

前提

webpackerを導入すると、webpackのビルドプロセスはwebpacker:compileがよしなにやってくれます。
また、webpacker:compileassets: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が動く環境が整いました :clap:

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

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

以上。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25