ECSでRailsアプリを動かすと、FontAwesomeやjqueryなどが正常に動作しない。

Question

作成中のポートフォリオが、ローカル開発環境では正常に動作していた箇所が、ECSで動かすとどうにも動かなくなってしまうので質問させていただきます。

【私のレベル】

現在就活用のポートフォリオ作成中の初学者です。
HTML、CSS、Ruby、Railsなどは一応学習済みといったレベルです。

【環境】

ローカル開発環境

• Windows10
• Ruby 2.5.3
• Rails 5.2.3
• Docker for Windows
• Docker 19.03.4
• docker-compose 1.24.1

RailsコンテナとNginxコンテナを分けた構成にしています。

ECS

• Docker 18.09.9-ce

ローカル開発環境と同様にRailsとNginxコンテナを分けています。

アプリのGithub
https://github.com/takamuraTK/comic_farm

【現在までの経緯】

現在はDockerを勉強中でして、

• ローカル開発環境でdocker-compose（windows環境）を用いてアプリを開発
• Dockerイメージをビルドし、ECRにプッシュ
• プッシュしたイメージでECSでタスク定義を作成
• EC2テンプレートを使用したクラスターを作成し、それ用のサービスも作成
• 実際にアクセスしてみるとローカルでは見なかった異常が見られる

という経緯です。

【問題点】

• GemでインストールしたFontAwesomeがあり、表示されるはずのアイコンが表示されない。

• 「いいねボタン」的なものがいくつかあり、いずれもAjaxを実装していてその場で表示が切り替わるようになっているのですが、実際にボタンを押すと

ActionController::UnknownFormat in コントローラー名#アクション名
コントローラー名#アクション名 is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: []

と言ったRailsエラーが表示されます。
この機能はこちらの記事を参考に作成しており、
https://qiita.com/__tambo__/items/45211df065e0c037d032
Gemのjquery-railsを必要としていることから、こちらが正常に機能していないのかなという考えです。（FontAwesomeも機能していなかったので）

• CSSにて設定したフォントが反映されない。（優先順位の低いフォントに変わっている）

以上の問題がローカルの開発環境では全く起こらなかったのですが、ECSで運用するとなると発生してしまいます。
逆に、上記以外の機能は正常に動作します。

【自分で行った検証】

• FontAwesomeをGemではなくCSSとしてhtmlのhead内に記述

→正常にアイコンが表示された。（Gemが正常に機能しない問題？）

• ECS環境をEC2ではなくFargateにしてみる

→同様の現象

• EC2で手動でインスタンスを作成し、そこにDockerをインストールしgit cloneしてdocker-composeで動かしてみる（ECSは全く関与しない状態）

→同様の現象

• さらにEC2でローカルのファイルをSCPでそのままアップロードしたものを動かしてみる

→同様の現象

となっており、ローカル側では間違いなく正常に動いていたものが、AWSで動かそうとするとどうにもうまく行きません。
最初はECSでEC2インスタンスを動かしたときのみに発生するものだと思い、ECS側の何かしらの設定に不備があるのかと思いました。
しかし検証の欄に書いた通り、EC2単体でDockerを動かしも同様の問題が発生してしまったのでどうにも解決の見込みがありません。
環境の違いとしてはWindowsとLinuxなのですが、どういった違いでこういった現象が起こっているのか見当がつかないので、質問させていただきます。
どうかよろしくお願い致します。

Answer 1

Dockerイメージをビルドし、ECRにプッシュ

とのことですが、Windows環境でビルドしたものをプッシュしてECSで使用しているということでしょうか。
もしそうであれば、Linux環境でビルドしてECRにプッシュした後、そのイメージを使用してECSへデプロイしてみてください。

font-awesome-rails, jquery-rails共に、依存関係でnokogiriがインストールされますが、nokogiriはnative extensionを含むため、違うOS上でビルドされたパッケージは動かない可能性が高いです。

追記:表示されたアイコンのキャプチャです。

Comments

[takamuratk]

ご回答ありがとうございます。
Windows環境でビルドしていたので、Linux環境でビルドしたものをプッシュし、ECSにデプロイしてみましたが、症状は変わらずでした。
一応私が行った過程としては
- EC2の適当なLinuxインスタンスでGithubからアプリをclone
- そこでビルドし、ECRへプッシュ
- プッシュしたイメージを元にECSでタスクを動かしてみる
と言った流れなのですが、この手順に問題があるのでしょうか。

[nurari]

native extensionが原因ならばそもそもPumaも動かないですね、失礼しました。

改めて実際にソースを取得して確認してみたところ、確かにアイコンが表示されませんでした。
nginxのコンテナの出力を確認すると下記のようなエントリが見られました。

```
172.16.1.40 - - [29/Nov/2019:08:24:39 +0000] "GET /assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1 HTTP/1.1" 404 571 "http://172.16.1.24/users/sign_in" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36" "-"
2019/11/29 08:24:39 [error] 8#8: *23 open() "/app/public/assets/application.self-12be097b9a2442b0b6cdcb5146d1d63c00abcde3675ff34d1de6126cb13e6714.js" failed (2: No such file or directory), client: 172.16.1.40, server: localhost, request: "GET /assets/application.self-12be097b9a2442b0b6cdcb5146d1d63c00abcde3675ff34d1de6126cb13e6714.js?body=1 HTTP/1.1", host: "172.16.1.24", referrer: "http://172.16.1.24/users/sign_in"
```

/assets以下のファイルへのアクセスが失敗しています。
development環境ではassetsは動的に生成されますので、このためCSSやjsへのアクセスが失敗していたのではないかと推測されます。

試しに `containers/nginx/nginx.conf` を下記の通り書き換えて、再度ビルドしたところ問題なくアイコンが表示されました。（画像を元の回答に貼り付けておきます。）

```
diff nginx.conf.org nginx.conf -u
--- nginx.conf.org 2019-11-29 09:01:49.115576401 +0000
+++ nginx.conf 2019-11-29 08:32:38.933362694 +0000
@@ -39,8 +39,11 @@
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
- location ~* .(ico|css|gif|jpe?g|png|js)(?[0-9]+)?$ {
- expires max;
- break;
+ location /assets {
+ proxy_pass http://app;
+ proxy_set_header Upgrade websocket;
+ proxy_set_header Connection Upgrade;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For
}
}
```

まずは投稿者様のAWS環境でNGINXではなく、Rails側のコンテナに直接アクセスした際にアイコンが表示されるか否かをご確認ください。
もしアイコンが表示されているようであれば、上記の原因の可能性が高いと思われます。（その場合Windows環境では問題がなかったというのが謎ですが）

[takamuratk]

ありがとうございます。その通りでした。
実際にnginx.confを書き換えECSでデプロイしたところ、問題となっていた箇所は全て解決することができました！
かなり詰んでいたので大変ありがたいです。
解決に至るプロセスも説明してくださり、参考になりました。
この度は本当にありがとうございました。