Deploy MERN Stack App On AWS EC2 Using GitHub Actions

In this tutorial we're going to deploy our MERN (MongoDB, Express, React, Node.js) stack application to AWS EC2 using the power of GitHub Actions and Docker.
Please find below reference code and pipeline:
NodeJS App Code Reference: github.com/integrationninjas/...
NodeJS App Pipeline: github.com/integrationninjas/...
React Code Reference: github.com/integrationninjas/...
React App Pipeline: github.com/integrationninjas/...
Use below commands to install Docker on AWS EC2:
sudo apt-get update
sudo apt-get install docker.io -y
sudo systemctl start docker
sudo docker run hello-world
docker ps
sudo chmod 666 /var/run/docker.sock
sudo systemctl enable docker
docker --version
Search Queries:
Deploying a MERN Stack on AWS
Deploy MERN STACK App with AWS EC2
Deploy Full stack application on AWS EC2
Deploy A Full stack REACT APP on AWS EC2
Deploy MERN STACK App with AWS EC2
Continuous Deployment using GitHub Actions
Auto Deploy MERN Stack
Deploy React App to AWS EC2
Deploy NodeJS App to AWS EC2
Deploy(Host) MERN Stack Application for free
Deploying MERN App With Docker Compose
Learn to Deploy your Docker Container on EC2 in 15 Minutes
How to Deploy a MERN Stack App on AWS EC2 With SSL, NGINX, and Subdomain
How to deploy a MERN Stack Application on AWS EC2
How to build and deploy a MERN Stack Application on AWS EC2
How to build and deploy a MERN Stack Application on AWS
How to Deploy a MERN Stack application to AWS Amazon EC2
MERN Stack on AWS EC2 & Nginx to production
Host MERN App on EC2
How do I deploy a MERN stack project to AWS EC2
Easily Deploy Full Stack Node.js Apps on AWS EC2 | Step-by-Step Tutorial
MEAN and MERN stack AWS deployment Architecture - reduce cost by 90%
Hosting ReactJs Application With AWS EC2 Instance
Auto Deploy React & Node.js with Github Actions CI/CD
Hosting a Docker Container on AWS EC2 Free Tier
deploy react app on aws ec2 free
how to deploy nodejs app on aws ec2
how to deploy react app on aws ec2
Creating a Continuous Delivery Pipeline With GitHub Actions: How to Deploy To AWS EC2 Instantly!
Dockerizing React with Nginx for Production
Build and Deploy Multi-Container Apps to AWS
Containerizing an Nginx Server
Containerizing an React App
Containerizing an Node.JS App
Push images to Docker Hub
Docker Tutorial for Beginners
How to Use DockerHub
How to Push and Pull a Docker Image from Docker Hub
What is docker
What is docker
Push and Pull a Docker Image from Docker Hub
NodeJS and MongoDB Tutorial
How to Connect Node.JS with MongoDB using Mongoose
Connect to a MongoDB Database Using Node.js
Full stack development
Connect Mongodb database using Node JS with express and mongoose tutorial
Build A REST API With Node.js, Express, & MongoDB
MERN Stack CRUD Operations | Full Stack CRUD Operations | React, Node, Express & MongoDB
Getting Started with MongoDB Atlas - A Modern Database
MongoDB Atlas Setup
How to setup MongoDB Atlas database
How To Set Up A MongoDB Cluster
CI/CD pipeline using GitHub Actions
Github actions workflow
Cicd devops
Devops with github action
Complete MERN Stack Developer Roadmap For Beginners
MERN stack deployment
MERN stack app deployment on aws
mern stack tutorial
Auto Deploy React & Node.js with Github Actions CI/CD
multi stage deployment in github actions
github actions tutorial
Mern stack project
#github #githubactions #githubtutorial #aws #awsec2 #mernstack #deployment #cicd #devops #devopstutorial #mongodb #expressjs #reactjs #nodejs #expressjs

[@darshankhatri9625]

Was looking for this , Thanks for explaining thoroughly 👍.

[@IntegrationNinjas]

Happy to help

[@kareemlateefyomi8690]

Great tutorial man. Your videos are great . I hope people get to know this channel as I have 👍

[@IntegrationNinjas]

Thanks for your kind words. It will motivate me to come up with more valuable content.

[@shwetabhat9981]

Amazing tutorial sir . Thank you for it ... deployment in MERN is pretty less talked about on KZbin channels atleast . Im glad I bumbed into this . Keep growing 🎉

[@IntegrationNinjas]

Thanks for exploring out this video and I am glad to hear that it was helpful.

[@frostybitebull4586]

Very helpful video

[@IntegrationNinjas]

Glad it was helpful!

[@easwarapriyan9763]

Great videos 🎉

[@IntegrationNinjas]

Glad you like them!

[@garvitsharma9505]

Great one 👍

[@IntegrationNinjas]

Thanks for the visit

[@ShivamSingh-hp2id]

Hello can you please suggest, how can i setup this with docker-compose, as we dont have docker-compose file on server, i need to create a file using workflow job and then i'm starting docker-compose up. Is there any batter way, please suggest.

[@VipinRaj_dev]

