Shubham S Nimje logo
Shubham Nimje
Apache

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

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

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

Login to Your Domain Provider Website

  1. Navigate to Manage DNS
  2. 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

  1. Add a .gitignore file.
  2. Create a .env.example file (if needed).
  3. 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

  1. 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
  2. Copy the Public SSH Key

    cat ~/.ssh/id_ed25519.pub
  3. 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.
  4. 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

  1. 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!"
  2. Set File Permission

    git update-index --add --chmod=+x deploy.sh
  3. 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"
  4. 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

  1. 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"
  2. 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.

  3. Add the Private Key to GitHub Secrets

    cat ~/.ssh/gitaction_ed25519

    Use this key to set the SSHKEY secret in your GitHub repository.

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