質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,113

score 5

作成中のポートフォリオが、ローカル開発環境では正常に動作していた箇所が、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なのですが、どういった違いでこういった現象が起こっているのか見当がつかないので、質問させていただきます。
どうかよろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/29 04:43

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

    キャンセル

  • 2019/11/29 18:13

    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環境では問題がなかったというのが謎ですが)

    キャンセル

  • 2019/11/29 20:43

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る