Kashif Wahaj's Blog

Shared Hosting CICD

By Kashif Wahaj on Jan 28, 2023
Image post 6

From Push to Direct Automated Deployment πŸ₯³

Here is my try, to explain you the process in simpler way.

Follow steps below:

Step 1. Push your latest code on Github Repository

hell

Step 2. Create an access token

you will need a personal access token from github to clone or manage permissions of the repository.

  1. Goto: βš™ Settings β†’ Developer Settings
hell
  1. Click on: Personal Access Token β†’ Fine-Grained tokens β†’ Generate new Token
hell

Step 3. You will see a form for token details.

Enter a token name and expiry date you need (30 Days recommended).

hell

Note: if your repository exist in the organization, you need select your organization from Resource Owner Dropdown.

Step 4. Login to Your Shared Hosting and Get SSH Access to your project

After login to Hosting Dashboard ( Sometimes CPanels ) you will get all details to setup SSH to connect to your server from local computer.

How to Setup SSH From Shared Hosting Locally.

Step 5. Prepare Server Folder for Deployment

Since it is a static site you can just create a folder in any existing project you want or you can set up a separate domain/subdomain for it.

Make a folder

Terminal

cd ~/www/<domain>
mkdir <your project name>

or Create a subdomain from main domain

then run following command,

Note: before running this command please take a backup of the the files in the folder, this command will delete all files and folders under this directory.

Terminal

cd ~/www/<your domain or folder>
rm -R *

Step 6. Clone repository from Github

You can copy your repository https link from github

hell

e.g. it will be looking like this : https://github.com/Kashifwahaj/seat-booking.git

you need to add your github username and your generated token in URL while cloning (See below).

Terminal

git clone https://<username>:<fine-grained-token>@github.com/<name>/<repo-name> .

Don’t forget Dot(.) at the end of clone command.

if your hosting need a public_html folder, you can run the following

Terminal

ln -s  public public_html

Now Setup the project

1. Run Composer Install/Update

composer install

if composer install throws error then run the following

composer install --legacy-peer-deps

if this also not working then try running the following

rm package-lock.json
composer update

now if this also not working then it might be PHP version issue then in your cpanel or hosting panel change php version to as mention to your laravel project composer.json file, then try above commands again.

if changing php version also not working then run the following

 /usr/local/bin/php81 /usr/local/bin/composer.phar update

2. create Database and .env setup

create an .env file from .env.example

cp .env.example .env

now create a database and user in your cpanel/hosting and add user to database, your cpanel/hosting may guide you for this.

after than dbname,username and password paste in .env

3. Setup Database

Run migrations

 /usr/local/bin/php81 artisan migrate
 /usr/local/bin/php81 artisan optimize:clear

or if you do not have migrations then import your old database from PHPMyadmin.

Important: Now clear cache from cpanel/hosting panel also.

then try visit the website.

Step 7. Setup a Webhooks and .gitignore

Now you project is deployed on server but it not CICD yet, it need to be updated automated whenever someone push code to github repository.

for that we have many ways, one of the ways is to setup webhook to manage automatic update (git pull) on the server.

  1. create a folder webhooks and a file pull.php inside webhooks.

Terminal

cd ~/www/<your domain or folder>
mkdir webhooks
touch pull.php

2.Open pull.php and setup a webhook endpoint in the pull.php

Terminal

cd ~/www/<your domain or folder>
cd webhooks
nano pull.php

Inside pull.php before paste you need to make a string key by yourself, we will use this key in following steps. e.g. β€˜abc@123’

We are setting up a api end point in pull.php. endpoint will be : https://your-domain/folder/webhooks/pull.php we will pass our string key with the endpoint url : https://your-domain/folder/webhooks/pull.php?webhook_key=abc@123

paste below code in pull.php:

<?php
header('Content-Type: application/json');
header('Accept: application/json');
if($_SERVER['REQUEST_METHOD'] == "POST"){
  $WEBHOOK_KEY = 'abc@123'; // this is string key you need to paste here
  http_response_code(200);
  $request =  file_get_contents('php://input');
  $data = $_GET;
  if($data['webhook_key'] == $WEBHOOK_KEY){
    $username = "<github-username>" ; // here write github username
    $token = "<github-fine-grained-token>"; // here paster your generated token
    $url = "https://".$username.":".$token."@github.com/username/repo-name.git";
    echo shell_exec('git pull '.$url);
    return;
}
 http_response_code(403);
 echo  "UnAuthenticated";
 return;
}
else {
  http_response_code(405);
  echo 'Method Not Allowed';
}

this is a simple api endpoint in php which will be hit by github whenever someone push on github.

endpoint : https://your-domain/folder/webhooks/pull.php?webhook_key=abc@123

whenever this endpoint get a hit it will take git pull and server cod will be updated.

Last Setup to update .gitignore and push

Terminal

cd ~/www/<your domain or folder>
nano .gitignore

Paste or add below line inside .gitignore file.

.gitignore

/webhooks

Now commit and push this code to github so that it will not create conflict in future.

cd ~/www/<your domain or folder>
git add .
git commit -m "Webhooks Setup and Gitignore"
git push

Step 8. Setup a Webhook in Github

Now we just need to let github know to call/hit this api endpoint whenever someone push on github repository.

https://your-domain/folder/webhooks/pull.php?webhook_key=abc@123

  1. Go to Repository Settings β†’ Click on Webhooks β†’ Click on Add Webhook
  2. Your will see a form:
hell
  1. Paste endpoint url in Payload URL input field.
  2. Select Content-Type to application/json
  3. You can leave secret field blank/empty
  4. Check on just the push event
  5. Check on Active
  6. Click on Add Webhook

Now github will start a ping to your server just to check everything is fine.

Step 9. Test CICD

Now you just need to push to your github repository and if everything is setup correctly your server code will automatically updated.

Note: Sometimes changes will not reflect , in this case clear cache in your server.

Done

Let me know in comment below if anything wrong, or needs to be updated in this article or email me at kashifwahaj@gmail.com

Image post 6

Client Server Architecture

Mar 11, 2024
Checklist for better code quality of React / Javascript Code.
Image post 6

React JS Code Quality Checklist before PR

Mar 11, 2024
Checklist for better code quality of React / Javascript Code.
Image post 6

Laravel Inertia Admin Panel using Shadcn UI and Tailwind CSS

Feb 18, 2024
Easy Steps to setup a laravel admin panel using latest inertia, Shadcn UI and Tailwind CSS.