Nuxt npm run generateで生成されたdistフォルダの公開

Question

npm run generate

で生成されたdistフォルダの中身をサーバの/var/www/htmlに展開し、nginxのconfファイルを

location / {
   root /var/www/html
}

と記載しリンクにアクセスしたところ、直下のindex.htmlファイルは開く事ができるのですが、そこからページ移動する事ができません。
404エラーが出てしまいます・・・

Nuxtの静的サイト公開で調べたところ、Netilifyでの公開記事が多かったので試しにdistフォルダをNetilifyにアップしてみたのですが
こちらはなんの問題もなく公開する事ができました。
nginx側での設定の問題でしょうか？rootを指定するだけではダメ・・・？
同じdistフォルダで試しているのでdist自体に問題があるわけではなさそうですが・・・

Answer 1

全てのへのアクセスをindex.htmlに集中させる必要があります。
下記のように変更すると、期待通りの動作をすると思います。

	location / {
		add_header Cache-Control "no-store";
		try_files $uri $uri/index.html /index.html;
	}

spa nginx configなどのワードで検索するといろいろとnginxの設定例がでてきますので参考にすると良いと思います。

Comments

[s.s]

回答ありがとうございます。
早速試してみました、トップページ(index.html)からおしらせ等の別ページに飛ぶ際に、404エラーは出なくなったのですが。一瞬だけ別ページが表示された後なぜか消えてしまいます。消えるというよりは強制的に別のページに飛ばされる感じでしょうか、トップページに戻るわけでは無いのですが・・・
html内で読み込んでるjsスクリプトが原因かと考えていますが、こちらもサーバ側の設定で解消することが出来るのか不明です。

configの内容
location / {
root /var/www/html;
add_header Cache-Control "no-store";
try_files $uri $uri/index.html /index.html;
}

ディレクトリの階層
/var/www/html
|
|_nuxt
| |_.jsファイル
|
|_imagesフォルダ
|
|_各htmlファイル