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

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

新規登録して質問してみよう
ただいま回答率
85.46%
AWS(Amazon Web Services)

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

Q&A

0回答

2120閲覧

AWSでデプロイしたサイトがCSS反映されない

t-haruna

総合スコア0

AWS(Amazon Web Services)

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

0グッド

0クリップ

投稿2021/01/04 06:59

前提・実現したいこと

初学者です。スクールの課題で個人アプリを自力で作成しています。

ruby on rails でアプリを作成し、
AWSにてデプロイをしましたがCSSが反映されません。

CSSとのことで、アセットコンパイルがうまくできていないのではないかと推定し
もう一度コンパイルをしてみたところ、警告文が出ていました。

webpackの設定に問題があるようなので
設定変更をして警告文を消し、再度コンパイルし直す方向で考えていますが
警告文の消し方がいまいちわかりません。

対応の方向性も含めて
お分かりになる方、ご教示をお願いできないでしょうか?

初めての投稿で情報不足があればご指摘ください。

よろしくお願いいたします。

コンパイル時の警告文

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: js/application-4150c52e3676a99d221c.js.map.gz (306 KiB) WARNING in webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/

該当のソースコード

ソースコード

試したこと

ネットで調べたところwebpackのパフォーマンスオプションというもので
警告文をオフにできるようですが、いまいちやり方が判然としません。

参考資料
https://qiita.com/terrierscript/items/f840b5ccff0c0be7420a

VSコードのconfig/webpack内にいくつかファイルがあり本番環境なのでprodaction.jsに
記載すればいいような気はしますが・・

補足情報(FW/ツールのバージョンなど)

構築環境
rails 6.0.0
nginx
unicorn

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

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

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

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

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

t-haruna

2021/01/04 10:12

返答いただきありがとうございます。 教えていただいたサイトの情報を元にして警告文を消すことができました。 ですが、おっしゃる通りCSS反映されないままでした・・ もう一度、何が問題なのか考え直してみます・・
退会済みユーザー

退会済みユーザー

2021/01/04 10:22

CSSファイルの参照の仕方が間違っていたりしないですかね。webブラウザ上でHTMLソースの表示などのメニューから、受信したHTMLソースを点検してみるといいかも。
t-haruna

2021/01/04 10:33

検証ツールで確認したところ、おっしゃる通りエラーが出ていました! Failed to load resource: the server responded with a status of 404 (Not Found) application-72e38a6ba1b07392b561c937f534aee68602604384c8aea85cf8d9938ef4be26.css:1 となっていたので、CSSファイルが読み込まれていないためのようです。 対応方法を自分で調べますが もしご存じでしたら 教えていただけると助かります・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問