概要
Nuxt3をNetlifyおよびAWSにデプロイする方法の一例の備忘録です。
以下、構築例です。
Netlify
app.vue
server/api/hello.ts
AWS（Serverless）
app.vue
server/api/hello.ts
ソースコードは以下です。
以下、それぞれについて説明します。
Netlify
以下の記事を参考にすることで、BFFを含むデプロイができました。
AWS（Serverless）
Lambda Functions URLを使用する方法は以下の記事が参考になりました。
Qiita一方、今回はAPI Gatewayを使用する方法を示します。以下の記事が参考になりました。
Stack Overflow上記を参考にすることで、以下のようにデプロイすることができました。
9f4jl2wn81.execute-api.us-east-1.amazonaws.comこちらについて、カスタムドメインの設定を行います。以下、API Gatewayのみを使用する場合と、CloudFrontを用いる場合のそれぞれについて説明します。
API Gatewayのみ
API Gatewayの「カスタムドメイン名」から、ドメイン名を作成します。
その後、APIマッピングから、上述のAPIを選択します。
そして、Route 53でレコードを追加します。
これにより、以下のように、カスタムドメインを用いて公開することができます。
CloudFrontを用いる場合
CloudFrontのディストリビューションの作成において、オリジンドメインにAPI GatewayのURLを入力します。
「デフォルトのキャッシュビヘイビア」の「ビューワー」では、「Redirect HTTP to HTTPS」を選択しました。
「設定」において、代替ドメイン名およびカスタムSSL証明書を指定します。
最後に、Route 53でCloudFrontのドメイン名を用いたレコード追加を行います。
これにより、以下のように、カスタムドメインを用いた公開を行うことができました。
まとめ
他にもより良い方法があるかと思いますが、Nuxt3のデプロイに関して参考になりましたら幸いです。
またSPAやSSGとしてデプロイする場合には、GitHub Pagesを利用する方法もあるかと思います。
用途に応じて使い分けていきたいと思います。
動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。
コメント
…