Nuxt 3 Deployment to an AWS EC2

Nuxt 3 supports various deployment solutions with the help of its server engine Nitro(https://github.com/unjs/nitro). This blog is about hosting a nuxt 3 Server-Side Rendering app to an AWS ec2 instance. In this example, we are going to use AWS EC2 created with an Amazon Linux AMI. First lets explore various architecture patterns available within AWS ecosystem for hosting the nuxtjs app on EC2 servers.

AWS EC2 Based Architectures for Hosting NuxtJs Web App

There are various options available for hosting a nuxt web app on an ec2 server. Depending on the resiliency requirement of the application, there are multiple architecture pattern that can be followed in AWS. We are going to look into two common architecture patterns for hosting a nuxtjs app and also various aws services associated with these architectures.

Hosting Nuxt App on AWS Auto Scaling EC2 Group and Application Load Balancer Architecture

Below is the high level architecture diagram for this architecture. We are leveraging following aws services,

• Route 53
• CloudFront
• Application Load Balancer(ALB)
• Auto Scaling EC2 Group

In this nuxt applicaition is hosted on the aws auto scaling group of EC2 which ensures that any unhealthy servers are automatically deleted and new servers are created. With the help of aws application load balancer(ALB), the website traffic load is automatically balanced between healthy ec2 servers. This architecture is optimal incase we want to ensure zero down time for the application.

We also leverage cloudfront which is the content delivery network service in AWS. The cloudfront ensures that the static contents like js, css and images are caches at various edge network to ensure a performant website. All the dynamic content will be routed to the EC2 by the cloud front through ALB. Eventhough this is the best solution for hosting the nuxt app, from the cost side, this will be more expensive compared to the second solution since we are using ALB.

Hosting Nuxtjs Web app on EC2 using elastic ip

The main difference between this solution and the first solution one is on leaveraging the ALB service. Here we are not using the ALB, instead we host the web app on a single EC2 server and then assign a elastic IP address to this server. This ip address is then used in the cloudfront which will forward the traffic to the EC2 server. This architecture leverage following services,

• Route 53
• CloudFront
• EC2 Instance with Elastic IP

Nuxt Configuration for the AWS Ec2 Deployment

Lets walkthrough on the configuration that is required for the AWS Lambda deployment for nuxt 3 app.

Default preset on nuxt.config

In the nuxt config, there is a new property called nitro where we can set the preset. Since we are hosting this app in a server ,we can go with default preset - node-server.

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})