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"

이제 웹 팩이 움직이는 환경이 완성되었습니다

보충: 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 개발자 블로그