15. CI/CD (Front end)

After setting up the git repository for my frontend, it was time to automate the process of uploading source code for my bio to the S3 bucket blog.komlalebu.com as a CI/CD pipeline.

Git: https://github.com/jicoing/git-komlalebu

Git Actions

GitHub Actions makes it easy to automate all your software workflows and deploy your code right from GitHub.

Git hub actions pushes the source code to my S3 bucket the moment they are pushed to my git repository using actions. After a lot of search I finally learnt from here and here, so went ahead with my own action creation.

Overview

This simple action uses the vanilla AWS CLI to sync a directory (either from your repository or generated during your workflow) with a remote S3 bucket. The IAM role should have privileges to access S3.

The first step to configuring Github Actions is to create a folder called .github at the base of the repository. The structure typically looks as follows

Tree:

git-komlalebu
┣ 📂.github
┃ ┣ 📂actions
┃ ┃ ┗ 📂sam
┃ ┃ ┃ ┗ 📂package
┃ ┃ ┃ ┃ ┣ 📜action.yml
┃ ┃ ┃ ┃ ┣ 📜Dockerfile
┃ ┃ ┃ ┃ ┗ 📜entrypoint.sh
┃ ┗ 📂workflows
┃ ┃ ┗ 📜main.yml
┣ 📜error.html
┣ 📜git.png
┣ 📜hilltop.PNG
┣ 📜html.png
┣ 📜index.html
┣ 📜Komladefault.png
┣ 📜Komlaprocesslogo.gif
┣ 📜README.md
┣ 📜squirrel.png
┣ 📜styles.css
┗ 📜whale.png

• index.html, error.html,styles.css are the source code files for my static website.
• The .gif and .png files are required for website styling.
• main.yml is placed in .github/workflows folder.

Let’s take a look at my ci.yml file, which defines my workflow.

main.yml

From here, we defines jobs. These determine the actions that take place during the workflow, and in what order. The job uses ubuntu-latest image. The uses statement defines a particular action that we want to use. There is a standard action in here - actions/checkout@v1 and uses ./.github/actions/sam/package as the path to my action.

• The workflow uses files present in

                       ./.github/actions/sam/package
  

  📂actions
  ┗ 📂sam
  ┗ 📂package
  ┣ 📜action.yml
  ┣ 📜Dockerfile
  ┗ 📜entrypoint.sh

action.yml

The action.yaml file details metadata about the particular action. It uses the image defined in Dockerfile.

Dockerfile

I configure my dockerfile to build a docker image python:3.8-alpine and run the AWSCLI_VERSION='1.18.14' environment on it.
Copy the code file from my action repository to the filesystem path / of the container COPY entrypoint.sh /entrypoint.sh(Refer). However, I was facing continuous Permission denied exception so had to add the below command:
RUN ["chmod", "+x", "/entrypoint.sh"]. (Refer).

entrypoint.sh

Most of the work is done by this file in the docker image.
It is the same code as used in this action (Refer - jakejarvis/s3-sync-action), however I modified the entrypoint.sh slightly for invalidating cloudfront cache for my distribution. I also set a new --profile git-komlalebu.

Secrets

• AWS_ACCESS_KEY_ID, AWS_S3_BUCKET, DISTRIBUTION_ID and AWS_SECRET_ACCESS_KEY have been passed as environment variables for security purposes.

Github secrets.

git push.

CMD

             C:\Users\USER_NAME\git-komlalebu-sam>git add .
             C:\Users\USER_NAME\git-komlalebu-sam>git commit -m master
             C:\Users\USER_NAME\git-komlalebu-sam>git push origin master

Workflow uploads/syncs the below files with S3 bucket blog.komlalebu.com once files are pushed to the repository.

┣ 📜error.html
┣ 📜git.png
┣ 📜hilltop.PNG
┣ 📜html.png
┣ 📜index.html
┣ 📜Komladefault.png
┣ 📜Komlaprocesslogo.gif
┣ 📜README.md
┣ 📜squirrel.png
┣ 📜styles.css
┗ 📜whale.png

Workflow in action.

Updated S3 bucket

My files uploaded automatically on git push from local. The static website also gets updated as a result.

Cloudfront Cache Invalidation.

And the CI/CD front end is set up.