Deploy React Application on AWS EC2 Ubuntu Server With Nginx, SSL And Domain Setup

https://youtube.com/@codewithmuh?sub_confirmation=1

Setting up a web application on an AWS EC2 instance involves several steps, from launching the server to configuring Nginx to serve your application. In this guide, we’ll walk through each step to deploy a ReactJS application on an AWS EC2 Ubuntu server.

Table of Contents:

1. Launching an AWS EC2 Ubuntu Server
2. Connecting to the AWS EC2 Instance
3. Installing Node.js, NPM, and Nginx
4. Cloning the ReactJS App to EC2
5. Installing Required Dependencies
6. Creating a Production Build
7. Configuring Nginx
8. Starting the Application
9. Domain and SSL setup
10. Conclusion

Complete Youtube Video Tutorial:

Step 1: Launch an AWS EC2 Ubuntu Server

• Log in to the AWS Management Console.
• Navigate to the EC2 Dashboard.
• Click on “Launch Instance” and choose an Amazon Machine Image (AMI) with your preferred OS.

Step 2: Connecting to the EC2 Instance

• Use your preferred SSH terminal to connect to the EC2 instance.
• For example, if you’re on a Mac, you can use the Terminal app.

Step 3:Install Node, NPM, and Nginx

• Update the package manager:

sudo apt-get update -y

• Install node version 20

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

clea apt install -y nodejs

• Install npm

sudo apt install npm -y

• Install the Nginx web server:

sudo apt install nginx -y

Step 4: Cloning ReactJS App to EC2

For Public Repository:

git clone <YOUR-GIT-Repo>

For Private Repository:

git clone <YOUR-GIT-Repo>

It will ask you for your GitHub username:

Then Password. You can create a password

Settings-> Developer Settings -> Token>

save the token somewhere, and use it as a password whenever needed.

Step 5: Install all the required dependencies

• Install dependencies for your React project:

cd <project-folder>
npm install

Step 6: Create Production Build

• Build the React app:

npm run build

• Create a directory for react

sudo mkdir -p /var/www/vhosts/frontend/

• Copy the “build” folder to the “/var/www/vhosts/frontend” directory so that Nginx can read from this folder.

sudo cp -R build/ /var/www/vhosts/frontend/

Step 7: Create Nginx File

with this command, you can check if already a default nginx file exists. You have to remove it.

cd /etc/nginx/sites-enabled/

sudo rm -rf default

Create a configuration file for Nginx using the following command

sudo vim /etc/nginx/sites-available/<nginx-file-name>

Paste the below contents inside the file created

server {
    listen 80 default_server;
    server_name _;

    location / {
        autoindex on;
        root /var/www/vhosts/frontend/build;  # Path frontend build
        try_files $uri /index.html;
    }
}

Activate the configuration using the following command:

sudo ln -s /etc/nginx/sites-available/<nginx-file-name> /etc/nginx/sites-enabled/

Run this command to load a static file

$ sudo gpasswd -a www-data <username>

Step 8: Start the Application

Restart Nginx and allow the changes to take place.

sudo systemctl restart nginx
sudo service nginx restart

Additionally in case of errors

To check error logs

$ sudo tail -f /var/log/nginx/error.log

To check if nginx is working fine

$ sudo systemctl status nginx

Step 9: Domain and SSL setup

Domain Setup

First, you have to Public IP address or ec2 instance as An R3cord of your domain, it can be on any domain provider like GoDaddy. You can also watch the video.

SSL Setup

sudo apt-get install certbot python3-certbot-nginx

sudo certbot --nginx -d <domain-name>
sudo systemctl reload nginx

Step 10: Conclusion

Deploying a ReactJS application on an AWS EC2 instance requires careful configuration and setup. By following these steps, you can successfully launch your application and serve it using Nginx, ensuring a seamless user experience.