Thanks a lot sir, i have been searching for this video for a long time. It is an amazing tutorial in a simple and understandable manner. It is actually covering all the topics . i have completed this tutorial without having any unexpected errors. keep going sir

[@IntegrationNinjas]

You're very welcome! I'm thrilled to hear that you found the tutorial helpful and that you were able to complete it without any unexpected errors. Your positive feedback is truly appreciated. If you have any more questions or if there's anything else you'd like to learn, feel free to let me know. Keep coding, and thanks for your support!

[@user-ib1ye4uj6c]

Great Brother . 💕💕👌👌

[@IntegrationNinjas]

Thank you so much 😀

[@jahongirbektemirov6516]

Wonderdul content, thanks a lot. Try to deploy only react app with the API that gives you backend

[@IntegrationNinjas]

Thanks. I will try that sure.

[@hungnguyenmanh5333]

Hello. Thank you for helping me through this video. But I want to add domain and ssl Nginx, ReactJS when setting up via Docker. Sorry that my English is not good Looking forward to hearing from you and have a nice day

[@IntegrationNinjas]

Thank you for your comment! I'm glad the video helped you. For SSL: Once you have your domain, you'll need to configure the DNS records to point to your EC2 instance's public IP address. You can do this through your domain registrar's control panel. You can obtain a free SSL certificate from Amazon Certificate Manager (ACM). This service allows you to generate and manage SSL/TLS certificates for your AWS resources. With Docker, you'll likely use a separate container for Nginx as a reverse proxy in front of your Node.js container. I will try to create a full setup video soon.

[@hungnguyenmanh5333]

@@IntegrationNinjas Thank you so much

[@rahulray736]

Can you provide more video

[@TheArunKushwahaa]

Hey man, thanks for this valuable information, Can you make a video on AWS Serverless Lamda about how to use the lambda, and one more thing needed like how to integrate domain name with aws, and how to add https in the URL, I really need this

[@IntegrationNinjas]

Thanks. You can refer below video for AWS Lambda: Create & Deploy AWS Lambda Function In Java Using GitHub Actions kzbin.info/www/bejne/Z52vla2JgLt7aa8 Domain part probably I will cover in some other video.

[@rahulray736]

I'm waiting this video

[@rahulray736]

Can you provide more video

[@IntegrationNinjas]

Please explore this and share your feedback that will be helpful.

[@learner2998]

Great one, but when we containerize our server, we have included our .env file it has the mognodb url . so we should include it or not ? ,

[@IntegrationNinjas]

It is not required to add since we have already set these values in docker file as environment variables.

[@navnathsangalephotography4968]

i have followed a tutorial but thing is that when i go in github actions it is not showing 1 worlkflow created but i didnt see its running or not

[@IntegrationNinjas]

Is the workflow created or not? I couldn't understand what you said. Try below things if workflow not triggered: 1. Double-check if the workflow YAML file is located in the .github/workflows directory within your repository. 2. Verify the workflow trigger in the YAML file. Some triggers, like push or workflow_dispatch, require the workflow file to be merged into the default branch (usually main or master) before they appear in the Actions tab. 3. Make sure the workflow YAML file has no syntax errors. Errors can prevent the workflow from being displayed. You can use a YAML validator online to check the syntax.

[@navnathsangalephotography4968]

Ok I will check it and let you know sir

[@navnathsangalephotography4968]

Hii sir can you please share your number I have tried lots of time but actions are not working I have followed the video precisely and 9-10 times

[@IntegrationNinjas]

Please ping the error message you are getting while running. Or message the error screenshots on Instagram account : integrationninjas

[@navnathsangalephotography4968]

@@IntegrationNinjas ok sir

[@ghulamdastgeer6587]

Sir can you made a video for PERN stack deployment like this video

[@IntegrationNinjas]

Sure, will try to create it in next videos.

[@VipinRaj_dev]

sir can you please make a video to deploy a nextjs (above 13.4 , app router) , typescript , node express , mongodb project with docker and github actions🙏

[@IntegrationNinjas]

Sure, I will try that out and will upload soon.

[@anupamagarwal6569]

I have .env file in node project and there are approx 15 key value pair. how i can manage that with yml file mentioned in video?

[@IntegrationNinjas]

You can simply add more --build-arg flags to your docker build command, each specifying a different argument name and value. Here's how it would look with two additional arguments: docker build -t integrationninjas/reactjs-app \ --build-arg REACT_APP_NODE_ENV='production' \ --build-arg REACT_APP_SERVER_BASE_URL='${{ secrets.REACT_APP_SERVER_BASE_URL }}' \ --build-arg DB_HOST='your_database_host' \ --build-arg DB_USERNAME='your_database_username' Accessing Arguments in Dockerfile: In your Dockerfile, use the ARG instruction to define environment variables based on the arguments passed during build: Dockerfile: ARG REACT_APP_NODE_ENV ARG REACT_APP_SERVER_BASE_URL ARG DB_HOST ARG DB_USERNAME # ... rest of your Dockerfile instructions ENV NODE_ENV $REACT_APP_NODE_ENV # Optional: Set additional environment variables Use code with caution. Accessing Secrets: Use the same syntax ({{ secrets.SECRET_NAME }}) within your --build-arg value to access secrets stored in your GitHub repository.

