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.
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
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).
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