Deploy MERN app with AWS S3, Lambda, CloudFront, and Route 53.

Here, I am going to showcase a basic mern app deployment with Aws and its services. The purpose to write this blog is to enhance my understanding and to help others who are going to come on this tech stack. so, let’s begin

Prerequisites.

To Proceed further, I assume you have a basic react and a node-express app already install at your side as this blog particularly focuses on the deployment.

What we’re gonna do? (all in Free tier)🤔

1. ) First thing first, we move our node-express app to AWS Lambda.
2. ) After, we gonna move the react app to S3 Bucket for hosting.
3. ) Then, we will connect the s3 bucket with CloudFront. (Part — 2)
4. ) Configure Custom domain and SSL with Route 53 (Part — 2)

Steps 1:

Talking a bit of Lambda, If you are here then I think you have heard the term called Serverless. Before Serverless, there are other two i.e., IaaS and PasS type deployment, you can opt for these two for deployment. But what makes lambda one step ahead as it’s a Serverless offering from AWS. If you don’t know much about Serverless you can check here. So, let’s move our code to Lambda.

In order to move lambda, you have to log in to your AWS Account and create a Lambda function, in my case I named my function as CURD_Function and runtime as Nodejs version 14.x and rest as it.

After, creation of the lambda function you land up inside your newly created function, from here the actual journey begins. Next, we have to simply copy your existing node-express code from vs code(my case) and paste the following into the lambda(not a good practice for the project with 100's .js files), for that you can go with Serverless Framework(my prefer) as IAC. Now moving my Backend into lambda.

Here, what I did basically, replacing my existing lambda code with my code. Not Interested to explain the code. But here what I did is requiring all the dependencies at the top, then connecting to a DB listed in my config.env file with schema in the Model.js file. Here you can see that there is no node_modules folder. Then how my lambda will get those required modules, for that here comes Lambda Layers.

What to do with Lambda layers, It basically points to the lambda function to take all those required dependencies/resources from here. You could also paste the node_modules on the right side of your terminal, but not a good practice, also in order to view the code in the lambda console the code size must not exceed 3MB/function. so, just simply create a folder called nodejs(name must be same) on your machine inside the project folder and ctrl + c then ctrl + v on nodejs folder after converting the nodejs into a zip file and upload in AWS Lambda layers. like in my case I named as CURD_Layer,

In order to use, inside your lambda function in the code tab, navigate below to layers and attach this layer, like

At this point, 70% work of backend setup is done. so what next.

To use your Express APIs, in react app we have to connect the lambda with AWS API Gateway, But before proceeding makes sure you have installed a dependency called serverless-http module, what it does basically it’s binds your express app into a HTTP module so that API Gateway can work with your express APIs.

how to connect you can watch it here. In my case, I’ve created an API Gateway named test-curd-app-API.

Here, I have created the same path and method as defined in my Lambda function. Now open your postman and copy and paste the API gateway endpoint and you can test all other APIs you defined.

Hopefully, At this point in time, we have completed our Backend Task. Don’t worry if you’re familiar with this little bit it hardly takes 1–2 min to set up this type of basic application.

Step 2:

Moving to React and S3 Bucket as already said, I have a react app listening on default port 3000, and it's connected with the same backend which we deployed in lambda just, but currently setup up on my machine listening on port 4000. so just replace the local endpoint with your API Gateway endpoint, and all you can see react app running on localhost:3000.

Moving this react app in S3 Bucket. S3 stands for simple storage service used mainly for storing all types of data on the Cloud. S3 can now host a static web application that enriches s3. so, before we proceed you must build the react app with the scripts you defined in package.json my case, it’s yarn build .

Now, Move to the AWS S3 console and create a S3 bucket and upload the build folder in the root of the bucket.

Remember to remove Block all public access so, that your objects in your bucket can be publicly available and also give the public access at your bucket level, sample JSON denotes public access at the bucket level.

{
“Version”: “2012–10–17”,
“Id”: “Policy1623598995444”,
“Statement”: [
{
“Sid”: “Stmt1623592244621”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::replace_with_bucket_name/*”
}
]
}

After the above setup, you have to configure or treat the bucket as web hosting, for that Go to the Properties tab, down below you have an option called Static Web Hosting, Enable it, like

Next, Now you can find a link to your app, click on the link, your react app is live and can access it from anywhere 😀.

Hurry! 👏

Before we conclude, let me know if this blog helps you somewhat… if yes then like the post, if not comment out what I missing.

Also, For now, this setup is good but not an optimized solution for real production deployment. because you can see the site is not secure yet. we’ll configure all those in our next part of this blog, I will update that soon once done.

Conclusion:

Lastly, but not least till now we have successfully completed the deployment of our MERN app with AWS and Its services. Cheers! 🥂 for now.