nginxでReactのSPAデプロイした場合、ブラウザリロードで404エラーになる場合の解決方法

目次

はじめに

ReactでSPAの任意のWebアプリを作成します。
ローカルホストでは、ブラウザリロードなどを行っても正常に機能しますが、nginxのサーバーにデプロイした際に404エラーが発生する場合の解決方法を記載します。

nginxの設定

以下の記事でnginxの設定をして頂いた方を対象としていますので、適時読み替えてください。

reigle.info

以下のコマンドを実行します。
「example.com」の部分は各自のドメインに書き換えてください。

vi /etc/nginx/conf.d/example.com.conf 

「server」に以下の設定を追加します。

try_files $uri /index.html =404;

全量は以下です。

server {
  listen 443 ssl;
  server_name example.com;
  root /var/www/html;
  try_files $uri /index.html =404;
  index  index.html;

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

  ssl_prefer_server_ciphers on;
}

server {
  listen 80;
  server_name example.com;

  return 301 https://$host$request_uri;
}