15. CI/CD (Front end)
Tags: aws, github
Published: 2021-01-13 05:26:55

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

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

#[Git Actions](https://github.com/features/actions)
GitHub Actions makes it easy to automate all your software workflows and deploy your code right from GitHub.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y2nco7g96a909z1z4v36.PNG)

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](https://github.com/jakejarvis/s3-sync-action) and [here](https://mechanicalrock.github.io/2020/01/06/github-actions-for-sam.html), so went ahead with my own action creation. 

>Overview
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9l0aivtccw0cfd8ahn5j.PNG)



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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ok4123v8ug9ld2t2hu0.PNG)

* 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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gy3w49lbo8zzpwsv9v2k.PNG)

> # 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](https://docs.github.com/en/actions/creating-actions/dockerfile-support-for-github-actions#about-dockerfile-instructions)). However, I was facing continuous `Permission denied` exception so had to add the below command:
`RUN ["chmod", "+x", "/entrypoint.sh"]`. ([Refer](https://stackoverflow.com/questions/54336677/error-starting-container-process-caused-exec-docker-entrypoint-sh-permi)).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6htgjv0re9xc2twpeozj.PNG)

> # 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](https://github.com/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`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fooo3b3vg2v27obgx9r5.PNG)

> # 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8g4mjt7qg07s2ykg09fa.PNG)

#  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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nf1hgy3nv6pvryjlzjfp.PNG)

> # Updated S3 bucket

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ixh2gxg4azopgf11g1qg.PNG) 

> # Cloudfront Cache Invalidation.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/28dyldf995o90i4klxrh.PNG)

And the CI/CD front end is set up.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)