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

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

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

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

Docker

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

CSS

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

Q&A

解決済

1回答

3568閲覧

docker開発環境でいきなりcssが反映されなくなった

divclass123

総合スコア35

Ruby on Rails

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

Docker

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

CSS

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

0グッド

0クリップ

投稿2021/06/09 05:48

編集2021/06/09 06:30

実現したいこと前提

docker開発環境でrailsアプリを開発していたら突然
https://gyazo.com/aec687d90472849510db28a4e2a2ba2a

このようにcssが効かなくなってしまいました。

コンソールで見たら
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
となっていて、cssが反映されなくなってしまいました。

追記

dockerではなく、通常のmacで開発環境を立ち上げましたが、
それでもレイアウトが崩れ、cssの500エラーが起きました

development.rbで

config.logger = Logger.new(STDOUT) # ログを標準出力に出すように設定します.

のconfig.logger = Logger.new(STDOUT)をコメントアウトしたらいけました。

該当のソースコード

Dockerfile

FROM ruby:2.6.5 ## nodejsとyarnはwebpackをインストールする際に必要 # yarnパッケージ管理ツールをインストール RUN curl http://deb.debian.org/debian/dists/buster/main/binary-amd64/by-hash/SHA256/935deda18d5bdc25fb1813d0ec99b6e0e32a084b203e518af0cf7dc79ee8ebda | head RUN apt-get update && apt-get install -y curl apt-transport-https wget && \ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ apt-get update && apt-get install -y yarn # chromeの追加 RUN apt-get update && apt-get install -y unzip && \ CHROME_DRIVER_VERSION=`curl -sS chromedriver.storage.googleapis.com/LATEST_RELEASE` && \ wget -N http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -P ~/ && \ unzip ~/chromedriver_linux64.zip -d ~/ && \ rm ~/chromedriver_linux64.zip && \ chown root:root ~/chromedriver && \ chmod 755 ~/chromedriver && \ mv ~/chromedriver /usr/bin/chromedriver && \ sh -c 'wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -' && \ sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' && \ apt-get update && apt-get install -y google-chrome-stable RUN /bin/sh -c /bin/sh -c bundle update --bundler RUN gem install bundler:2.1.4 RUN mkdir /coffee_passport WORKDIR /coffee_passport COPY Gemfile /coffee_passport/Gemfile COPY Gemfile.lock /coffee_passport/Gemfile.lock RUN bundle update rails RUN bundle update RUN bundle update mimemagic RUN bundle update capybara selenium-webdriver #RUN bundle update nokogiri marcel mimemagic RUN bundle install COPY . /coffee_passport RUN yarn install --check-files RUN bundle exec rails webpacker:compile # Add a script to be executed every time the container starts. COPY entrypoint.sh /usr/bin/ RUN chmod +x /usr/bin/entrypoint.sh ENTRYPOINT ["entrypoint.sh"] EXPOSE 3000 # Start the main process. CMD ["rails", "server", "-b", "0.0.0.0"]

docker-compose.yml

version: '3' services: db: image: mysql:8.0.21 cap_add: - SYS_NICE # コンテナにLinux機能を追加するオプションのようです。SYS_NICEは、プロセスの優先度(nice値)をあげます。 environment: MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD} MYSQL_HOST: db ports: - '3306:3306' volumes: - mysql-data:/var/lib/mysql command: --default-authentication-plugin=mysql_native_password # 認証方式を8系以前のものにする web: build: . command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" stdin_open: true tty: true # この2文を追加でコンテナ内の標準入出力をローカルマシンのターミナルにアタッチする準備が整います。 volumes: - .:/coffee_passport ports: - "3000:3000" depends_on: - db environment: MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD} RAILS_MASTER_KEY: ${RAILS_MASTER_KEY} SENDGRID_API_KEY: ${SENDGRID_API_KEY} ADMIN_USER_PASSWORD: ${ADMIN_USER_PASSWORD} AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID} AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY} GOOGLE_USER_NAME: ${GOOGLE_USER_NAME} GOOGLE_PASSWORD: ${GOOGLE_PASSWORD} SENDGRID_USER_NAME: ${SENDGRID_USER_NAME} SENDGRID_PASSWORD: ${SENDGRID_PASSWORD} PAYJP_SECRET_KEY: ${PAYJP_SECRET_KEY} PAYJP_PUBLIC_KEY: ${PAYJP_PUBLIC_KEY} MYSQL_HOST: db # selenium_chrome を使うために以下の行を追加 SELENIUM_DRIVER_URL: http://selenium_chrome:4444/wd/hub" selenium_chrome: image: selenium/standalone-chrome-debug logging: driver: none volumes: mysql-data: driver: local vendor_bundle: driver: local

試したこと

docker-compose exec web rails assets:precompileとやって

yarn install v1.22.5
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.90s.
yarn install v1.22.5
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.78s.
Everything's up-to-date. Nothing to do

このように色々出てきたが変わらない

macを再起動してもダメ

docker-compose up —build
でビルドし直してもダメ

docker-compose build —no-cacheをする

コンパイルしてくれるしいけるだろ

ERROR [18/20] RUN bundle exec rails webpacker:compile で処理が止まり

Bundler::GemNotFound: Could not find loofah-2.9.1 in any of the sourcesとエラーがでた

bundle update loofahを実行その後に

docker-compose up を実行

したけど結果変わらず

command + shift + R(キャッシュ無効リロード)を押してもダメ

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://coffeepassport.s3.ap-northeast-1.amazonaws.com/9wmdjk5ebjrvc64srey984e7gtfx?response-content-disposition=attachment%3B%20filename%3D%22Automator.app.zip%22%3B%20filename%2A%3DUTF-8%27%27Automator.app.zip&response-content-type=application%2Fzip&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAXE4RPEMESFLHKBEY%2F20210609%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20210609T051801Z&X-Amz-Expires=300&X-Amz-SignedHeaders=host&X-Amz-Signature=5e0bcfff0769e151963ca2783b8e6073b33c32b6e4515c9487586316a16d8411 with MIME type application/zip. See https://www.chromestatus.com/feature/5629709824032768 for more details.
こーゆーのがコンソールで出てきた。

クロムの問題っぽいから
safariでみてもcss崩れた。

悪ふざけで、画像ではなく変なファイルを投稿したので、imagemagicのエラー で
サーバーに負荷がかかって500エラーを起こしたと思い

docker-compose exec web rails db:reset
をして、マイグレーションし直したがエラー 変わらず

docker-compose exec web rails db:drop
をして作り直してもエラー 変わらず。

御回答いただければ幸いです。

環境

macOS,Rails 6.1.3.1,ruby 2.6.5p114 ,Docker version 20.10.5

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

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

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

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

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

guest

回答1

0

自己解決

development.rbの

config.logger = Logger.new(STDOUT)
この部分をコメントアウトしたらいけました。

何でこの部分が悪さしていたかわかりません。。。

なぜ私がこの記述をしたかというと、
docker-compose upを実行したら

rails sみたいなログを出して欲しいので、

調べたらこのコードを見つけたので、記述しました。
結果的には、docker開発環境でrails sみたいな操作ログを出力はできていませんが、とりあえず一安心です。

投稿2021/06/09 06:38

divclass123

総合スコア35

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問