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

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.

Photo by Tim Mossholder on Unsplash

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.

1. Copy and clone the repository ( react-vite )
2. 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

AWS EC2 CONSOLE PAGE

CREATE INSTANCE PAGE

CREATE INSTANCE — TYPE

CREATE INSTANCE — key pair

CREATE INSTANCE — network section

CREATE INSTANCE — storage

CREATE INSTANCE- after creation is successful

AWS EC2 INSTANCE PAGE

AWS EC2 INSTANCE CONNECT PAGE

AW2 online INSTANCE CONNECT TERMINAL

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.

1. Create an AWS account.
2. Verify your card credential by doing a minimal transaction of 2 INR which will be refunded.
3. You will now land on the AWS Console page. Using the search bar go to EC2.
4. 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.
5. Click on Launch Instance (to open the create instance form).
6. 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
7. Click on Launch Instance (to actually create the form).
8. Right click on the instance and click on connect.
9. 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
10. Add your public key in .ssh/authorized_keys file, now you can ssh into it from your local terminal.
11. 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
12. 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)

1. Edit the current type : A record and add the public ip address of the server
2. 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;
    }
}

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

1. Install nginx using the apt command or any alternative
2. Go to /etc/nginx
3. Comment everything in /etc/nginx/sites-enabled
4. Go to /etc/nginx/conf.d folder
5. Create the file <subdomain_1>.conf and paste the above provided sourcecode same for <subdomain_2>
6. Now we need to verify the changes
   $: sudo nginx -t
7. Restart or Start nginx
   $: sudo systemctl restart nginx //restart
   or
   $: sudo systemctl start nginx //start
8. 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.

Photo by Darius Bashar on Unsplash

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