Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cheapest way to deploy a React app using NextJS SSR on AWS? [closed]

I understand that Nextjs is a Node framework that requires server capabilities and therefore, using it for server-side rendering could not be hosted on an S3 only. However, does that mean that the only alternative is to host the entire app on an EC2 - which is significantly more expensive - or is there another mid-way solution?

like image 232
Thanh-Quy Nguyen Avatar asked Apr 25 '20 22:04

Thanh-Quy Nguyen


People also ask

Can I deploy Nextjs on AWS?

Serverless Components are plugins for the Serverless Framework that have pre-defined steps for building typical project structures. Serverless Next. js is a Serverless Component for easily deploying Next. js apps to AWS.

How do I deploy Nextjs to AWS amplify?

Adding Amplify hosting next . The Amplify Console opens and displays your deployed backend environment. Choose the Frontend environments tab, select your Git provider, then choose Connect Branch. Follow the steps in the Amplify console to choose the branch to connect, and deploy your app.

Can Nextjs be serverless?

Since Next. js 8.0, serverless mode was introduced which provides a new low level API which projects like this can use to deploy onto different cloud providers.

Does AWS amplify support next JS?

You can use AWS Amplify to deploy and host web apps that use server-side rendering (SSR). Currently, Amplify supports SSR apps created using the Next. js framework.


2 Answers

Next.js SSR + Serverless framework + AWS Lambda

For deploying your Next.js SSR App, instead of following a traditional approach of managing and running a whole AWS EC2 instance which keeps running 24x7. There is actually one more cost effective and modern approach which uses AWS lambda and Serverless framework.

Q. What is AWS lambda?
AWS Lambda lets you run code without provisioning or managing servers. You pay only for the compute time you consume.

Q. What is Serverless framework?
Serverless Framework Open Source lets you develop applications with serverless architectures and deploy using AWS Lambda, Azure Functions, Google CloudFunctions & more.

Q. What is Serverless-Next.js?
This is a Serverless component built just for deploying Next.js app. Also any of your assets in the static or public folders are uploaded to S3 and served from CloudFront automatically, so I think this is what you are exactly looking for.

Below is the architecture explaining how it serves your app to the user.

enter image description here

If you are new to serverless framework, I will suggest you to go thru a free course by Serverless community called Serverless for Frontend Developers

EDIT: 03/03/2021

@super7egazi put forward a genuine concern in the comment below. Thankfully there are few ways to keep the Lambda function warm. This is the act of sending scheduled ping events to your functions to keep them alive and idle, ready to serve requests.

You will find various methods and plugins to achieve this, if you just search "How to keep lambda functions warm?" on google.

Below are some links which I'm attaching for reference.

How to keep your lambda functions warm?

How to Minimize AWS Lambda Cold Starts

Keep your lambdas warm

like image 137
Pratik149 Avatar answered Sep 30 '22 05:09

Pratik149


AWS Next.js Terraform module

We created an Open Source Terraform module as a lower cost alternative to the Serverless framework for this use case. Instead of relying only on Lambda@Edge for all SSR operations we use Lambda@Edge only for routing (as some kind of reverse proxy) and then redirect the request internally via API Gateway to an regional Lambda.

Since we use CloudFront as a reverse proxy we can also split most of the requests for static files against _next/static/* for css, js, etc. and serve them directly by S3 without touching the Lambda@Edge proxy at all.

enter image description here

So the cost per request are different per route:

  • Requests for static assets: css, js, images

    Only costs for CloudFront and S3 (For misses from CloudFront) apply

  • Requests for HTML: Prerendered HTML-Routes or Routes that need Server-Side-Rendering (SSR)

    Costs for Cloudfront, Lambda@Edge (Proxy, metered at 1ms steps) apply.

    • Rewrite routes that serve pre-rendered HTML

      Costs for S3 apply.

    • Routes that use Server-Side-Rendering (SSR)

      Costs for HTTP API-Gateway and regional Lambda (SSR, metered in 1ms steps) apply.

The total costs are usually far below 0.50$ / month for a few thousand requests with this model, while having a fast-serving site powered by CloudFront edge caching.

Find more information on the GitHub repo: https://github.com/dealmore/terraform-aws-next-js

like image 41
ofhouse Avatar answered Sep 30 '22 07:09

ofhouse