Click on Add Deploy Key Button and Paste Remote Server’s Copied SSH Public Key then Click on Add Key
Verify the Connection, Go to Your Server Terminal then run below
ssh -T git@github.com
// OR
ssh -vT git@github.com
You may get an error git @ github.com: Permission denied (publickey) If you will try to clone it directly on Web Server Public Folder /var/www So we will clone github repo in User’s Home Directory then Move it to Web server Public Directory
Clone Project from your github account
- Using HTTPS Path It doesnt require to setup SSH Key on Github
Syntax:- git clone https_repo_path
Example:- git clone https://github.com/geekyshow1/miniblog.git
- Using SSH Path It requires to setup SSH Key on Github
Syntax:- git clone ssh_repo_path
Example:- git clone git@github.com:geekyshow1/miniblog.git
Run ls command to verify that the project is present
ls
Move Project Folder to Web Server public directory
cd /etc/apache2/sites-available/
sudo a2ensite your_domain.conf
Check Configuration is correct or not
sudo apache2ctl configtest
Restart Apache2
sudo service apache2 restart
Now you can make some changes in your project local development VS Code and Pull it on Remote Server
Go to Your Project Directory
Syntax:- cd /var/www/project_folder_name
Example:- cd /var/www/miniblog
Pull the changes from github repo
git pull
Create Production Build
npm run build
// OR
npm run export
How to Automate ReactJS, VueJS, NextJS and Nuxt Deployment using Github Action
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 .scripts folder Create A file with .sh extension e.g. miniblog/.scripts/deploy.sh
Write below script inside the created .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 Nuxt JS
npm run build
# For NextJS
# npm run export
echo "Deployment Finished!"
Go inside .scripts Folder then Set File Permission for .sh File
git update-index --add --chmod=+x deploy.sh
Create Directory Path named .github/workflows inside your root project folder e.g. miniblog/.github/workflows
Inside workflows folder Create A file with .yml extension e.g. miniblog/.github/workflows/deploy.yml
Write below script inside the created .yml file
name: Deploy
# Trigger the workflow on push and
# pull request events on the master branch
on:
push:
branches: ["master"]
pull_request:
branches: ["master"]
# Authenticate to the the server via ssh
# and run our deployment script
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"
Go to Your Github Repo Click on Settings
Click on Secrets and Variables from the Sidebar then choose Actions
On Secret Tab, Click on New Repository Secret
Add Four Secrets HOST, PORT, USERNAME and SSHKEY as below
Name: HOST
Secret: Your_Server_IP
Name: PORT
Secret: Your_Server_PORT
Name: USERNAME
Secret: Your_Server_User_Name
You can get Server User Name by loging into your server via ssh then run below command
whoami
Generate SSH Key for Github Action by Login into Remote Server then run below Command OR You can use old SSH Key But I am creating New one for Github Action
