質問するログイン新規登録

Q&A

0回答

785閲覧

Railsのhtmlをいじってたらいきなりcssが無くなり、ついには『localhostからデータが送信されませんでした』

jpsuzuki

総合スコア2

Ruby on Rails

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Docker

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/12/25 12:49

編集2021/12/25 13:16

0

0

開発環境

macOS Monterey
Docker 20.10.11
Rails 6.0.3
Bootstrap 5.0.3

docker-compise
web,db,nginxの3つのコンテナ

経緯

ブラウザからlocalhost:3000にアクセスしCSSを整えてたら、いきなりすごい勢いでmacのファンが回り出し、ブラウザにはcssの無い剥き出しのテキストが表示された
もう一度読み込むと「データが送信されませんでした」の表示

bootstrapでアコーディオン機能を実装してたところなので、javascriptあたりの問題?
設定は何もいじってないけど、エラーページすら表示されないってことはサーバーに問題ありそう?

確認したこと

  • docker-compose ps
    dockerのコンテナが落ちたのかと思ったので確認
    コンテナ3つともrunnningで問題なさげ

  • unicorn.log

- - [25/Dec/2021:18:23:16 +0900] "GET / HTTP/1.1" 200 - 0.8791 - - [25/Dec/2021:18:23:16 +0900] "GET /packs/js/application-e4f3af980e90a0e7865b.js HTTP/1.1" 304 - 0.1326 E, [2021-12-25T18:24:22.516454 #14] ERROR -- : worker=1 PID:66 timeout (16s > 15s), killing E, [2021-12-25T18:24:22.531940 #14] ERROR -- : reaped #<Process::Status: pid 66 SIGKILL (signal 9)> worker=1 E, [2021-12-25T18:24:22.533485 #14] ERROR -- : worker=0 PID:64 timeout (16s > 15s), killing E, [2021-12-25T18:24:22.547971 #14] ERROR -- : reaped #<Process::Status: pid 64 SIGKILL (signal 9)> worker=0 I, [2021-12-25T18:24:22.549615 #113] INFO -- : worker=1 ready I, [2021-12-25T18:24:22.558785 #115] INFO -- : worker=0 ready E, [2021-12-25T18:24:38.536347 #14] ERROR -- : worker=1 PID:113 timeout (16s > 15s), killing E, [2021-12-25T18:24:38.547398 #14] ERROR -- : reaped #<Process::Status: pid 113 SIGKILL (signal 9)> worker=1 I, [2021-12-25T18:24:38.556827 #157] INFO -- : worker=1 ready E, [2021-12-25T18:24:55.570538 #14] ERROR -- : worker=0 PID:115 timeout (16s > 15s)

以下、無限ループ

試したこと

$ rails webpacker:compile

結果

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: application (322 KiB) css/application-f8a353ce.css js/application-e401f9867b5e50603d69.js 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/ Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/javascript/stylesheets/application.scss: Entrypoint mini-css-extract-plugin = * [0] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss 640 KiB {0} [built] + 1 hidden module

警告が表示された

ブラウザではcssのついてないテキストが表示された

原因と解決策を知りたいです。確認すべき点なども教えていただきたいです

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問