本番環境で404ページの修正したデザインが反映されない

Question

現在AWS(EC2)上にDocker+Railsアプリをデプロイしています。
以下のサイトを参考にして404ページのデザインを修正して反映させましたが、デザインが適用されません。

Rails 5の404/500エラーページ、簡単作成手順 | 酒と涙とRubyとRailsと

何度GitHubからpullしてファイルの変更を反映させても、デザインが反映されない理由がnginxが原因かもしれませんが、対処方法が全くわかりません(m_ _m)

もしわかる方がいらっしゃればご教授いただきますようよろしくお願いいたします(m_ _m)

動作環境

Rails	AWS
Ruby: 2.7.3	Amazon linux2
Rails: 6.0.3.6	nginx: 1.16.1
Devise: 4.7.3	EC2、RDS(MySQL)
rails-dotenvを使用

困っていること

作成した404ページが反映されない

考えられること

nginxの設定が原因でpublic/404.htmlのファイルが反映されない？

試したこと

以下を参考にconfig/environments/development.rbのconfig.consider_all_requests_localの値をfalseにしてlocalで動作確認しましたが自分が変更したデザインが表示されました。
404,500エラー発生時のエラーハンドリング及Slack通知の実装 - Qiita

期待する動作

public/404.htmlの自分のコードが反映されること

該当しそうなコード

app/controllers/application_controller.rb(1/3)

class ApplicationController < ActionController::Base
#  :
  if Rails.env.production?
    rescue_from StandardError, with: :render_500
    rescue_from ActiveRecord::RecordNotFound, with: :render_404

    def render_404
      render file: Rails.root.join('public/404.html'), status: :not_found, layout: false, content_type: 'text/html'
    end

    def render_500(e)
      logger.error(e.message)
      logger.error(e.backtrace.join("\n"))
      render file: Rails.root.join('public/500.html'), status: :internal_server_error, layout: false, content_type: 'text/html'
    end
  end
#  :
end

nginx.conf(2/3)

upstream webapp {
  server unix:///webapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  server_name 35.76.230.5;

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  root /webapp/public;

  client_max_body_size 100m;
  error_page 404             /404.html;
  error_page 505 502 503 504 /500.html;
  try_files  $uri/index.html $uri @webapp;
  keepalive_timeout 5;

  location @webapp {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://webapp;
  }
}

docker-compose.yml(3/3)

ARG RUBY_VERSION=2.7.3
FROM ruby:$RUBY_VERSION

ENV APP_DIR /webapp
ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE yes
ENV DEBCONF_NOWARNINGS yes
ENV LANG C.UTF-8
ENV MY_BUNDLER_VERSION 2.1.4

RUN mkdir $APP_DIR
WORKDIR $APP_DIR

# Node.js
RUN curl -fsSL https://deb.nodesource.com/setup_14.x | bash - \
  && 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 -qq \
  && apt-get install -y --no-install-recommends \
  build-essential \
  libpq-dev \
  vim \
  nodejs \
  yarn

COPY Gemfile Gemfile.lock /webapp/
COPY package.json yarn.lock /webapp/
RUN gem install bundler --no-document -v $MY_BUNDLER_VERSION && \
  bundle install
RUN yarn install --production --frozen-lockfile && yarn cache clean

COPY . $APP_DIR
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin//entrypoint.sh
ENTRYPOINT [ "entrypoint.sh" ]
EXPOSE 3000

EXPOSE 3000
CMD ["rails", "server", "-b", "0.0.0.0"]

Comments

[neko_daisuki]

nginx.conf の以下の行を消して nginx を再起動、
その後 404 を表示させようとするとどうなりますか？

error_page 404 /404.html;

[begenner]

error_page 404 /404.html; の記述を削除して
docker-compose restart nginx
を実行して再度起動しましたが、表示が変更されません。
プリコンパイルを実行してみましたが変化はありませんでした。
他に考えられる原因は何かあるのでしょうか？

[neko_daisuki]

現状はどのような 404 ページが表示されるのでしょうか？

[begenner]

現状では以下の文言が表示される状態です。

The page you were looking for doesn't exist.

You may have mistyped the address or the page may have moved.

If you are the application owner check the logs for more information.

[neko_daisuki]

rails の public/404.html ですね。
削除してみたらどうでしょう。

[begenner]

削除しても反映されません。
何が問題なのでしょうか？

Answer 1

nginxの404とrails側の404は違うものです。

nginxの404

以下の設定をすると、/sidekiqでアクセスして、public/404.htmlの内容が反映されます。

server {
  location /sidekiq {
    return 404;
  }
  error_page 404 /404.html;
}

railsの404ページ

rails側の404はnginx通してからになります、public/404.htmlを使っても良いですが、nginxの404ページと分けて、もっとリッチな404作ってもいいと思います。

class ApplicationController < ActionController::Base
  rescue_from ActionController::RoutingError, AccessDenied, with: :render_404 unless Rails.env.development?

  def render_404(_e = nil)
    # errorのテンプレートファイルを自前で用意する
    render template: 'errors/ER-01', formats: :html, status: :not_found, layout: 'application'
  end
end

Comments

[begenner]

nginxの404とrails側の404は違うことは知りませんでした。
現状sidekiqを使用していないのですが、その場合にrailsの public/404ページを表示させる方法はあるのでしょうか？

[heroyct]

requestがサーバーにきたら、この順番で処理します。

request -> nginx -> rails(pumaなど)

webサーバーの負担が少なくするためには、できるだけnginx側で404判定して、nginxでできない部分はrailsで処理する方が良いと思います。

なので、以下の手順で整理してください。(sidekiqはあくまでサンプルなので、気にしなくていいです)
1. 404にするURLの一覧
2. それぞれのURLに対してnginxで処理するかrailsで処理するかを決める
3. nginxで処理するURLはnginx側で設定する
4. railsで処理するURLはrails側で対応する(renderするファイルはpublid下ではくて、app/views下に置く)

404ページのメンテナンスが面倒の場合は、こちら参考して良さそうです。
https://qiita.com/aki77/items/623cf30724ed2e5908c4

[begenner]

詳細にご回答いただきありがとうございます。
該当しない不規則な不特定多数のurlの場合を考慮したいのですが、nginxでそのような設定が可能なのでしょうか？
上記のqiitaのリンクでもrails側から public/404.html を読み込んでいるように感じます。
nginxを挟んだ場合は結局nginxの404ページになってしまいそうな気がします。
もし参考になりそうなリンクなどがあれば教えていただけると嬉しいです。

[heroyct]

https://morizyun.github.io/blog/custom-error-404-500-page/index.html

質問に戻りますが、上のサイト書いてる内容はpublic/404.htmlと関係なく、rails側の404ページをカスタマイズする方法です。

> app/views/errors/error_404.html.haml と app/views/errors/error_500.html.haml を作成して404/500エラー時のViewを作成。

なので、public/404.html変更しても反映されないのが当然です。

一旦nginxとpublic/404.html忘れて、まずrails側の404ページを表示したらどうですか？

こちらを外せば、開発でテストできるので、まずは開発環境で404ページを表示してみてください。
```
unless Rails.env.development?
```

[begenner]

なるほど...
手元で試してみます。
解決できなければ再度質問させていただきますのでお手数ですがよろしくお願いいたしまっす。。