Auto Deploy React App using Github Actions on VPS Server

In this blog, I have explained how to auto deploy React app using Github Actions on Virtual Private server. A VPS (Virtual Private Server) is a virtualized server that acts like a dedicated server but runs within a shared hosting environment.

It provides users with dedicated resources like CPU, RAM, and storage, offering more control and performance compared to shared hosting. I have explained the detailed step from writing the yaml file to generating the ssh key on VPS.

Steps to Auto Deploy React App using Github Actions

Below are the setps to auto deploy React App using Github Actions.

Install Required Dependencies on VPS

Login to your VPS server in local terminal and run below commands to update the package. and install nginx, nodejs and git library.

sudo apt update && sudo apt upgrade -y
sudo apt install -y git nginx nodejs npm

Set Up GitHub SSH Access to VPS

Generate an SSH key (on VPS):

ssh-keygen -t rsa -b 4096 -C "your-email@example.com"

Copy the public key:

cat ~/.ssh/id_rsa.pub

Add this public key to GitHub → Settings → SSH and GPG keys.
Add the private key as a GitHub Secret:

• Go to GitHub Repo → Settings → Secrets and variables → Actions.

• • Name: VPS_SSH_PRIVATE_KEY

  • Value: (Copy from ~/.ssh/id_rsa)Add a new Secret:

Configure Nginx for React App

Open Nginx config file:
sudo nano /etc/nginx/sites-available/react-app

server {
listen 80;
server_name yourdomain.com;

root /var/www/react-app/build;
index index.html;

location / {
try_files $uri /index.html;
}

location /api/ {
proxy_pass http://localhost:5000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

Save and exit (CTRL + X, then Y, then ENTER).

Enable the configuration:

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
sudo systemctl restart nginx

Create GitHub Actions Workflow (.github/workflows/deploy.yml)

Inside your React project, create the directory .github/workflows/ and add a file deploy.yml:

name: Deploy React App

on:
push:
branches:
- main # Change to your deployment branch

jobs:
deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v3

- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 18

- name: Install dependencies
run: npm install

- name: Build React App
run: npm run build

- name: Deploy to VPS
uses: appleboy/ssh-action@v0.1.7
with:
host: your-vps-ip
username: root
key: ${{ secrets.VPS_SSH_PRIVATE_KEY }}
script: |
cd /var/www/react-app
git pull origin main
npm install
npm run build
sudo systemctl restart nginx

Done! Now every push to GitHub will auto-deploy your React app on VPS!