zukucode
主にWEB関連の情報を技術メモとして発信しています。
htaccess

シングルページアプリケーションでリロードすると404エラーになるときの対処法

シングルページアプリケーション（以下、SPA）で、ブラウザをリロードしたときに404エラー（ページが見つからない）になるときの対処法を紹介します。

エラーになる原因

SPAではページ遷移はJavaScriptのフレームワークのルーティング機能で実装することが多いです。

フォルダ構成は以下のようになっていることが多いです。

  • app.css
  • app.js
  • index.html

複数ページを作成していてもhtmlファイルはindex.htmlの１ファイルしか存在しません。

例えばルーティング機能でaboutページを作成して、http://example.com/aboutのURLに遷移した状態で、ブラウザをリロードします。

しかし、サーバーにはaboutのファイルは存在しないため、404エラーになります。

対処法

http://example.com/aboutなど、index.html以外のURLでアクセスしたときでもindex.htmlの内容を表示するようにします。

そのため、.htaccessに以下の記載を追記します。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
htaccess

関連記事