Deploy Your JavaScript Framework on Apache VPS: React, Vue, Next.js & Nuxt.js

How to Point Domain and Host ReactJS, VueJS, NextJS, and NuxtJS Projects Using GitHub on Apache Web Server VPS

Navigate to Manage DNS
Add the following records:
- Type: A
  Host/Name: @
  Value: Your Remote Server IP
- Type: A
  Host/Name: www
  Value: Your Remote Server IP
- Type: AAAA
  Host/Name: @
  Value: Your Remote Server IPv6
- Type: AAAA
  Host/Name: www
  Value: Your Remote Server IPv6

Open Project on VS Code

Add a .gitignore file.
Create a .env.example file (if needed).
Push your project to your GitHub account as a private repository.

Access Remote Server via SSH

ssh -p PORT USERNAME@HOSTIP
# Example:
ssh -p 22 raj@216.32.44.12

Note: Run the following commands on your remote server (Linux machine or VPS), not on your local Windows machine.

Verify that Required Software is Installed

apache2 -v
node -v
npm -v
git --version

Install Apache

sudo apt install apache2

Install Node and npm

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Install Git

sudo apt install git

Verify Apache2 is Active and Running

sudo service apache2 status

Verify Web Server Ports are Open and Allowed through Firewall

sudo ufw status verbose

Make Connection between Remote Server and GitHub via SSH Key

Generate SSH Keys

ssh-keygen -t ed25519 -C "your_email@example.com"

If you get a permission denied error, change ownership of the .ssh directory and try again:

sudo chown -R user_name .ssh
# Example:
sudo chown -R raj .ssh

Copy the Public SSH Key
```
cat ~/.ssh/id_ed25519.pub
```
Add the Public Key to GitHub
- Go to your GitHub repository.
- Click on the Settings tab.
- Click on Deploy Keys from the sidebar.
- Click on Add Deploy Key, paste the copied SSH public key, and click Add Key.
Verify the Connection
```
ssh -T git@github.com
# OR
ssh -vT git@github.com
```
If you encounter a permission denied error, clone the GitHub repo into the user's home directory, then move it to the web server's public directory.

Clone Project from Your GitHub Account

Using HTTPS Path (no need to set up SSH Key on GitHub)

git clone https_repo_path
# Example:
git clone https://github.com/geekyshow1/miniblog.git

Using SSH Path (requires SSH Key setup on GitHub)

git clone ssh_repo_path
# Example:
git clone git@github.com:geekyshow1/miniblog.git

Move Project Folder to Web Server Public Directory

sudo mv project_folder_name /var/www
# Example:
sudo mv miniblog /var/www

Go to Your Project Directory

cd /var/www/project_folder_name
# Example:
cd /var/www/miniblog

Install Dependencies

npm install

Create Production Build

npm run build
# OR
npm run export

Create Virtual Host File

sudo nano /etc/apache2/sites-available/your_domain.conf

Add the following code to the virtual host file:

<VirtualHost *:80>
    ServerName www.example.com
    ServerAdmin contact@example.com
    DocumentRoot /var/www/project_folder_name/production_build_folder_name
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Enable Virtual Host

cd /etc/apache2/sites-available/
sudo a2ensite your_domain.conf

Check Configuration

sudo apache2ctl configtest

Restart Apache2

sudo service apache2 restart

Automate Deployment Using GitHub Actions

Create Deployment Script

On your local machine, open your project using VS Code or any editor.

Create a folder named .scripts inside your root project folder (e.g., miniblog/.scripts).

Inside the .scripts folder, create a file with a .sh extension (e.g., deploy.sh).

Add the following script to the .sh file:

#!/bin/bash
set -e

echo "Deployment started..."

# Pull the latest version of the app
git pull origin master
echo "New changes copied to server!"

echo "Installing Dependencies..."
npm install --yes

echo "Creating Production Build..."
# For ReactJS, VueJS, and NuxtJS
npm run build

# For NextJS
# npm run export

echo "Deployment Finished!"

Set File Permission

git update-index --add --chmod=+x deploy.sh

Create GitHub Actions Workflow

Create a directory path named .github/workflows inside your root project folder (e.g., miniblog/.github/workflows).

Inside the workflows folder, create a file with a .yml extension (e.g., deploy.yml).

Add the following script to the .yml file:

name: Deploy

on:
  push:
    branches: ["master"]
  pull_request:
    branches: ["master"]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          port: ${{ secrets.PORT }}
          key: ${{ secrets.SSHKEY }}
          script: "cd /var/www/project_folder_name && ./.scripts/deploy.sh"

Add Repository Secrets
- Go to your GitHub repository.
- Click on Settings.
- Click on Secrets and Variables from the sidebar, then choose Actions.
- Click on New Repository Secret and add the following secrets:
  - Name: HOST
    Secret: Your_Server_IP
  - Name: PORT
    Secret: Your_Server_PORT
  - Name: USERNAME
    Secret: Your_Server_User_Name
  - Name: SSHKEY
    Secret: Private_SSH_KEY_Generated_On_Server

Commit and Push Changes

Generate SSH Key for GitHub Action

ssh-keygen -f key_path -t ed25519 -C "your_email@example.com"
# Example:
ssh-keygen -f /home/raj/.ssh/gitaction_ed25519 -t ed25519 -C "gitactionautodep"

Add the Public Key to authorized_keys
```
cat ~/.ssh/gitaction_ed25519.pub
cd .ssh
nano authorized_keys
```
Paste the copied key into a new line in the authorized_keys file.
Add the Private Key to GitHub Secrets
```
cat ~/.ssh/gitaction_ed25519
```
Use this key to set the SSHKEY secret in your GitHub repository.
Pull Changes from GitHub
```
cd /var/www/project_folder_name
git pull
```
Your deployment should now be automated.

Monitoring

Track your actions from the GitHub Actions tab. If you encounter file permission errors, adjust file

permissions accordingly.