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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

1回答

1168閲覧

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

takamuratk

総合スコア5

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2019/11/26 11:38

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

投稿2019/11/28 13:49

編集2019/11/29 09:16
nurari

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takamuratk

2019/11/28 19:43

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

2019/11/29 09: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環境では問題がなかったというのが謎ですが)
takamuratk

2019/11/29 11:43

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問