Deploy Your JavaScript Framework on Apache VPS: React, Vue, Next.js & Nuxt.js
Table Of Content
- Login to Your Domain Provider Website
- Open Project on VS Code
- Access Remote Server via SSH
- Example:
- Verify that Required Software is Installed
- Install Apache
- Install Node and npm
- Install Git
- Verify Apache2 is Active and Running
- Verify Web Server Ports are Open and Allowed through Firewall
- Make Connection between Remote Server and GitHub via SSH Key
- Clone Project from Your GitHub Account
- Move Project Folder to Web Server Public Directory
- Example:
- Go to Your Project Directory
- Example:
- Install Dependencies
- Create Production Build
- OR
- Create Virtual Host File
- Enable Virtual Host
- Check Configuration
- Restart Apache2
- Automate Deployment Using GitHub Actions
- Commit and Push Changes
- Monitoring
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
- 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
- Type: A
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
- Name: HOST
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.