Nuxt3のSSRをVercelでホスティングする(+ CORSの有効化)

2023/02/03に公開

Nuxt3のSSRをVercelでホスティングする機会がありましたので、その備忘録です。

ビルド設定について、以下のように、Output Directoryを.output/serverに設定する必要がありました。

またCORSを有効化するにあたり、以下の記事が参考になりました。

https://vercel.com/guides/how-to-enable-cors

具体的には、プロジェクトのルートに以下のフォルダを置くことで対応できました。

vercel.json
{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
      ]
    }
  ]
}

間違った記述もあるかもしれませんが、参考になりましたら幸いです。

Discussion