Nuxt.js(SPA)、Nginx構成でハマったこと

はじめに

どうも@chan_kakuです
今回はタイトルにもあるようにNuxt.jsをSPAモードとして利用し、リバースプロキシとしてNginxを利用した場合にハマたことがありましたので、共有しようと思います。
今回のことは英語の記事でも出てこなかったので、皆さんの助けになればと思います。

どこでハマったのか？

結論から言うと<nuxt-link>でのルーティング周りでハマりました。

具体的には？

これを観た方はそんなところでハマらんやろと思ったかもしれないです。
そうです。多分ハマらないかもしれません。また、リバースプロキシを使っていない場合もハマらなかったのです。

問題の記述

Old.vue

<tempalte>
// ~ 省略 ~
  <nuxt-link to='/'>home</nuxt-link>
  <nuxt-link to='hoge1'>hoge1</nuxt-link>
  <nuxt-link to='hoge2'>hoge2</nuxt-link>
  <nuxt-link to='hoge3'>hoge3</nuxt-link>
// ~ 省略 ~
</template>

このような感じで、内部の遷移を定義していました。
直接https://(baseUrl)/にアクセスした場合は問題なかったのですが、例えば、直接https://(baseUrl)/hoge1にアクセスした後、hoge2リンクを踏むと、https://(baseUrl)/hoge1/hoge2となってしまってました。
その際のNginx側の設定は以下のようにVue RouterのHistory modeでの配信のやり方を参考にしていました。

default.conf

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

解決方法

<nuxt-link>のtoのvalueに/を追加しました。

New.vue

<tempalte>
// ~ 省略 ~
  <nuxt-link to='/'>home</nuxt-link>
  <nuxt-link to='/hoge1'>hoge1</nuxt-link>
  <nuxt-link to='/hoge2'>hoge2</nuxt-link>
  <nuxt-link to='/hoge3'>hoge3</nuxt-link>
// ~ 省略 ~
</template>

何故気づいたのか

調べ方が分からずひたすらNginx側の設定について調べてました。
すると今回とは直接的には関係なかったのですが、Nginxのproxy_passで気になるこのような記事を見つけました。
https://www.xmisao.com/2014/05/09/nginx-proxy-pass.html
また、こちらのNuxtの公式ドキュメントでは<nuxt-link>のtoに/を入れていたため、試しに修正してみるとうまく行きました。

実際ちゃんとドキュメント通りやっていればハマらなかったところでした、、、

最後に

もしかして、Nginx側の設定を変更することで、/を追加しなくても期待通りの動作ができたかもしれません。
Nginx詳しい方いらっしゃいましたらコメントいただければと思います。