👻

Nuxt3でGCSホスティングしたら末尾スラッシュないと404に飛ばされたがもう遅い。middlewareを使ってのんびりリダイレクト暮らし

2022/10/22に公開約1,400字

Nuxt3でgenerateしたSSGなサイトをGCS(GoogleCloudStrage)でWebホスティングすると、末尾スラッシュ以外のアクセスだと/index.htmlを付けられて404エラーになっちゃう問題。
404 Not Found
/hello でアクセスすると /hello/index.html に飛び404エラー

環境

Nuxt: 3.0.0-rc.12

tralingSlashオプション

SSRやSPA構成の場合は、nuxt.confingにtralingSlashというオプションがあるのでそれが使えるっぽい。

nuxt.config.ts
export default defineNuxtConfig({
  router: {
    trailingSlash: true,
  },
})

ただし、静的でスタティックでSSGなサイトの場合はこのオプションを付けても機能しない。

middleware

Nuxtはmiddlewareをページに設定するとルーティング処理を制御でき、よく認証まわりで使われたりする。

<script setup lang="ts">
definePageMeta({
  middleware: ["auth"]
})
</script>

今回はmiddlewareを使って末尾スラッシュがないアクセスにリダイレクトをかける。また、Nuxt3ではmiddlewareを.global.tsというファイル名にすれば各ページに設定しなくても全体に適用できるので便利。

trailingslash.global.ts
export default defineNuxtRouteMiddleware((to, _from) => {
  // 直接末尾スラッシュなしアクセスした場合を考慮
  if (to.path.endsWith('index.html')) {
    return navigateTo(
      { path: to.path.replace(/index.html$/, '') },
      { redirectCode: 301 }
    )
  }
  // 末尾スラッシュありにリダイレクト
  if (!to.path.endsWith('/')) {
    return navigateTo({ path: `${to.path}/` }, { redirectCode: 301 })
  }
})

GCSのWebホスティングは末尾にスラッシュがない場合は/index.htmlを付与した状態でアクセスしてくるので、末尾スラッシュありなしだけではなくindex.htmlの条件も入れておかないと解決しないので注意。

まとめ

GCS & CloudCDN構成のホスティングで誰もが通る末尾スラッシュ問題。S3 & CloudFrontならLambdaなりCloudFrontFunctionなりで簡単に解決できるのにGCPのホスティングは色々と面倒ですね。でも手のかかる子って感じでちょっといいですよね!Google最高!

Discussion

ログインするとコメントできます