How to deploy nuxt frontend with express backend on AWS?

Question

• I have a Nuxt v2 SSR application as the frontend running on port 3000
• I have an express API as the backend running on port 8000
• I have a python script that loads data from external APIs and needs to run continuously
• Currently all of them are separate projects with their own package.json and what not
• How do I deploy this to AWS?
• The only thing I have figured out so far is that I may have to deploy express API as an Elastic Beanstalk application.
• Should I have a separate docker-compose file for each because they are separate projects currently or should I merge them into one project with a single docker-compose file
• I saw similar questions asked about React, could really appreciate some direction here in Nuxt

None of these similar questions are based on Nuxt

How to deploy separated frontend and backend?

How to deploy a React + NodeJS Express application to AWS?

How to deploy backend and frontend projects if they are separate?

Answer 1

There are a couple of approaches depending on your workload and budget. Let's cover what the options are and which ones apply to the work at hand.

Serverless Approach with Server-side rendering (SSR)

Tutorial

By creating an API Gateway route that invokes NuxtRenderer in a Lambda. The resulting generated HTML/JS/CSS would be pushed to S3 bucket. The S3 bucket acts as a Cloudfront origin. Use the CDN to cache the least updated items and use the API call to update the cache when needed. This is the cheapest way to deploy, but if you don't have traffic some customers may experience brief lag when cache updates hit. Calculator

Serverless Approach via static generation

This is the easiest way to get going. All the routes that do not have dynamic template generation can simply live in an S3 bucket. The simplest approach is to run nuxt generate and then upload the resulting contents of dist to the bucket. No node backend here, which is not the requirement in the question but its worth mentioning.

Well documented on NuxtJS.org and free tier.

Serverless w/ Elastic Beanstalk

IMO this approach is unnecessary and slightly dated for the offering AWS provides in 2022. It still works of course, but the cost to benefits aren't attractive.

To do this you need to use the eb command line tool and set NPM_CONFIG_UNSAFE_PERM=true. AFAIK there is nothing else special that needs to happen for eb to know what to do from there. Calculator

Server-ish Approach(es)

Another alternative is to use Lightsail and NodeJS server. Lightsail offers low (but not lower than serverless) cost to a full time NodeJS server. In this case you would want to clone your project to the server then setup systemd script to keep nodejs running.

Yet another way to do this and have some scalability is to use ECS and Docker. In this case you would create a Dockerfile that builds the containers, executes npm start, and exposes the port Nuxt runs on to the host. This example shows how to run it using Fargate, which is essentially a serverless version of EC2 machine. Calculator

Answer 2

There are some ways for you to deploy your stack in AWS. I can give you some options, but you're best shot if you want to save some costs is by using Lambda Functions as your backend, S3 for your front-end and a batch Lambda job for your python script.

• For your backend - https://github.com/vendia/serverless-express
• For your nuxt frontend - https://nuxtjs.org/deployments/amazon-web-services
• For your python job - https://docs.aws.amazon.com/AmazonCloudWatch/latest/events/RunLambdaSchedule.html

It's not way too simple to execute all of those, but with the following links you'll probably have an idea of how you may implement your solution.