Deploy Vite-React Project in AWS EC2 using custom domain and free SSL Certificate.

Rose Ahmed — Wed, 01 Jan 2025 14:15:54 +0000

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

ssh -i /Users/Downloads/privatekey.pem ubuntu@2.107.215.86

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:

scp -i /Users/Download/privatekey.pem project ubuntu@2.102.23.234:/tmp

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

sudo vim /etc/nginx/sites-available/example.com.conf

This will 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 /etc/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.

DEV Community: Rose Ahmed