DEV Community

Rose Ahmed
Rose Ahmed

Posted on

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

#aws #ssl #ec2 #react

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
Enter fullscreen mode Exit fullscreen mode
  • Example 
ssh -i /Users/Downloads/privatekey.pem ubuntu@2.107.215.86
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Verify the installation 
node -v
npm -v
Enter fullscreen mode Exit fullscreen mode

Install Vite

  • Commands to install 
npm install -g vite
Enter fullscreen mode Exit fullscreen mode
  • Verify the installation 
vite --version
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Verify the nginx installation 
sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Command to check UFW status and all activated ports 
sudo ufw status
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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...
  }
}
Enter fullscreen mode Exit fullscreen mode

Run npm command using pm2:

pm2 start npm --name $myProject -- run $npmScript

Example

pm2 start npm --name sampleProject -- run preview
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Sample Screenshoot

Create A Record

4. Enable and Configure Nginx

a). Enable Nginx:

  • command to enable Ngnix 
sudo systemctl enable nginx
Enter fullscreen mode Exit fullscreen mode
  • command to start nginx 
sudo systemctl start nginx
Enter fullscreen mode Exit fullscreen mode
  • command to check nginx status 
sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

b). Enable default Nginx ports using UFW:

sudo ufw allow 80
sudo ufw allow 443
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

c). Configure Ngnix:

  • Change the working directory to /etc/nginx/sites-available 
cd /etc/nginx/sites-available
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Command to test the Nginx configuration 
sudo nginx -t
Enter fullscreen mode Exit fullscreen mode
  • Command to reload Nginx to apply the changes 
sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Command to obtain SSL certificate 
sudo certbot --nginx -d example.com -d www.example.com
Enter fullscreen mode Exit fullscreen mode
  • Enable Automatic Renewal 
sudo certbot renew --dry-run
Enter fullscreen mode Exit fullscreen mode
  • Test Nginx configuration 
sudo nginx -t
Enter fullscreen mode Exit fullscreen mode
  • Reload, Restart and check the status of Nginx 
sudo systemctl reload nginx
sudo systemctl restart nginx
sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
skillboosttrainer profile image
SkillBoostTrainer •

Great guide for deploying a Vite-React project on AWS EC2! The step-by-step approach, from setting up dependencies to configuring Nginx and SSL, makes it accessible for both beginners and experienced developers. Thanks for sharing such a comprehensive resource!

Collapse
 
roseahmed profile image
Rose Ahmed •

Thank you @skillboosttrainer

Read next

ianbrumby profile image

Handling Paginated Results Seamlessly with AWS Step Functions

Ian -

vladyusha profile image

What’s New in React 19? A Quick Guide with Code Examples

Vladyusha -

johanneskonings profile image

Run vs code on a private AWS ec2 instance without ssh (with AWS CDK examples)

Johannes Konings -

carrie_luo1 profile image

How to Update SSL Certificate in SafeLine WAF through a File

Carrie -