Elastic BeanstalkでRails アプリをデプロイするときにnginxのアセットファイル読み込み場所を追加したい。

Question

Elastic BeanstalkでRailsアプリをデプロイするときに起きた問題に関連しています。

以前に以下の質問をさせていただきました。

<Ruby on Rails × React の組み合わせがAmazon Elastic Beanstalkでデプロイできない>
https://teratail.com/questions/70641?modal=r-comp

デプロイ自体は応急処置により、できたのですが、応急処置なので、恒久的な対応をしたく質問をしました。

【やりたいこと】
AWS公式にある以下にある通り、アセット提供フォルダが/public及び/public/assetsのみとなっています。
これに新たに/public/packというフォルダを加えたいです。

http://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_Ruby_rails.html

注記
Elastic Beanstalk は Rails アセットをデフォルトでプリコンパイルします。Ruby 2.1 コンテナタイプについては、次の点に注意してください。
nginx ウェブサーバーは、/public および /public/assets フォルダーからアセットを提供するように事前設定されています。

【背景】
こちらの質問にもあげましたが、Rails5.1で標準対応したWebpackerですが
React用のファイルをコンパイルする際に/public/packにコンパイルされます。
<Ruby on Rails × React の組み合わせがAmazon Elastic Beanstalkでデプロイできない>
https://teratail.com/questions/70641?modal=r-comp

このままデプロイするとデプロイ先では/public/packがアセットされず結果、Reactが動きません。
nginxの設定を変更すれば良いと思うのですが、変更方法がわからず。。。

ご存知の方がおりましたら、ご教示いただけますでしょうか。

Answer 1

ElasticBeanstalkのNginx設定ファイルは、Rubyプラットフォームの場合、以下のディレクトリにある雛形から作成されるので、.ebextensionsのfilesディレクティブで煮るなり焼くなり好きにしてください。

$ eb ssh [your-environment-name]
$ ls -l /opt/elasticbeanstalk/support/conf

ただ、プラットフォームバージョンによってテキストファイルだったりERBだったりするので注意が必要です。

Comments

[nmatsumoto4]

ご回答ありがとうございます。

ご指摘通り.ebextensionsに設定を書くと思うのですが、具体的にどのように書いたら良いかわからず。。。
詳細ご教示いただくことは可能でしょうか。

[sonodar]

質問の意図としては、ebextesionsがわからないということでしょうか？それともnginxの設定方法がわからないということでしょうか？

後者であればまずはeb sshで実際のnginxのテンプレートファイルと、テンプレートから作成された後の/etc/nginx/conf.dのファイルなどをご覧ください。
そこにlocationを追加してrootを/var/app/currentなどにしてあげればいいです。

テンプレートファイルはebextesionsのfilesでパスを指定してあげれば、contentの内容で上書きされます。

```
files:
"/opt/elasticbeanstalk/support/conf/xxxx.conf":
mode: "000644"
owner: root
group: root
content: |
ここにファイル内容を書く
container_command:
restart_nginx:
command: service nginx reload
```

スマホからなのでちゃんとしたコードを提供できなくて、すみません。

[nmatsumoto4]

度重ねてご回答ありがとうございます！

ご指摘通り行ったのですが、惜しいとこまで行って肝心の結果が伴わず、、、
追加でアドバイスいただけますと幸いです。。。

＜やったこと＞
ご指摘通り、./ebextensions/webapp.configを作成
```
files:
"/opt/elasticbeanstalk/support/conf/webapp.conf" :
mode: "000644"
owner: root
group: root
content: |
upstream my_app {
server unix:///var/run/puma/my_app.sock;
}
server {
listen 80;
server_name _ localhost; # need to listen to localhost for worker tier

location / {
proxy_pass http://my_app; # match the name of upstream directive which is defined above
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /assets {
alias /var/app/current/public/assets;
gzip_static on;
gzip on;
expires max;
add_header Cache-Control public;
}
======ここを追加===========
location /pack {
alias /var/app/current/public/packs;
gzip_static on;
gzip on;
expires max;
add_header Cache-Control public;
}
=================
location /public {
alias /var/app/current/public;
gzip_static on;
gzip on;
expires max;
add_header Cache-Control public;
}
}
container_commands:
restart_nginx:
command: sudo service nginx reload
command: echo 'nginx restart'
```

加えて、./ebextensions/webapp_healthd.configを作成

```
files:
"/opt/elasticbeanstalk/support/conf/webapp_healthd.conf" :
mode: "000644"
owner: root
group: root
content: |
upstream my_app {
server unix:///var/run/puma/my_app.sock;
}

log_format healthd '$msec"$uri"'
'$status"$request_time"$upstream_response_time"'
'$http_x_forwarded_for';

server {
listen 80;
server_name _ localhost; # need to listen to localhost for worker tier

if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2})") {
set $year $1;
set $month $2;
set $day $3;
set $hour $4;
}

access_log /var/log/nginx/access.log main;
access_log /var/log/nginx/healthd/application.log.$year-$month-$day-$hour healthd;

location / {
proxy_pass http://my_app; # match the name of upstream directive which is defined above
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

location /assets {
alias /var/app/current/public/assets;
gzip_static on;
gzip on;
expires max;
add_header Cache-Control public;
}
location /packs {
alias /var/app/current/public/packs;
gzip_static on;
gzip on;
expires max;
add_header Cache-Control public;
}
location /public {
alias /var/app/current/public;
gzip_static on;
gzip on;
expires max;
add_header Cache-Control public;
}
}
container_commands:
restart_nginx:
command: sudo service nginx reload
command: echo 'nginx restart'

```

その後、DeployしてProduction環境で確認するも
/packs　以下のフォルダがassetされません。

<確認したこと>
eb ssh で以下のファイルが更新されていることを確認しました。
/opt/elasticbeanstalk/support/conf/webapp_healthd.conf
/opt/elasticbeanstalk/support/conf/webapp.conf

ファイルが更新されているので設定ファイル自体が間違っている訳ではなさそうなのですが、、、、
他に設定ファイルがあるのでしょうか。。。
ご教示いただけますと幸いです。

[sonodar]

/etc/nginx配下のファイルはテンプレート通りに更新されていますか？
/etc/nginx配下のファイルを直接編集しながらうまくいった状態のファイルをもとにテンプレートファイルを作成してみてはどうでしょう。
ちなみにElasticbeanstalk環境以外ではそのnginx設定で動いているんですかね？
問題の切り分けできてます？

Answer 2

個人的には、nginxからアセットを配信するより、AssetSync（GitHub）のような手段を使って、アセットのような静的ファイルはS3から配信、という方がいいのではないかと思いました。