Save 37% off PRO during our Black Friday Sale! »

Github Actions and workflows

Github Actions and workflows

Lars introduces GitHub Actions and GitHub action workflows and answers the following questions. What can GitHub workflows automate? What can trigger GitHub action workflows? Which types of GitHub Actions can we pick from when implementing our own that are either project-specific or published on GitHub Marketplace? Finally, a CI workflow for an Angular project is demonstrated.

Demo repository:
https://github.com/LayZeeDK/github-actions-angular

Prestented at:
- Systemate All-Stars 2021
- Angular Virtual Conference 2021 by C# Corner, May 2021
- AarhusJS, November 2021

Recording:
https://youtu.be/0srT34NiiO

4f349dbe1d48627445735f7e2c818c97?s=128

Lars Gyrup Brink Nielsen

November 09, 2021
Tweet

Transcript

  1. GitHub Actions and workflows AarhusJS

  2. GitHub Actions Types • Workflows • CI/CD workflows on GitHub

    runners • Event-driven workflows, for example triggered by web hook, PR, commit, tag, release, or comment • Actions • 3rd party actions on GitHub Marketplace • Custom actions
  3. GitHub workflows

  4. GitHub workflows Structure of workflow configuration • Name • Triggers

    • Environment variables • 1..n jobs
  5. GitHub workflows Built-in triggers • Cron timer (schedule) • Manual

    trigger on github.com (workflow_dispatch) • Web hook (repository_dispatch) • Push (push) • Pull request (pull_request) • Issue • Fork
  6. GitHub workflows Built-in triggers • Git branch • Git tag

    • GitHub release • GitHub project • Deployment • GitHub wiki
  7. GitHub workflows Actionsflow triggers • API polling • Email •

    Google Form • GraphQL polling • JavaScript script • Instagram • NPM • RSS • Weather • Web hook
  8. GitHub workflows Actionsflow triggers • Instagram • Reddit • Slack

    • Telegram • Trello • Twitter • Typeform • YouTube
  9. GitHub workflows Jobs • Image • Ubuntu • Windows Server

    • macOS • (Container image) • Environment variables • 1..n steps • Job dependencies • 0..n output values
  10. GitHub workflows Jobs jobs: build: name: Build runs-on: ubuntu-latest steps:

    - uses: actions/checkout@v2
  11. GitHub workflows GitHub action steps • Local or remote path

    • Version, tag, branch, or commit • Optional inputs (parameters) • Optional outputs (result values) • Optional name
  12. GitHub workflows GitHub action steps jobs: build: name: Build runs-on:

    ubuntu-latest steps: - uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 # 👈 with: node-version: 16.x # 👈 cache: yarn # 👈 - name: Build run: yarn build
  13. GitHub workflows Run steps • Shell • OS-specific (default) •

    Bash (bash) • PowerShell (powershell) • PowerShell Core (pwsh) • Working directory • Terminal command • Optional name
  14. GitHub workflows Run steps jobs: build: name: Build runs-on: ubuntu-latest

    steps: - uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: 16.x cache: yarn - name: Build run: yarn build # 👈
  15. GitHub workflows Conditions • Job-level • Step-level

  16. GitHub workflows Conditions jobs: lint: name: Lint if: ${{ github.event_name

    == 'pull_request' }} # 👈 runs-on: ubuntu-latest steps: - uses: actions/checkout/v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: 16.x cache: yarn - name: Lint run: yarn lint
  17. GitHub workflows Reusable workflows name: Reusable deployment example on: workflow_call:

    inputs: username: required: true type: string secrets: token: required: true jobs: deploy: name: Pass input and secrets to my-action runs-on: ubuntu-latest steps: - uses: ./.github/actions/my-deploy-action@v1 with: username: ${{ inputs.username }} token: ${{ secrets.token }}
  18. GitHub workflows Reusable workflows name: Calling a reusable workflow on:

    pull_request: branches: - main jobs: deploy: uses: LayZeeDK/my-actions/.github/workflows/my-deploy.yml with: username: lars secrets: token: ${{ secrets.TOKEN }}
  19. GitHub Actions

  20. GitHub Actions Usage examples • Publish packages • Deploy package

    • Send HTTP request • Install dependencies in workflow job • Run tool • Manage cloud environment • Comment in pull request • Send email • Create and send reports • Send chat message
  21. GitHub Actions Structure of action configuration • Name • Description

    • 0..n inputs (parameters) • 0..n outputs (result values) • Type and environment
  22. GitHub Actions Types • Docker container actions • JavaScript actions

    • Composite actions
  23. Docker container actions

  24. Docker container actions • Only supports Linux containers • A

    complete environment is included with the action • No access to the file system • Easy to test locally • Slower than the other action types • Input values have to be forwarded to the container • Output values have to be set using terminal commands
  25. Docker container actions Configuration # action.yml name: Hello World description:

    Greet someone and record the time inputs: who-to-greet: # id of input description: Who to greet required: true default: World outputs: time: # id of output description: The time we greeted you runs: using: docker # 👈 image: Dockerfile # 👈 args: - ${{ inputs.who-to-greet }}
  26. Docker container actions Configuration # action.yml name: Hello World description:

    Greet someone and record the time inputs: who-to-greet: # id of input description: Who to greet required: true default: World outputs: time: # id of output description: The time we greeted you runs: using: docker image: Dockerfile args: - ${{ inputs.who-to-greet }} # 👈 Input
  27. Docker container actions Container image # Container image that runs

    your code FROM alpine:3.10 # Copies your code file from your action repository to the # filesystem path `/` of the container COPY entrypoint.sh /entrypoint.sh # Code file to execute when the OCI container starts up # (`entrypoint.sh`) ENTRYPOINT ["/entrypoint.sh"]
  28. Docker container actions Container script #!/bin/sh -l echo "Hello $1"

    # 👈 Input time=$(date) echo "::set-output name=time::$time" # 👈 Output
  29. JavaScript actions

  30. JavaScript actions • Node.js • NPM packages • Access to

    the file system of the workflow job • Is locally testable using environment variables • INPUT_<INPUT_NAME>=<VALUE> • Direct access to input and output values • Faster than Docker container actions • Faster than composite run steps calling Node.js scripts • Dated Node.js version (12.x)
  31. JavaScript actions Actions toolkit • @actions/artifact: Build artifacts • @actions/cache:

    Caching dependencies and build outputs • @actions/core: Input and output values, logging, and secrets • @actions/exec: Process management • @actions/io: File system I/O • @actions/github: GitHub metadata (Octokit client)
  32. JavaScript actions Configuration name: Hello World description: Greet someone and

    record the time inputs: who-to-greet: # id of input description: Who to greet required: true default: World outputs: time: # id of output description: The time we greeted you runs: using: node12 # 👈 main: index.js # 👈
  33. Composite actions

  34. Composite actions • 1..n run or action steps • No

    access to the file system • Can be combined with terminal scripts or arbitrary programs • Can be combined with scripts in programming languages that are executable from the command line • Difficult to use input and output values • Can run Node.js scripts using recent versions • Allows reuse of common actions and parameters across workflows
  35. Composite actions Configuration name: Hello World description: Greet someone inputs:

    who-to-greet: # id of input description: Who to greet required: true default: World outputs: random-number: description: Random number value: ${{ steps.random-number-generator.outputs.random-id }} runs: using: composite # 👈 steps: # 👈 - run: echo Hello ${{ inputs.who-to-greet }}. shell: bash - id: random-number-generator run: echo "::set-output name=random-id::$(echo $RANDOM)" shell: bash - run: ${{ github.action_path }}/goodbye.sh shell: bash
  36. Composite actions Parameters name: Hello World description: Greet someone inputs:

    who-to-greet: # id of input description: Who to greet required: true default: World outputs: random-number: description: Random number value: ${{ steps.random-number-generator.outputs.random-id }} runs: using: composite steps: - run: echo Hello ${{ inputs.who-to-greet }}. # 👈 Input shell: bash - id: random-number-generator run: echo "::set-output name=random-id::$(echo $RANDOM)" # 👆 Output shell: bash - run: ${{ github.action_path }}/goodbye.sh shell: bash
  37. Composite actions Action reuse name: Publish container description: Pushes build

    artifacts to container registry inputs: registry-username: description: Username for image registry required: true registry-password: description: Password for image registry required: true runs: using: composite steps: - uses: docker/setup-buildx-action@v1 - uses: docker/login-action@v1 with: username: ${{ inputs.registry-username }} password: ${{ inputs.registry-password }} - uses: docker/build-push-action@v2 with: context: . push: true tags: user/app:latest
  38. Demo github.com/LayZeeDK/github-actions-angular

  39. Conclusion

  40. GitHub Actions and workflows • Workflows • CI/CD workflows on

    GitHub runners • Event-driven workflows, for example triggered by web hook, PR, commit, tag, release, or comment • Shared steps through reusable workflows or composite actions • Actions • 3rd party actions on GitHub Marketplace • Custom actions
  41. GitHub workflows • Built-in triggers • Push commit • Pull

    request • Manual trigger • Timer • Web hook • GitHub triggers • Tag • Release • Deployment • Actionflows • RSS • Slack • Twitter • YouTube
  42. GitHub Actions • Docker container actions • JavaScript actions •

    Composite actions
  43. Get in touch 👐 Lars Gyrup Brink Nielsen 🐦 @LayZeeDK

  44. None