津江のブログ

モバイルエンジニアが仕事での学びをアウトプット

【404エラー】react-routerでリロード/URL直打ちした時のNot Found問題

経緯

またも新しいプロジェクトを任され、Reactのアプリを作成することに。
世界展開を目指した「店舗でレジをなくすアプリ」という自社開発サービス。
エンジニア歴2年目に任せていいのかい。
もちろんPrettierは勝手に導入済

ローカルでは問題がないが、AWS上ではエラーになり、半日困っていた。

apacheの場合

react-routerを使用した場合にはpublicディレクトリ直下に.htaccessファイルを作成する必要がある。
react-routerを使って静的コンテンツを配信する際のrewrite設定覚書 - Qiita

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(^/assets/)
RewriteCond %{REQUEST_URI} !(^/static/)
RewriteRule .  /XXXrootのURLXXX/ [L]

RewriteRule . / 間に半角スペースがないとリダイレクトできない

※Nginxの場合

https://westa.io/@ottonove/qf6d

難しいことばかりで困る。