Devarsh's Blog

CI/CD Project using GitHub Actions and ArgoCD

Devarsh's photo
Devarsh
·

5 min read

Table of contents

Objective

Hey folks, here's another blog. In this, we are going to make our app up and running. And whenever we make changes in our GitHub file the change will update automatically.

OUTPUT:

Glimpse of success after a lot of failure.

Let's Get Started.

Install ArgoCD

Do check this blog on "Getting Started with ArgoCD" without facing errors.

Now, after installing ArgoCD, enter this command:

kubectl port-forward svc/argocd-server -n argocd 8080:443 now the ArgoCD must be running on port 8080. As specified in the Blog, change the password and enter it with the user name "admin".

Open Github

i.) Go to GitHub and fork two of Rishav Sir's repositories. One is named "gitops-01" and another is named "gitops-infra".

NOTE: Fork "gitops-infra" in master branch. Though it will be created in master branch by default. But verify once.

ii.) At this location .github/workflows/ci-action.yaml in gitops-01 directory, we have to make some changes.

  • In build-and-push-docker-image: section, there's one parameter ->

    - name: Build image and push to Docker Hub and GitHub Container Registry

  • Make changes in the "tags" parameter.

      tags: |
              DockerHubUserName/gitops01:${{ github.sha }} 
              ghcr.io/DockerHubUserName/gitops01:${{ github.sha }}

    Below, in update-manifest-stage:

            - uses: actions/checkout@v3
          with:
            repository: Github_Username/gitops-infra #CHANGES
            ref: 'master'
            token: ${{ secrets.G_TOKEN }}
        - name: setup git config
          run: |
            git config --global user.email "YOUR_EMAIL_ID" #CHANGES
            git config --global user.name "GITHUB_USERNAME" #CHANGES
            echo ${{ github.sha }}
            .......
            .......
            .......

    iii.) Now, in gitops-infra directory, in the "deployment.yaml" file.

    Here, in "containers:" section remove the id. and replace the username with your DockerHub Username.

    And in "service.yaml" file change the nodePort from 31000 -> 32000. To avoid this error.

iv.) Now, go to settings, in the "gitops-01" repository. Once you fork it.

Go to Action as shown in the picture. Then click "New repository secret" and create the secrets.

Add these three secrets accordingly.

Create Github Token

If you know how to generate a GitHub token. You can skip this part.

  1. Go to your Profile settings ->

  2. Then go to Developer Settings.

  3. Then click on, "Tokens(classic)" within "Personal Access token".

  4. Click on Generate new Token. And Enter a password.

  5. Enter note. Select some parameters. Set the date when you want to expire the Token.

  6. Click Generate Token

  7. Copy the Code.

  8. That's all.

Cont.

Now, in Secrets add one more parameter named G_TOKEN. And paste the new Generated token into it.

Interacting with ArgoCD.

Connect gitops-infra forked repo.

  1. Now login into ArgoCD with Username: admin and your password.

  2. Then go to settings -> Repositories -> Click connect repo.

  3. Name: gitopsinfra(or anything you wish), Project: default,

    Repository URL: gitops-infra, forked repo URL.

  4. CONNECT.

  5. Connection Status must be successful.

Create application.

  1. Go to Applications -> Click New App.

  2. In General,

    Application Name -> gitopstutorial(any you want)

    Project Name -> default

    SYNC POLICY -> Automatic

    Select Auto Create Namespace

  3. In Source,

    Repository URL: gitops-infra repo URL itself.

    Revision: HEAD

    Path: ./ (which shows the path to deployment & service file.)

    Cluster URL: Select the default one.

    Namespace: gitopstutorial(give the name you want)

  4. CREATE.

  5. Here, if it does not get synced. Synchronize it manually.

  6. It must look like this.

    Note: Here, in your case, the number of pods must be 3. As I had changed the replica sets. In deployment.yaml file

Github Actions Part

Firstly, Enable action by going to the action section in GitHub "gitops-01" repo.

Here, you just need to make some changes, in the App.js file. That is in the frontend part and the GitHub actions will automatically get started. Once you commit changes.

In gitops-01 forked repo. Go to actions and see this. You may not face error.

The error you may face.

If you face this kind of error while re-running the job. Just,

  • Go to the deployment.yaml file in gitops-infra repo.

  • And delete the id which is added when you ran the job first.

  • And re-run the update-manifest-stage job again. You'll not face this error.

CLI Part

  1. Run command kubectl get ns(namespace). Here you'll see the namespace name gitopstutorial or whatever the name you put while creating the Application in ArgoCD.

  2. Now, run the command kubectl get all -n gitopstutorial. You'll see everything about the pod, deployment and services.

  3. Here, our main goal is to see the front end of our app. So, we'll port-forward our service to port 3001. Using command: kubectl port-forward service/react-app 3001:80 -n gitopstutorial

  4. Now, make some changes again in App.js from First Commit -> Second Commit or anything. And commit the changes.

  5. The action will start working. Now, go to ArgoCD to sync the app(if it is not automatically synced).

  6. In CLI, kill the port-forwarding and re-run the command, kubectl port-forward service/react-app 3001:80 -n gitopstutorial .

  7. Now, the changes must be reflected on the port localhost:3001

  8. That's all. Our app is up & running. With GitHub actions.

Creating Webhook

Here, we'll create a webhook so that the ArgoCD will be triggered automatically whenever we make and commit changes.

  1. Go to the settings of gitops-infra repo. And go to the webhook section. Here we will create the new webhook which will trigger "ArgoCD".

  2. Now, In CLI run command kubectl get svc -n argocd . Here's notice that we're watching the services of "argocd" not the application in argocd.

  3. Now, to expose our port we'll need ngrok. Ngrok Installation Guide.

    After installing, run the command ngrok http 8080.

  4. After running the command you'll see this kind of interface.

    Copy the https... link. And paste it into the Webhook's payload section followed by the "/api/webhook" part.

  5. Content type: application/json.

    SSL verification: Disable (for now).

    Do not make any other changes and add webhook.

    You may see, this kind of change in CLI.

Now, made some changes in the deployment file this time(by changing the replicas). And the ArgoCD will be triggered automatically. And synchronized as we had enabled AutoSync.

Final Touch

  • Now, to see that all the things are working perfectly. Make changes in App.js.

  • From Second Commit -> Third Commit.

  • And commit the changes.

  • The action should start working -> The AutoSync in ArgoCD must be done.

    And on localhost:3001 where our app is running should reflect the changes we made. i.e. Second Commit -> Third Commit.

References

Rishav Sir's YouTube CI/CD video:

https://youtu.be/mkz2V1Tl2H0

Rishav Sir's GitHub:

Gitops Infra(consists deployment and service files): https://github.com/imrishav/gitops-infra

Gitops workflow: https://github.com/imrishav/gitops-01

BlogsWithCCWeMakeDevs