Nuxt3をNetlifyおよびAWSにデプロイする方法の一例
概要
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を使用する方法は以下の記事が参考になりました。
一方、今回はAPI Gatewayを使用する方法を示します。以下の記事が参考になりました。
上記を参考にすることで、以下のようにデプロイすることができました。
こちらについて、カスタムドメインの設定を行います。以下、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を利用する方法もあるかと思います。
用途に応じて使い分けていきたいと思います。
Discussion