Requirements:
AWS account and Configured EC2 instance.
Atleast One Domain.
React Js project.
I am considering that you have all the above requirements but If you haven't already please fell free to comment so that I can write article on the above requirements or you can reference this article
Setup AWS EC2 Instance
Connect to EC2 instance:
- SHH Command to connect to EC2 instance:(Linux/Mac OS)
ssh -i /path/to/private-key username@server_ip
- Example
Install Node.js and NPM
Node.js is an open-source, cross-platform JavaScript runtime environment for developing server-side scalable applications. The Node Package Manager (NPM) is an essential tool for managing libraries, dependencies, and scripts in a Node.js project. By installing Node.js and NPM on your server, you can use JavaScript as a server-side language.
- Commands for installation
sudo apt update
sudo apt install -y nodejs npm
- Verify the installation
node -v
npm -v
Install Vite
- Commands to install
npm install -g vite
- Verify the installation
vite --version
Install PM2
PM2 is ideal for managing Node.js applications in production because it minimizes downtime, optimizes resource usage, and simplifies complex tasks like monitoring and scaling. It ensures your application stays online and runs smoothly without requiring constant manual intervention.
sudo npm install -g pm2
Install Nginx
Nginx is one of the most popular web servers in the world and is responsible for hosting some of the largest and highest-traffic sites on the internet. It is a lightweight choice that can be used as either a web server or reverse proxy.
- Command to install
sudo apt install nginx -y
- Verify the nginx installation
sudo systemctl status nginx
So, all the dependencies have been installed, now we move to actual steps.
1. Enable UFW firewall
First we need to active firewall and If you are using SSH to access the system, ensure you allow SSH (port 22) before enabling UFW, to avoid being locked out:
- Commands to allow SSH port and enable UFW
sudo ufw allow 22
sudo ufw enable
- Command to check UFW status and all activated ports
sudo ufw status
2. Upload project and run using PM2
We can import the project using git commands if you are maintaining git repository or can upload the project directory to server using bash command.
a). Commands to import project from git repository:
git clone https://github-repo-link
On success, you will asked for github username and password, follow the steps.
Note: Instead of password you need to enter the generated token.
b). Upload project using scp command:
scp -i /path/to/private/key file/folder username@server_ip:/tmp
- Example:
We can upload only to /tmp directory
Now we have successfully uploaded the project in server.
First we will build the project using npm script npm run build and once the project is build we will run the build file using npm script but with the help of pm2.
Sample Package.json
{
"name": "sample-package",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^17.0.2"
your dependencies...
},
"devDependencies": {
your dependencies...
}
}
Run npm command using pm2:
pm2 start npm --name $myProject -- run $npmScript
Example
pm2 start npm --name sampleProject -- run preview
Great, now we have successfully run the project in server using pm2, we can confirm that by following command pm2 list
3. Create A record in you Domain Provider
Domain provider can be goDaddy, google domain etc
- create "A" record and save it
Type= A
Name= @ or subdomain
Value= $serverIp
TTL=$default
Sample Screenshoot
4. Enable and Configure Nginx
a). Enable Nginx:
- command to enable Ngnix
sudo systemctl enable nginx
- command to start nginx
sudo systemctl start nginx
- command to check nginx status
sudo systemctl status nginx
b). Enable default Nginx ports using UFW:
sudo ufw allow 80
sudo ufw allow 443
This will open the port 80 and 443.
By default nginx listen to ports 80 (http) and 443 (https).
Note: Also make sure to enable this ports 80 and 443 in EC2 instance security groups
- Command to verify
sudo ufw status
c). Configure Ngnix:
- Change the working directory to /etc/nginx/sites-available
cd /etc/nginx/sites-available
Create a file inside a directory same as your domain or subdomain, it is not mandatory that the file name should be same as domain or subdomain just make sure that extension is .conf
- Example
vim /etc/nginx/sites-available/example.com.conf
This is open vim editor now copy paste the given below nginx configuration
server {
listen 80;
server_name example.com www.example.com;
location / {
proxy_pass http://127.0.0.1:3000; # Replace 3000 with your PM2 app's port
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;
# Optional: Increase client request timeout
client_max_body_size 100M;
}
error_page 404 /404.html;
location = /404.html {
internal;
}
}
From the above sample you need to modify the 2 lines of code, first is server_name this will be your domain or subdomain and the 2nd line proxy_pass change the port, that is running in server which previously we have run it through pm2. For changing these lines first we need to enable vim editor write mode by typing i, once the lines are modified you need to enter esc button, now type this command :wq this will close and save the file. You can verify the changes by viewing the file using this command cat example.com.conf.
d). Enable the site configuration:
- Create a symbolic link
sudo ln -s /etc/nginx/sites-available/example.com.conf /ect/nginx/sites-enabled
- Command to test the Nginx configuration
sudo nginx -t
- Command to reload Nginx to apply the changes
sudo systemctl reload nginx
Great, We have successfully configured nginx, we will be able to access the app using domain for example http://example.com, now we shall obtain SSL certificate in order to access our app using https which is safe for security purposes.
5. Install Certbot and Obtain Free SSL Certificate
- Command to install certbot
sudo apt install certbot python3-certbot-nginx -y
- Command to obtain SSL certificate
sudo certbot --nginx -d example.com -d www.example.com
- Enable Automatic Renewal
sudo certbot renew --dry-run
- Test Nginx configuration
sudo nginx -t
- Reload, Restart and check the status of Nginx
sudo systemctl reload nginx
sudo systemctl restart nginx
sudo systemctl status nginx
Great, We have successfully deployed our app in AWS EC2 instance using custom Domain over https.
Fell free to ask any question if you have any doubts.