[@IntegrationNinjas]

You can also use AWS secrets manager as well and can use accordingly instead of using .env.

[@rahulray736]

Can you make a video PERN Stack with Docker and Without Docker

[@IntegrationNinjas]

I will try in further videos.

[@bluemaroon10]

Hello brother, I'm facing an issue, as I'm showing github secrets you have added aws secret keys but not mention in video. Can you please help me to resolve issue

[@IntegrationNinjas]

AWS secrets has been added for other workflow, not for this one. In this video you just need to store docker username, password and mongodb password.

[@lost_and_finding]

Bro i have a similar kind of project but i am using postgressSql and prisma as orm can i follow the exact steps?

[@IntegrationNinjas]

Yes only thing you need to make sure your DB connection is established properly with postgres database server.

[@lost_and_finding]

@@IntegrationNinjas i am having problem in that actually i sm new in all these deployment. I tried to initiate the postgres and prisma commands in the yml file but it's not working and giving error. i am not sure how to proceed do i host the database separately or in the same ec2 instance where my backend or frontend will be hosted. can you please help me if you are not busy ?

[@teerthraj7311]

I followed whole tutorial and deployed mern stack application I am getting ngnix error whenever i go to particular page and reload that page i go to website ->it runs fine i click on particular page-> it loads fine then if i reload that page page or i go that page directly that it shows nginix 404 not found error on particular page Any solution for that ???

[@IntegrationNinjas]

I am not able to get the exact error. Can you describe more based on this example if you are not able to see the same page. Few suggestions: Please check your nginx configuration with docker. If possible share here as well.

[@user-fo7kr6cl3c]

@@IntegrationNinjas sir plz if you have time can i get in contact with you it will hardly take 10min

[@lost_and_finding]

how to integrate nginx with backend deployment?

[@IntegrationNinjas]

We are using nginx in our react docker file.

[@user-fo7kr6cl3c]

yes sir, please help us to solve this error I followed whole tutorial and deployed mern stack application I am getting ngnix error whenever i go to particular page and reload that page i go to website ->it runs fine i click on particular page-> it loads fine then if i reload that page page or i go that page directly that it shows nginix 404 not found error on particular page Any solution for that ???

[@IntegrationNinjas]

I am not able to get the exact error. Can you describe more based on this example if you are not able to see the same page. Few suggestions: Please check your nginx configuration with docker. If possible share here as well.

[@SaiHarsha_shorts]

Same error bro In details I should mention how connect u bro

[@johnmuchiriheytech]

how do you set up SSL certificate

[@IntegrationNinjas]

If you have the certificate files (certificate, private key, and any intermediate certificates), you'll need to configure your web server on the EC2 instance to use them. The specific steps for this will depend on the web server software you're using (e.g., Apache, Nginx).

[@canocan5050]

I would like to use this project for my thesis. Is it fine with you, when I use this project for study purposes?

[@IntegrationNinjas]

Definitely, feel free to fork the repository.

[@canocan5050]

Thank you very much 🙏

[@canocan5050]

Is it easy to add monitoring and notification to this project so that you have a whole cicd pipeline in terms of DevOps? ​@@IntegrationNinjas​

[@canocan5050]

Is it easy to add monitoring and notification to this project to get a full DevOps cycle?@@IntegrationNinjas

[@IntegrationNinjas]

you can use AWS Cloudwatch to monitor logs, you can integrate notifications with GitHub Actions as well.

[@prachideokate6309]

What if I have frontend and backend in same github repository?

[@IntegrationNinjas]

you can change the directory to frontend/backend and can build the project.

[@prachideokate6309]

@@IntegrationNinjas Thanks but can you send me any example or can you make any video

[@IntegrationNinjas]

@@prachideokate6309 sure, I will try to create such project and create a video.

[@prachideokate6309]

@@IntegrationNinjas Can we connect? Can I get your email id or anything?

[@shreyans7124]

@@IntegrationNinjasWhat does this mean? Do you ask to push frontend and backend as separate repos?

[@nikhilsolanki589]

my app is successfully deployed but when i am running it on browser it says, This site can’t be reached

[@chandanchyawanprashwala]

Inbound rules, firewall settings

[@IntegrationNinjas]

Thanks@@chandanchyawanprashwala for the information. Nikhil, please check the inbound rules make sure you have opened the port.

[@pkm1747]

but i want hide port but how please explain

[@IntegrationNinjas]

Which port you want to hide?

[@pkm1747]

@@IntegrationNinjas 5173 and if 8000 also then it more better

[@rahulray736]

Without Docker possible

[@IntegrationNinjas]

This is the easiest way to do with cicd. Otherwise you will need to setup few things like env file related configuration and nginx on server side. It can be achieved and there are multiple references on youtube for that so I haven’t went with that approach.

[@rahulray736]

@@IntegrationNinjas ohh Thnx

[@FutureBeets]

Very helpful video

[@IntegrationNinjas]

Glad to hear that