Overview

This is a personal note on an example of deploying Nuxt 3 to Netlify and AWS.

Below are the deployment examples.

Netlify

app.vue

nuxt3-nakamura196.netlify.app
nuxt3-nakamura196.netlify.app

server/api/hello.ts

nuxt3-nakamura196.netlify.app
nuxt3-nakamura196.netlify.app

AWS (Serverless)

app.vue

nuxt3.aws.ldas.jp
nuxt3.aws.ldas.jp

server/api/hello.ts

nuxt3.aws.ldas.jp
nuxt3.aws.ldas.jp

The source code is at the following URL.

github.com
github.com

I will explain each of them below.

Netlify

By referring to the following article, I was able to deploy including BFF (Backend for Frontend).

Nuxt3をNetlifyCLIとnetlify.tomlを使ってNetlifyにデプロイしよう - 独学プログラマ
今回達成すること前回/posts/nuxt3shopifyproducts作成したShopifyapiのコンテンツをNetlifyにデプロイします。20220314202231https://images.ctfassets.net/9tor7hf8m4e5/x72KFVFiTihoLTF1x1wcx/8b48e37d
独学プログラマ

AWS (Serverless)

The following article was helpful for the method using Lambda Functions URL.

Nuxt.js(3) で作ったアプリをAWS Lambda 1つで公開する - Qiita
備忘録 nuxt.config.ts export default defineNuxtConfig({ nitro: { preset: "aws-lambda", serveStatic: true, }, }) ...
Qiita

On the other hand, this time I will show the method using API Gateway. The following article was helpful.

Nuxt 3 in AWS Lambda with Serverless Framework
I try to deploy simple Nuxt 3 application to AWS Lambda for SSR. So far I have: in nitro.config.ts import { defineNitroConfig } from 'nitropack'; export default defineNitroConfig({ preset: 'aws-...
Stack Overflow

By referring to the above, I was able to deploy as follows.

9f4jl2wn81.execute-api.us-east-1.amazonaws.com
9f4jl2wn81.execute-api.us-east-1.amazonaws.com

Next, I configure a custom domain. Below, I explain both the case of using only API Gateway and the case of using CloudFront.

API Gateway Only

Create a domain name from "Custom domain names" in API Gateway.

Then, select the above API from API mappings.

Then, add a record in Route 53.

This allows you to publish using a custom domain as follows.

nuxt3-apigateway.aws.ldas.jp
nuxt3-apigateway.aws.ldas.jp

Using CloudFront

When creating a CloudFront distribution, enter the API Gateway URL as the origin domain.

For "Default cache behavior" under "Viewer", I selected "Redirect HTTP to HTTPS".

Under "Settings", specify the alternate domain name and custom SSL certificate.

Finally, add a record in Route 53 using the CloudFront domain name.

This allowed me to publish using a custom domain as follows.

nuxt3.aws.ldas.jp
nuxt3.aws.ldas.jp

Summary

There may be better methods, but I hope this serves as a useful reference for deploying Nuxt 3.

When deploying as SPA or SSG, using GitHub Pages is also an option.

I would like to use different approaches depending on the use case.