SPAが404エラーになる件

この記事を書いたチーム:frontier
SPAが404エラーになる件 株式会社Smallit 技術ブログ

そもそもSPAとは 

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90%、年休124日以上 etc.  詳細はこちらから>

シングルページアプリケーション(英: single-page application、SPA)とは、単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。 

                             ―― ウィキペディア 

 SPAは一般的にindex.html一つと複数のjsファイルとcssファイルなどで構成されている。 

SPAのルーティング課題 

シングルページアプリケーションとは言え、ユーザにページ遷移しているように感じさせるために、それぞれの画面にルーティング時、動的にアドレスバーのURLを書き換えている。 

例えば、ログイン画面を表示時はhttp://localhost:8080/app/loginとなるし、ログインした後のメイン画面はhttp://localhost:8080/app/mainとなる。 

但し、上記のURLはあくまでもSPA内部の仕組みであり、Webサーバ側でそのURLと紐づくページが存在しているわけではない。 

なので、ブラウザのアドレスバーに直接http://localhost:8080/app/loginを入力し、ログイン画面を開こうとすると「404 Not found」になる。 

 SPAのルーティング対策 

http://localhost:8080/app/xxxのxxxの部分が何であれ、常にSPAのindex.htmlを返すようにすれば、上記の課題が解決されます。 

良く使われるWebサーバでの実例を2つ挙げてみました。

・Apache 

mod_rewriteで制御する。 

・Nginx 

try_filesで制御する。 

 

【エンジニア募集中】フルリモートも◎(リモート率85.7%)、平均残業8時間、年休124日以上、有給取得率90% etc. 詳細はこちらから>

Smallitのサービス