概要
Nuxt3をNetlifyおよびAWSにデプロイする方法の一例の備忘録です。
以下、構築例です。
Netlify
app.vue
https://nuxt3-nakamura196.netlify.app/
server/api/hello.ts
https://nuxt3-nakamura196.netlify.app/api/hello
AWS（Serverless）
app.vue
server/api/hello.ts
https://nuxt3.aws.ldas.jp/api/hello
ソースコードは以下です。
https://github.com/nakamura196/nuxt3
以下、それぞれについて説明します。
Netlify
以下の記事を参考にすることで、BFFを含むデプロイができました。
https://blog.cloud-acct.com/posts/nuxt3-netlify-deploy/
AWS（Serverless）
Lambda Functions URLを使用する方法は以下の記事が参考になりました。
https://qiita.com/P3117/items/e2893804c3161a161a49
一方、今回はAPI Gatewayを使用する方法を示します。以下の記事が参考になりました。
https://stackoverflow.com/questions/73862456/nuxt-3-in-aws-lambda-with-serverless-framework
上記を参考にすることで、以下のようにデプロイすることができました。
https://9f4jl2wn81.execute-api.us-east-1.amazonaws.com/
こちらについて、カスタムドメインの設定を行います。以下、API Gatewayのみを使用する場合と、CloudFrontを用いる場合のそれぞれについて説明します。
API Gatewayのみ
API Gatewayの「カスタムドメイン名」から、ドメイン名を作成します。
その後、APIマッピングから、上述のAPIを選択します。
そして、Route 53でレコードを追加します。
これにより、以下のように、カスタムドメインを用いて公開することができます。
https://nuxt3-apigateway.aws.ldas.jp/
CloudFrontを用いる場合
CloudFrontのディストリビューションの作成において、オリジンドメインにAPI GatewayのURLを入力します。
「デフォルトのキャッシュビヘイビア」の「ビューワー」では、「Redirect HTTP to HTTPS」を選択しました。
「設定」において、代替ドメイン名およびカスタムSSL証明書を指定します。
最後に、Route 53でCloudFrontのドメイン名を用いたレコード追加を行います。
これにより、以下のように、カスタムドメインを用いた公開を行うことができました。
まとめ
他にもより良い方法があるかと思いますが、Nuxt3のデプロイに関して参考になりましたら幸いです。
またSPAやSSGとしてデプロイする場合には、GitHub Pagesを利用する方法もあるかと思います。
用途に応じて使い分けていきたいと思います。