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

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

ただいまの
回答率

87.58%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 341

score 13

実現したいこと前提

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

development.rbの

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

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

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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