Zenn
Open6

Cloudflare Pages × Nuxt3を試す

Nuxt
Cloudflare
wattanxwattanx

Cloudflare PagesにNuxt3で作ったアプリケーションをデプロイしたい
SG(Static Generation)で試す。

wattanxwattanx

Install

npx nuxi initで新規作成する。

app.vueを下記のように変更。

app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>

Dynamic Routes も試してみたいので、下記のようなファイルも追加。

pages/index.vue
<script setup lang="ts">
const id = ref("1");
</script>

<template>
  <div>
    <div>
      <input v-model="id" />
    </div>
    <div>
      <NuxtLink :href="`/slug/${id}`">to slug</NuxtLink>
    </div>
    <NuxtLink to="/about">ABOUT</NuxtLink>
  </div>
</template>
pages/slug/[id].vue
<script setup lang="ts">
const { params } = useRoute();
</script>

<template>
  <div>
    <p>userid:{{ params.id }}</p>
    <div>
      <NuxtLink href="/">to home</NuxtLink>
    </div>
  </div>
</template>
pages/about.vue
<template>
  <div>
    <div>about pageだよ</div>
    <div>
      <NuxtLink href="/">to home</NuxtLink>
    </div>
  </div>
</template>
wattanxwattanx

デプロイ

GitHub連携をした後下記のように設定して、デプロイする。
(nuxt generateで生成されるhtml群が.output/publicにあるため)

wattanxwattanx

ssr: falseでデプロイした場合

URLを直接入力しても、該当のページに遷移することができる。
slug/[id]も問題なく表示できる。
が、レスポンスは404で返される。

wattanxwattanx

ssr: trueでデプロイした場合

URLを直接入力しても、該当のページに遷移することができる。
slug/[id]も問題なく表示できる。

レスポンスもちゃんと200で返される。