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
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
The source code is at the following URL.
https://github.com/nakamura196/nuxt3
I will explain each of them below.
Netlify
By referring to the following article, I was able to deploy including BFF (Backend for Frontend).
https://blog.cloud-acct.com/posts/nuxt3-netlify-deploy/
AWS (Serverless)
The following article was helpful for the method using Lambda Functions URL.
https://qiita.com/P3117/items/e2893804c3161a161a49
On the other hand, this time I will show the method using API Gateway. The following article was helpful.
https://stackoverflow.com/questions/73862456/nuxt-3-in-aws-lambda-with-serverless-framework
By referring to the above, I was able to deploy as follows.
https://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.
https://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.
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.