CI/CD Using Github action and Github Pages

CI/CD is a best practice for devops and agile development. Here’s how software development teams automate continuous integration and delivery all the way through the CI/CD pipeline.

ci/cd architecture

1. CONTINOUS INTEGRATION

Continuous integration is the practice of running the steps that were traditionally performed during “integration” little and often throughout the development process, rather than waiting until code is complete before bringing it all together and testing it.

2. CONTINOUS DELIVERY

Continuous delivery builds on the foundations of build and test automation established with continuous integration.

3. CONTINOUS DEPLOYMENT

Continuous deployment takes the practices of continuous integration and delivery to their logical conclusion:

Note there are many platform that provide CI/CD but for now we go with the github because there is no third party integration,easy to setup pipeline and no worry to install custom plugins like in others e.g jenkins

Github Actions

Platform to automate developer workflows.

When something happen in your repository you can configure automatic action in a response. Someone creating pull request,push,creating issue and then merging are all events.

Workflows executed / triggers against these events

Lets started basic workflow for simple react application just create react app with following command and do the changes.

npx create-react-app my-app
cd my-app
code .

Create .github directory then workflows directory in it and create pages.yml file to get started with application basic workflow.

In this workflow we build and deploy simple react website using github-pages using CI/CD.

directory

Lets discussed above code snippet and yml keywords in step by step process.

1. name [optional ] name of workflow.
2. on [required] is a way of defining events push or pull request.
3. workflow triggers when ever some thing happens in our target repository here is push and pull request on master branch
4. jobs [required] name here is build job basically is a group of action,chain of actions or set of tasks that executed.
5. uses here select an action that is already provided by github or you can make your custom. Here we are using action/checkout@v2 to checkout in a repository.There are many go into the action tab to view more in detailed.
6. run here is running linux or cmd based command you run multiple commands by defining | command.
7. with used to select the version or secret by defining variable placeholders e.g: ${{}}.

Before pushing code to master branch just set up access token from developer setting option and keep the value save by creating secret using github.This value will be used to host our website using github-pages.

Lets save the above file and replace the secret value with your secret and push the code to see the changes.

How these workflows or set of jobs run they are totally managed by github servers.You don’t need your server to managed this or build this.Whenever you create a job fresh server instance is created at a fly.Each job has its own server. Jobs run in parallel by default but you can run it one by one also by using need:job name keyword means run current job if first job is completed.you define the job name in need value.

Servers available on github are of three categories

• Window
• macOS
• Ubuntu

Lets have scenario where we want to shipped the application on all three os categories. Test Each release and commit to the master on all OS.We will do this by using matrix keyword to define multiple version of OS.This will create a three jobs individually.

runs-on:${{matrix.os}}
 strategy:
   matrix:
    os:[ubuntu-latest,window-latest,macOS-latest]

build job

deploy job

github-pages

output website

GitHub - BismahTahir/react-cicd