# AWS S3の静的ホスティングでクエリパラメータが消失する

S3の静的サイトホスティング機能とNuxtの静的サイトジェネレータ機能を使ってアプリを開発している際、 セットしたクエリパラメータが消失するという事態が起きました。

静的ページを配置する関係上、ルーティングに関しては様々な要因のエラーが考えられるんですが、 今回はパス末尾に / が付くようにリダイレクトがかかっており、リダイレクトの過程でクエリパラメータが外されていたのが原因でした。

# 仕組み

S3の静的ホスティングを使っている場合、下記の流れでファイル探索を行っている影響で末尾にスラッシュが付いてしまうらしい。

  1. /path/to/file というファイルがあればそれを表示
  2. /path/to/file/ のディレクトリ内に index.html があればそれを表示
  3. いずれも存在しなければエラー

# 対処方法

AWS側で対処するには、なんともハックなやり方しか出てこないので スマートじゃない。

ならばと思い、Nuxt.jsのドキュメントを見てたらありました！ router.trailingSlashというプロパティ。

やり方は簡単、 nuxt.config.js に下記を追記するだけ。

// nuxt.config.js
export default {
  router: {
    trailingSlash: true,
  },
}
1
2
3
4
5
6

これをセットすることで、末尾の / が有効になり、 /path/to/file/ がデフォになります。 気持ち的にはスラッシュなしに寄せたかったけど、AWSの仕様的に厳しそうなのと、あんまりこだわるような部分でもないのでこれで良しとしました。

注意点

リンクのURLなどで、 to="/path/to/absolute" のようにパス指定してる場合は404エラーになってしまうため、 きちんと手動で末尾に / を付けるようにしましょう。