GitHub Actions for Front-End CI/CD

I'll walk you through the step-by-step process of building a front-end CI/CD pipeline using GitHub Actions. By automating the deployment process, we can ensure that changes to our website are seamlessly delivered to end users.

Github Actions - CI/CD for DevOps

GitHub actions helps automate tasks related to software development and deployment. It allows you to set up workflows that automatically perform actions based on events that occur in your GitHub repositories, like pushing code changes or creating pull requests.

1: Creating the YAML File

Start by creating a YAML file, in the root directory of your website. (github/workflows)

name: update site and invalidate CloudFront Distribution

on:
  push:
    branches:
    - main

Defining Jobs and Steps

Within the workflow, define the jobs and steps required for the CI/CD pipeline.

The below involves copying the website files to an S3 bucket and invalidating the CloudFront distribution.

Setup secret keys using access key and also secret access key (created using IAM Role)

Setup secret key for S3 bucket (which is the S3 Bucket Name) and cloudfront distribution name which is your CloudFront ID

(SECRET KEYS ARE UNDER REPOSITORY SETTINGS - CREATE NEW REPOSITORY KEYS)

Jobs and Steps:

Job 1 - Copying Website to S3:

Runs on the latest version of Ubuntu environment.
Checks out the repository code.
Syncs the website files to an S3 bucket using the jakejarvis/s3-sync-action action.

Configures parameters such as following symlinks, excluding .git directory, etc.

  jobs:
    update-site-and-invalidate-cloudfront:
      runs-on: ubuntu-latest
      steps:
        - name: checkout
          uses: actions/checkout@master

        - name: sync s3
          uses: jakejarvis/s3-sync-action@master
          with:
            args: --follow-symlinks --delete --exclude '.git/*' --size-only
          env:
            AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
            AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
            AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
            AWS_REGION: 'eu-west-2'
            SOURCE_DIR: './ '

Job 2 - Invalidating CloudFront Distribution:

Depends on the completion of the previous job.
Invalidates the CloudFront distribution using the chetan/invalidate-cloudfront-action action.
Requires distribution ID, paths to invalidate, and AWS credentials.

     invalidate-cloudfront-distribution:
        needs:  update-site-and-invalidate-cloudfront
        runs-on: ubuntu-latest
        steps:
          - name: Invalidate CloudFront
            uses: chetan/invalidate-cloudfront-action@v2
            env:
              DISTRIBUTION: ${{ secrets.DISTRIBUTION }}
              PATHS: "/*"
              AWS_REGION: "eu-west-2"
              AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
              AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

After defining the workflow, you can now commit your code changes to the github.

In the "Actions" tab in your GitHub repository, you will see the workflow active based on your recent push.

Chapter 3: Front-End CI/CD Pipeline with GitHub Actions.

Github Actions - CI/CD for DevOps

1: Creating the YAML File

Defining Jobs and Steps