CI/CD using Github action for Angular deployment on ssh server

Before we dive into deploying our angular application using github actions , it is important that we understand some keys words

1. CI/CD: it is the combined practices of continuous integration and either continuous delivery or continuous deployment. Before the advent of CI/CD must production deployment where upload manually by using tools like putty, FileZilla etc. But with the advent of CI/CD it is easy to automate ones deployment pipeline.

2. SSH Server: Secure Shell is a cryptographic network protocol for operating network services securely over an unsecured network. All lot of companies uses SSH servers for housing both their development and production codebase.

3.GitHub Actions: This is a CI/CD tool developed by the teams , to help automate deployment when users push their code base to a repository. It contains set of yaml rules that guides the deployment based on a branch. This means you can have three branches with different yaml rules guiding there individual deployment. For example you can have for test, staging and production with unquie branches, which listens to when an event has occurred in them.

Enough with the grammar let deploy our angular application to an SSH server using GitHub action. The code below is a snippet of how this can be achieved.

name: Ghost Development server

on:
  push:
    branches:
    - main

jobs:
  build:
    # using Ubuntu
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1 #this installs node and npm for us
        with:
          node-version: "14.x"

      - uses: actions/cache@v1 # this allows for re-using node_modules caching, making builds a bit faster.
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - run: npm cache clean --force
      - run: npm install
      - run: npm install -g @angular/cli > /dev/null
      - run: ng build

      - name: copy file via ssh key
        uses: appleboy/scp-action@master
        env:
          HOST:  ${{ secrets.HOST }}
          USERNAME:  ${{ secrets.USERNAME }}
          PORT:  ${{ secrets.PORT }}
          PASSWORD: ${{ secrets.PASSWORD }}
        with:
          source: "./ghost"
          target: "/var/www/html/v2/ghost/"
          strip_components: 2  

let work through the yaml file

1. Action Name
2. Branch that should trigger the actions
3. The SSH server if it is Linux distribution or a windows
4. Install node and npm on the serve if missing
5. specified node version
6. caching of installed node_modules for next deployment 7.installing npm and angular cli
7. Building the angular project with ng build
8. using a GitHub action library call appleboy/scp-action@master to run deployment to SSH server 10.It is important that all secrets are setup in you project repo. Navigate to settings> Secrets >new Secrets

That is how easy it is to deploy and angular project to an SSH server thank you.

Thanks for reading you can follow me on twitter at