DEV Community

Meshv Patel
Meshv Patel

Posted on

Intro to GitHub Action CI/CD

Intro to GitHub Action CI/CD

Continuous integration (CI) and continuous delivery (CD) are practices that aim to automate and streamline the software development process. CI/CD helps developers to build, test, and deploy code faster and more reliably.

GitHub Actions is a feature of GitHub that allows you to create custom workflows for your GitHub repositories. You can use GitHub Actions to perform any task you want, such as running tests, checking code quality, generating artifacts, or deploying your application.

In this blog post, we will learn how to set up a simple CI/CD pipeline with GitHub Actions for a web application hosted on Azure App Service.

Prerequisites

To follow along with this tutorial, you will need:

  • A GitHub account and a repository with some code for a web application. You can use any language or framework you prefer, but we will use Node.js and Express.js as an example.
  • An Azure account and an App Service plan with a web app created. You can use the Azure portal or the Azure CLI to create these resources.
  • Basic knowledge of YAML syntax

Step 1: Create a workflow file

A workflow is a YAML file that defines the steps and actions that GitHub should run when certain events occur in your repository. For example, you can trigger a workflow when someone pushes code to a branch, creates a pull request, or releases a new version.

To create a workflow file, go to your repository on GitHub and create a new directory called .github/workflows. Inside this directory, create a new file called ci-cd.yml.

The first part of the workflow file defines the name of the workflow and the events that trigger it. For this example, we will run the workflow on every push event to the main branch:

Or

If you do not want to make yml file by your own then just use github one..

  • Go to your repository then click on Action Tab.
  • Select which type of workflow you want to use.
  • And commit it ✨ Good to Go.

GiThub actions

ci-cd.yml


name: Build and deploy Node.js app to Azure Web App

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v2
        id: deploy-to-webapp
        with:
          app-name: 'Node-CRUD'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_2BDBEF10FD894BBDA4BBD91349CE4F43 }}
          package: .


Enter fullscreen mode Exit fullscreen mode

This workflow is named "Build and deploy Node.js app to Azure Web App" and runs on every push to the main branch. It defines a single job named test that runs on an Ubuntu virtual machine. The job includes three steps:

The actions/checkout action checks out our repository code on the virtual machine.
The npm install command installs our dependencies.
The npm test command runs our tests.
With this workflow in place, every time we push changes to the main branch, our tests will automatically run on an Ubuntu virtual machine.

Building and Deploying

Next, we'll add two more workflows to our DevOps pipeline: one for building our Node.js application and another for deploying it.

Here's what the YAML file for our "Build" workflow will look like:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build
Enter fullscreen mode Exit fullscreen mode

This workflow is named "Build" and runs on every push to the main branch. It defines a single job named build that runs on an Ubuntu virtual machine. The job includes three steps:

The actions/checkout action checks out our repository code on the virtual machine.
The npm install command installs our dependencies.
The npm run build command builds our Node.js application.
Finally, we'll create a workflow for deploying our application. For this, we'll use the ssh-deploy action to deploy our application to a remote server.

Here's what the YAML file for our "Deploy" workflow will look like:

deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v2
        id: deploy-to-webapp
        with:
          app-name: 'Node-CRUD'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_123 }}
          package: .
Enter fullscreen mode Exit fullscreen mode

After done with workflow just commit and see there is action will be created...

Node JS Code
After pushing code to github

You will see this img

Image description

After successfully run this job our code has been perfectly run and build...

Conclusion

In this blog post, we showed you how to automate your DevOps workflow using GitHub Actions. We created workflows for testing, building, and deploying a simple Node.js application. With GitHub Actions, you can easily automate your software delivery process and increase collaboration between teams.

GitHub Actions is a powerful tool that's easy to use and highly customizable. You can create workflows for almost any task, from testing and building to deploying and monitoring. With GitHub Actions, you can streamline your DevOps pipeline and deliver high-quality software faster than ever before.

Top comments (0)