Deploy apps on your own virtual server (subdomains, nginx, react-vite, ec2, github-action, pm2)

6 min readDec 28, 2022

Creating and deploying yourself is a really simple step by step process and it should take around than 30 mins to 2 hr depending from person to person.

I will be recommending stuff as per personal experience and ease of use, feel free to use alternatives as per your requirements

1. Create your project (Recommendation Vite)

SKIP THIS IF YOU HAVE AN EXISTING PROJECT

I use react-vite as a starter template (they have many more depending on your need) from vitejs.dev.

Copy and clone the repository ( react-vite )
Now add some additional scripts. Focus on serve-prod and serve-dev

2. Create a virtual server (I’d recommend EC2)

Requirement
- ssh key needed to access the instance from your local terminal

CREATE INSTANCE- after creation is successful

I feel that amazon is the easiest and if you have a debit/credit card, you can own a free instance for yourself for a duration of 1 yr.

Create an AWS account.
Verify your card credential by doing a minimal transaction of 2 INR which will be refunded.
You will now land on the AWS Console page. Using the search bar go to EC2.
As you can see in the image (AWS IMAGE 1), firstly change the region nearest to you (or as per the app consumer)* base by choosing it on the top-right corner of the screen.
Click on Launch Instance (to open the create instance form).
My config -
- machine — ubuntu — 64bit — x64
- instance — t2 micro (free tier)
- key pair — proceed without a key
- network — all traffic both http and https -ON , ssh 0.0.0.0
- storage — as per your requirement
Click on Launch Instance (to actually create the form).
Right click on the instance and click on connect.
SSH setup is out of scope from this article. You could use these, and a little bit of mr google to figure it out (will add an article about ssh later in the future)
- https://at0dd.medium.com/easy-ssh-configuration-3262795e24c6
- https://medium.com/@jameshamann/save-time-using-ssh-config-d1ea7d4f90ea
Add your public key in .ssh/authorized_keys file, now you can ssh into it from your local terminal.
WE ARE STILL NOT DONE and NEED TO ASSIGN SWAP SPACE DUE TO LACK OF RAM
https://www.digitalocean.com/community/tutorials/how-to-add-swap-space-on-ubuntu-22-04
Follow this step by step guide, as it is enough and has all the details
- requirements : access to the virtual instance terminal
Install the following in the server
- nvm, node, yarn
- pm2

3. Setting up Github Actions

Use this as a reference to implement github-actions

Note : github action may have a self running service initiator

I’d recommend to use ./run function with pm2 instead, as it feels more controllable. Using the other function which was also provided by them(action installer) which enables a server in the background, made my instance stuck on reboot.

pm2 start ./run.sh --name "github-action"

4. Update the workflow file to serve content using pm2

Commad to serve content using pm2 keeping the teminal free.

$: pm2 start yarn --name "main" -- serve-prod
$: pm2 start yarn --name "main-dev" -- serve-prod

You can use prod and dev for naming as per your wishes

USE: pm2 status

USE pm2 describe <id,name>

USE pm2 logs <id,name>

Now we need to setup Nginx so that we can proxy-pass the content to the public endpoint

In lay mans term,
By default wherever you hit an address or a IP-address it actually serves the content available at port 80, default standards. We now need to setup the server so that port 80 actually refers to port 4000 (for my case).

Photo by Gaurav Dhwaj Khadka on Unsplash

5. Getting a domain before the setting up nginx (I use GoDaddy)

Edit the current type : A record and add the public ip address of the server
Add another A record which is same as the original one except the name to be something else (for a subdomain)
- I am using ahrenpradhan.com (SUBDOMAIN_1) and dev.ahrenpradhan.com (SUBDOMAIN_2)

6. THE NGINX setup

SOURCE CODE for the ____.conf file 
SUBDOMAIN : the same thing as the name suggests
  ahrenpradhan.com 
  www.ahrenpradhan.com
  dev.ahrenpradhan.com
  www.dev.ahrenpradhan.com 
PORT : the port at which the app is served
  http://127.0.0.1:4000
  http://127.0.0.1:8000
-------------\/---------------------

server {
    server_name www.<SUBDOMAIN>.com <SUBDOMAIN>.com;
    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_pass         "http://127.0.0.1:<PORT>";
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

--------------/\---------------------

Install nginx using the apt command or any alternative
Go to /etc/nginx
Comment everything in /etc/nginx/sites-enabled
Go to /etc/nginx/conf.d folder
Create the file <subdomain_1>.conf and paste the above provided sourcecode same for <subdomain_2>
Now we need to verify the changes
$: sudo nginx -t
Restart or Start nginx
$: sudo systemctl restart nginx //restart
or
$: sudo systemctl start nginx //start
Status of nginx
$: sudo systemctl status nginx

With this you will be good to go as now both your main and subdomain are ready and serving content as described in it (via HTTP not HTTPS).If you are skilled enough to get here then I think you can figure out adding more domains if required.

Important key-notes I didn’t talk about but could have included

UFW Firewall
Https and installing credentials << a good article already exists
Static content via nginx
PM2 in detail

VERY IMPORTANT
Be careful before making stuff live especially if you are using it for backend, here I am focusing on the usage on authtoken, etc.

Thanks for reading. Hit 👏 if you like what you read and be sure to follow to keep up to date with future posts.

Regards
Ahren Pradhan

THE LAZY DEVELOPER