Argo CD and GitHub Action-1: Running Together Them To Create The CI/CD Pipeline
In these articles, we will deploy a restaurant web application developed by Node.js and React into the Kubernetes cluster by using GitHub Action (for Continuous Integration) and Argo CD (for Continuous Delivery).
For this, firstly, we will complete the Kubernetes cluster and Argo CD installations. Then, we will create a GitHub Action main.yml (deployment) file to run the CI pipeline, and then push the source code to the GitHub Repository to trigger the GitHub Action pipeline. The GitHub Action pipeline will build, tag, and then push the image of the source code into the private repository in Amazon ECR.
In the second and last article of this series, we will configure Argo CD (adding the app and the GitHub Repository to Argo CD, creating a secret in the Kubernetes cluster to connect Amazon ECR, etc.). After that, we will change the source code, push it to GitHub, and observe the results of this. The GitHub Action pipeline will be triggered automatically, and it will send the new image into the Amazon ECR. Then, Argo CD will automatically synchronize the Kubernetes cluster according to the changes in the yaml files, when it detects the changes in GitHub. Finally, we will observe the running of Argo CD by changing the number of Replicas in the Kubernetes manifest yaml file. We will examine the automatic deployment of the application in the Kubernetes cluster by using the Argo CD menu, GitHub Action menu, and Google Cloud GKE console. We will do them practically and step by step.
Topics we will cover:
1. Creating A Kubernetes cluster
2. Installing Argo CD into Kubernetes cluster
3. Preparing a GitHub Repository For The Source Code
4. Creating GitHub Action main.yml file to run CI pipeline
5. Creating An Amazon ECR repository
6. Adding The AWS Secrets to GitHub Secrets
7. Testing and Monitoring the GitHub Action Pipeline
8. As a result
9. Next post: “Argo CD and GitHub Action-2: Running Together To Create The CI/CD Pipeline”
10. References
If you like the article, I will be happy if you click on the Medium Following button to encourage me to write more, and not miss future articles.
Share this article with friends in your network and help others to upskill.
Your clapping 👏, following, or subscribing helps my articles to reach a broader audience. Thank you in advance for them.
When we complete the steps mentioned in this article, we will reach the results shown in the gif below. If you want, you can watch the result of Argo CD and GitHub Action working together to create the CI/CD pipeline in the gif below.
This article can actually be considered a continuation of my articles “Argo CD-1: Understanding, Installing, and Using Argo CD as a GitOps Continuous Delivery Tool” and “GitHub Actions-1 : Creating CI/CD pipeline for Java application, and building and pushing it to Docker Hub using GitHub Actions”, I recommend you to review them as well.
1. Creating A Kubernetes cluster
You need a Kubernetes cluster to install and run Argo CD. You will also run your application for it. I used the GCP cloud to install the Kubernetes cluster. My Worker Nodes are ready and I can connect them as seen in the picture below;
If you don’t have a Kubernetes cluster, you can install it using any of the links below;
To create a Kubernetes cluster by using Rancher;
To create a Kubernetes cluster by using “eksctl” command in AWS EKS;
For AWS EKS; https://docs.aws.amazon.com/eks/latest/userguide/create-cluster.html
For GCP GKE; https://cloud.google.com/kubernetes-engine/docs/deploy-app-cluster
For Azure AKS; https://learn.microsoft.com/en-us/azure/aks/tutorial-kubernetes-deploy-cluster
Installing Kubernetes with deployment tools; https://kubernetes.io/docs/setup/production-environment/tools/
2. Installing Argo CD into Kubernetes cluster
I recommend you to read my article below to install Argo CD and understand its working logic. In this article, I explained the installation of using different methods, step by step.
As seen in the picture below, the installation of Argo CD is completed and ready to run. I can start Argo CD by entering my username and password.
I can see the Argo CD start page as shown in the image below;
3. Preparing a GitHub Repository For The Source Code
Firstly, we must create a repository in GitHub (or you may also use your old repository) and then push an application into GitHub Repository from our local environment. I used a restaurant application developed via Node.JS and React. I pushed it to my GitHub repository as seen in the image below.
Also, I made a docker file for my application, so that I can use it to build the docker image, and as seen in the picture above, I also pushed it to my GitHub repository. My Docker file is as seen below;
# Use Node.js 16 slim as the base image
FROM node:16-slim
# Set the working directory
WORKDIR /app
# Copy package.json and package-lock.json to the working directory
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code
COPY . .
# Build the React app
RUN npm run build
# Expose port 3000 (or the port your app is configured to listen on)
EXPOSE 3000
# Start your Node.js server (assuming it serves the React app)
CMD ["npm", "start"]4. Creating GitHub Action main.yml file to run CI pipeline
We will configure the GitHub Actions to build, tag, and then push the image of the source code into the Amazon ECR as an image (artifact) repository. We will create a workflow. A workflow is a collection of job definitions that will be executed concurrently as well as sequentially. A job consists of steps of instructions that the remote system follows for acting. In this pipeline service, whenever an action is triggered, a temporary machine is allotted to the specific build task which works as per the instructions/steps mentioned in the workflow “main.yml” file.
In this workflow, actions are supposed to build, tag the image of my application using Dockerfile, and then push that image into my remote registry Amazon ECR.
Let’s configure GitHub Actions as shown below;
Go to your GitHub repository and click on the ‘Actions’ menu. (1) (2)
Here you can use pre-written workflow templates or you can create your custom workflow. Now, Click on the “set up a workflow yourself”.
The page where we will configure the “main.yml” file appears. If you want, you can change the “main” name of the main.yml file from the box at the top of the page.
I used the following code in the “main.yml” file; (3) (4)
name: Creating Node.js app. image and deploying it to ECR
on:
push:
branches:
- main
- release/*
jobs:
build:
name: Build Image
runs-on: ubuntu-latest
steps:
- name: Check out code
uses: actions/checkout@v2
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-east-1
- name: Login to Amazon ECR
id: login-ecr
uses: aws-actions/amazon-ecr-login@v1
- name: Image Tagging uses GitHub Build number in K8s manifest yaml file
run: |
echo "IMAGE_TAG=${{ github.run_number }}" >> $GITHUB_ENV
- name: Build, Tag, and Push Node.js image to Amazon ECR
env:
ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
ECR_REPOSITORY: node.js-restaurant-web-application
IMAGE_TAG: ${{ github.run_number }}
run: |
docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
Now let’s briefly explain our main.yml file; (5)
Job Name: Build Image, It creates a Ubuntu remote environment/Runner where the workflow can run and build the Image.
Job Name: Check out code, It logs in to the Remote Machine through SSH using the pre-written workflow by Official GitHub Actions (Checkout). It simply checks out our GitHub repository for ‘Dockerfile’ to build the docker image.
Job Name: Configure AWS Credentials, It sets up AWS CLI/SDK on Remote Host, configures AWS Login Credentials, and assumes Roles using the pre-written workflow by Official AWS Teams (Configure AWS Credentials).
Note: For accessing the Amazon ECR we need to define a custom Role in later steps, but if you have admin rights on your AWS user, you do not need to do this.
Job Name: Login to Amazon ECR, with this job, it logs into Amazon ECR.
Job Name: Image Tagging uses GitHub Build number in the K8s manifest yaml file, this job assigns the “GitHub Build number” to the system variable to be used in the K8s manifest yaml file.
Job Name: Build, tag, and push the image to Amazon ECR, It builds the Docker Image by using the Dockerfile in our Repository, tags the Image with a version, and pushes it to an Amazon Elastic Container Registry (Private ECR). The commands that will perform the above-mentioned tasks will be run in the bash of the Remote Machine.
Now, click on the ‘Commit changes’ button and make a successful commit, as shown in the picture below;
Now, you’ve .github/workflow/main.yml inside your repository. This your_file_name.yml contains the set of instructions that the Workflow will execute, as shown in the picture below;
And was created “.github/workflows” folders inside your repository, as shown in the picture below;
5. Creating An Amazon ECR repository
Go to the AWS Management Console and search “ECR” in the search menu and click on the “Elastic Container Registry”. Then click on “Create a repository”.
And choose “private” and then write your repository name into the given input field and create a repository by clicking “Create a repository” button.
So, an ECR private repository was created in Amazon ECR, as shown in the picture below;
Note: If you have problems with creating a repository, you can find detailed information about it in my article below;
6. Adding The AWS Secrets to GitHub Secrets
To access your Amazon ECR registry, you’ve to add your AWS secrets “AWS_ACCESS_KEY_ID” and “AWS_SECRET_ACCESS_KEY” to GitHub. Because these are credentials we cannot make them public so we need to set them as “Environment Variables” which are hidden and secured in the environment. Now, go to the settings menu of your repository, and in that click on ‘Secrets and variables’ . Click on the “New repository secret” button, as shown in the picture below; (6)
Enter “AWS_ACCESS_KEY_ID”and its value the relevant fields on the page that opens. Click on the “Add secret” button, as shown in the picture below;
Do the same things for “AWS_SECRET_ACCESS_KEY”.
So, our secrets was created in GitHub, as shown in the picture below;
Note: Make sure that your IAM user has proper valid IAM permissions. Your IAM user must have “AmazonEC2ContainerRegistryFullAccess” IAM permissions or “AdminAccess”. If you get the “ImagePullBackOff” or “ErrImagePull” error after running the GitHub Action pipeline, check here.
7. Testing and Monitoring the GitHub Action Pipeline
We’ve completed all the steps for the GitHub Action pipeline. Now, I will commit to my repository to test the GitHub Action pipeline.
I changed a logo file in the source code and pushed it to my GitHub repository via VSCode terminal, as shown in the picture below;
When the changes are pushed to the repository, check the ‘Actions’ tab in your repository. Here you can see that a new action started automatically. Here you can see the build logs where each tab shows the current task and on expanding each tab you can see its logs;
Click on the “Merge branch … with yellow color” above the picture,
Click on the “Build image … with yellow color” above the picture. Now we can see the running and stages of the GitHub Action pipeline. The build logs where each tab shows the current task.
The GitHub Action pipeline process is completed, as shown in the picture below;
We can check that our first image has been created and sent to our ECR private repository on the Amazon ECR.
Go to the Amazon ECR console, select our ECR private repository. You must see, that the GitHub Action pipeline will build, tag, and then push the image of the source code into the Amazon ECR, as seen in the picture below.
8. As a result
In this article, we completed the Kubernetes cluster and Argo CD installations. Then, we created the GitHub Action main.yml (deployment) file to run the CI pipeline and then pushed the source code to the GitHub Repository to trigger the GitHub Action pipeline. The GitHub Action pipeline built, tagged, and then pushed the image of the source code into the private repository in Amazon ECR.
To learn more about Argo CD;
Go to the complete documentation.
Check the live demo at https://cd.apps.argoproj.io/.
Argo CD links: https://github.com/argoproj/argo-cd?tab=readme-ov-file
To learn more about GitHub Action;
Share this article with friends in your network and help others to upskill.
If you liked the article, I would be happy if you clicked on the clap 👏 button and the Medium Following button to encourage me to write and not miss future articles.
Your clapping, following, or subscribing helps my articles to reach a broader audience. Thank you in advance for them.
For more info and questions, don’t hesitate to get in touch with me on Linkedin or Medium.
9. Next post
In the next post, “Argo CD and GitHub Action-2: Running Together To Create The CI/CD Pipeline”.
In the second and last article of this series, we will configure Argo CD (adding the app and the GitHub Repository to Argo CD, creating a secret in the Kubernetes cluster to connect Amazon ECR, etc.). After that, we will change the source code, push it to the GitHub, and observe the results of this. The GitHub Action pipeline will be triggered automatically, and it will send the new image into the Amazon ECR. Then, Argo CD will automatically synchronize the Kubernetes cluster according to the changes in the yaml files, when it detects the changes in GitHub. Finally, we will observe the running of Argo CD by changing the number of Replicas in the Kubernetes manifest yaml file. We will examine automatic deployment of the application in the Kubernetes cluster by using the Argo CD menu, GitHub Action menu, and Google Cloud GKE console. We will do them practically and step by step.
If you want, you can watch the summary of Argo CD and GitHub Action working together to create the CI/CD pipeline in the gif below.
Happy Clouding…
I frequently share articles about Cloud and DevOps. Don’t forget to follow my LinkedIn or Medium account to be informed about new articles.
10. References
(1) https://docs.github.com/en/actions
(2) https://docs.github.com/en/actions/creating-actions
(3) https://github.com/cypress-io/github-action/blob/master/.github/workflows/example-basic.yml
(4) https://docs.github.com/en/actions/quickstart
(5) https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions
(6) https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions
