概要

以前、LaravelにSPAを組み込む時に考えたディレクトリ構成とnginxのconfファイルというタイトルの記事を書いたが、そこで記載したnginxのconfが不十分だったため、改めて問題点を整理、解決した。

前提

• History API
• nginx

SPAを構築したときにハマったこと

nginxの設定

リロードしても常にindex.htmlを返すように設定する必要がある。 こんな感じでtry_filesを使ってconfを設定する。

location / {
        try_files $uri $uri/ /index.html;
}

jsファイルなどのソースのパス

index.htmlでjsファイルのパスを

<script type="text/javascript" src="./dist/bundle.js"></script>

と指定していため、/dashboard/postなどにアクセスすると /dashboard/post/dist/bundle.jsとリソースを返すようになってしまっていた。

URIに関係なく常にbundle.jsを参照できるように絶対パスを指定するようにした。

<script type="text/javascript" src="/dist/bundle.js"></script>

所感

割と解決に時間がかかったが、nginx側なのか、アプリーケーション側なのか問題を切り分けて考えてみるとすぐに理解できた。

参考

• react-router + 静的ファイル(css, js) の組み合わせの罠