ci_github_actions.md

title	author
Continuous integration using GitHub Actions	Part 2 of 3 in the [Build end-to-end CI/CD capabilities directly in GitHub](https://github.com/MSUSDEV/end-to-end-github-actions) series

Continuous integration using GitHub Actions

Overview

About us

Presenter Name

☁️ Presenter Title

For questions or help with this series: [email protected]

All demos and source code available online:

https://github.com/msusdev/end-to-end-github-actions

Setting the scene

Series roadmap

• Session 1:
  • Introduction to GitHub Actions
• Session 2:
  • ↪️ Continuous integration using GitHub Actions
• Session 3:
  • Deploy applications to Azure using GitHub Actions

Agenda

1. Exploring a sample Next.js web application
2. Building and validating the project
3. Creating a GitHub release
4. Docker-izing the project
5. Automating Docker container builds

Getting hands-on with GitHub Actions

Demo: Learning the syntax

::: notes

Automate Build

1. Get the web project (https://github.com/msusdev/example-next-web-app)

2. Build and validate web project

   npm install
   npm install --global next

3. Create build job in workflow

   name: Build Next.js web application
   on: push
   jobs:
   build-project:
     name: Build Project
     runs-on: ubuntu-latest
     steps:
     - name: Checkout code
       uses: actions/checkout@v2
     - name: Install NPM dependencies
       run: npm install
     - name: Build project assets
       run: npm run build

4. Upload artifact

   - name: Upload static site
     uses: actions/upload-artifact@v2
     with:
       name: static-site
       path: .next/

5. Create release job

   release-project:
     name: Release Project
     runs-on: ubuntu-latest
     needs: build-project

6. Download artifact

   - name: Download site content
     uses: actions/download-artifact@v2
     with:
       name: site-build

7. View contents of downloaded artifact

   - name: View content
     run: ls -R

8. Create GitHub release

   - name: Create GitHub release
     id: create-new-release
     uses: actions/create-release@v1
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     with:
       tag_name: ${{ github.run_number }}
       release_name: Release ${{ github.run_number }}

9. Compress folder

   - name: Archive site content
     uses: thedoctor0/zip-release@master
     with:
       filename: site.zip

10. Upload asset to release

    - name: Upload release asset
      uses: actions/upload-release-asset@v1
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        upload_url: ${{ steps.create-new-release.outputs.upload_url }}
        asset_path: ./site.zip
        asset_name: site-v${{ github.run_number }}.zip
        asset_content_type: application/zip

Dockerize app

1. Create Dockerfile

   FROM node:alpine
   
   WORKDIR /app
   
   COPY . /app
   
   RUN npm install
   RUN npm run build
   
   EXPOSE 80
   
   CMD npm run start

2. Test container locally

   docker build --tag next .
   docker run --detach --publish 5000:3000 next

3. Add container job

   name: Build container
   runs-on: ubuntu-latest
   steps:
     - name: Checkout code
       uses: actions/checkout@v2

4. Push to Docker Hub

   - name: Push to Docker Hub
     uses: docker/build-push-action@v1
     with:
       username: ${{ secrets.DOCKER_USERNAME }}
       password: ${{ secrets.DOCKER_PASSWORD }}
       repository: msusdev/webnext
       tags: latest, ${{ github.run_number }}

5. Test Docker Hub locally

   docker pull msusdev/webnext
   docker run --detach --publish 4000:3000 msusdev/webnext:latest

6. Push to GitHub Packages

   - name: Publish to GitHub Packages
     uses: docker/build-push-action@v1
     with:
       username: ${{ github.actor }}
       password: ${{ secrets.GITHUB_TOKEN }}
       registry: docker.pkg.github.com
       repository: ${{ github.repository }}/webnext
       tags: latest, ${{ github.run_number }}

7. Test GitHub Packages locally

   docker login https://docker.pkg.github.com
   docker pull docker.pkg.github.com/msusdev/preshow-test/webnext
   docker run --detach --publish 2000:3000 docker.pkg.github.com/msusdev/preshow-test/webnext

8. Final results https://github.com/msusdev/example-next-web-app

:::

Review

Agenda (revisted)

1. Exploring a sample Next.js web application
2. Building and validating the project
3. Creating a GitHub release
4. Docker-izing the project
5. Automating Docker container builds

Links

• https://github.com/actions/upload-artifact
• https://github.com/actions/download-artifact
• https://docs.github.com/actions/reference/workflow-syntax-for-github-actions#jobsjob_idneeds
• https://github.com/actions/create-release
• https://docs.github.com/actions/reference/context-and-expression-syntax-for-github-actions#contexts
• https://github.com/marketplace/actions/zip-release
• https://github.com/actions/upload-release-asset
• https://docs.github.com/actions/guides/publishing-docker-images
• https://github.com/docker/build-push-action/tree/releases/v1

GitHub Lab

https://lab.github.com/msusdev/build-end-to-end-cicd-capabilities-directly-in-github

Thanks! Q&A