react-routerでルーティングしているSPAをapacheで公開する

1. やりたいこと

react-routerやRemix SPAモードでビルドしたindex.htmlをapacheで公開したい

2. どうすれば良いか

2-1. リダイレクトを設定する

.htaccessファイルに以下を追加すればapacheがリダイレクトしてくれます

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

上記のように設定すると、URLにファイルもディレクトリも存在しない場合にindex.htmlにリダイレクトされます。このとき、開くファイルはリダイレクトされていますがブラウザはURLを維持しているので、JavaScriptからURLを取得することでルーティングが適用されます

2-2. リダイレクトを有効にする

上記で上手く動かない場合はリダイレクトが無効になっています
その場合はhttpd.confに追加してrewrite_moduleとリダイレクトを有効にしてやります

/usr/local/apache2/conf/httpd.conf

LoadModule rewrite_module modules/mod_rewrite.so

<Directory "/usr/local/apache2/htdocs">
    AllowOverride All
    Require all granted
</Directory>

3. 全部httpd.confに書く場合

.htaccessでなくhttpd.confに同じ内容を書くこともできます
ドキュメントルートは別のところからvolumeでマウントしてきてたりするので、その場合はこっちの方がやりやすそう

/usr/local/apache2/conf/httpd.conf

LoadModule rewrite_module modules/mod_rewrite.so

<Directory "/usr/local/apache2/htdocs">
    Require all granted
    AllowOverride None
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ index.html [L]
</Directory>

参考にした記事