Day 30: Deploying Fullstack react application on AWS EC2

🚀 Introduction

In this blog we'll explore the process of deploying a React app on Amazon Web Services (AWS) Elastic Compute Cloud (EC2). Whether you're a seasoned developer or just starting out. Join us as we demystify the deployment process, guiding you through setting up and optimizing your EC2 instance for a seamless React app experience. Let's dive in and elevate your development game!

🔸Launch AWS EC2 instance

First, we will launch an EC2 instance. To understand the process thoroughly, refer to the image provided below. 👇

Create a new key pair, since I already had one. If you don't have a key pair, go ahead and generate one.

Click it on and you'll find your instance there.

After clicking on it, you will see something like this. Select the instance you created and run it.

After that open an SSH client & locate your private key file that you created and downloaded. Open your terminal, and run the highlighted command of your instance.

Now you have successfully setup SSH on your terminal

🔸Installing Nginx

Now we will install nginx, while not mandatory, using Nginx when deploying a React app on EC2 is common. Nginx excels at serving static files and acts as a reverse proxy, directing requests to the React app. It's handy for load balancing, SSL termination, and overall production optimization. However, if your setup is simpler and doesn't require these features, you can deploy your React app without Nginx. The choice depends on your specific needs and the complexity of your deployment.

sudo apt install nginx

nginx -v

🔸Installing Nodejs

When deploying a Node.js app on an instance, you need to download Node.js to ensure that the server can interpret and run your Node.js application. By installing Node.js on your instance, you provide the platform with the capability to execute and manage your Node.js app, allowing it to handle incoming requests and serve your application to users.

sudo apt install nodejs -y

node -v

🔸Installing nodejs npm

Installing Node.js and npm (Node Package Manager) is essential for deploying Node.js applications on an instance. Node.js is the runtime that executes JavaScript on the server, while npm is the package manager for managing project dependencies. That's why we need to install nodejs npm

sudo apt install nodejs npm

npm -v

🔸Installing pm2

It provides features like automatic restarts, process management, and load balancing, ensuring application reliability and availability. PM2's monitoring tools and log management simplify deployment and maintenance in production environments.

sudo npm install pm2@latest -g

🔸Clone github repository

git clone <url>

After cloning the repository, navigate to the "client" folder and run npm install.

Refer to the image above 👆 for a clear understanding and follow the steps depicted in the photo accordingly.👇

Now you will ask if I have already run npm install on the instance, why is it necessary to run npm install again in both the client and server directories after cloning the repository?

When you clone a repository that contains both client-side and server-side code, running npm install in each respective folder (client and server) is necessary. This is because the npm install command installs project-specific dependencies, and each folder may have its own set of dependencies listed in the package.json file. Cloning the repository only brings in the code, not the installed dependencies. Therefore, running npm install in both the client and server folders ensures that all required dependencies are installed for both the frontend and backend components of your application.

After that, navigate back by using cd .., and do same thing in "server" folder, run npm install & install npm again.

#Check the npm version by typing command:
npm -v

🔸Start application

Now, do everything within the "server" folder without exiting. Refer to the photos for a clear understanding. 👇

pm2 start app.js --name <your_app_name>

🔸Now do PM2 Logs

pm2 logs is essential for monitoring real-time logs of a Node.js application managed by PM2. It helps identify issues, debug errors, and ensures the application's stability and performance in a production environment.

pm2 logs 0

If you encounter any errors, type the following command to resolve them.

npm i express

Once you've resolved the error, restart PM2 by typing the command pm2 restart, then check again is there any errors remaining using the command pm2 logs 0.

🔸Edit nginx default site configuration

Use sudo vim /etc/nginx/sites-available/default to edit the Nginx default site configuration, enabling you to make essential adjustments for proper routing and handling of incoming requests when deploying web applications.

sudo vim /etc/nginx/sites-available/default

After opening the file, remove everything, and then copy-paste the provided commands exactly as they are.

server {
    listen 80 default_server;
    listen [::]:80 default_server;


#root /var/www/html;

# Add index.php to the list if you are using PHP
#index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        proxy_pass http://localhost:5001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection ‘upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
}

After that type sudo nginx -t it is used to test Nginx configuration for syntax errors and potential issues before applying changes. It ensures the configuration is error-free and provides a safe way to check for correctness without impacting the live server.

After typing sudo nginx -t type sudo service nginx restart it is used to restart the Nginx web server, applying any recent configuration changes without causing downtime.

🔸Edit Inbound rule in SG

To edit inbound rule follow the steps in the photos provided below. 👇

Save rules

Now your application is ready to run copy your instance public IP address and paste it on Google or browser whatever you use and use (:) colon after pasting IP address and type port number. Ex- 39.637.378.0:3000