Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
- Angular Community Meetup, March 2022

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

Lars Gyrup Brink Nielsen

November 09, 2021
Tweet

More Decks by Lars Gyrup Brink Nielsen

Other Decks in Programming

Transcript

  1. GitHub Actions and
    workflows
    Angular Community Meetup

    View Slide

  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
    • Actions by GitHub
    • 3rd party actions on GitHub Marketplace
    • Custom actions

    View Slide

  3. GitHub workflows

    View Slide

  4. GitHub workflows
    name: CI
    on:
    pull_request: {}
    push:
    branches:
    - main
    jobs:
    build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - uses: actions/[email protected]
    - name: Set up Node.js
    uses: actions/[email protected]
    with:
    node-version: 16.x
    cache: yarn
    - name: Install dependencies
    run: yarn install
    - name: Build
    run: yarn build

    View Slide

  5. GitHub workflows
    Structure of workflow configuration
    • Name
    • Triggers
    • Environment variables
    • 1..n jobs

    View Slide

  6. 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

    View Slide

  7. GitHub workflows
    Built-in triggers
    • Git branch
    • Git tag
    • GitHub release
    • GitHub project
    • Deployment
    • GitHub wiki

    View Slide

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

    View Slide

  9. GitHub workflows
    Actionsflow triggers
    • Instagram
    • Reddit
    • Slack
    • Telegram
    • Trello
    • Twitter
    • Typeform
    • YouTube

    View Slide

  10. GitHub workflows
    Jobs
    • Image
    • Ubuntu
    • Windows Server
    • macOS
    • Linux container image
    • Environment variables
    • 1..n steps
    • Job dependencies
    • 0..n output values

    View Slide

  11. GitHub workflows
    Jobs
    jobs:
    build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - uses: actions/[email protected]

    View Slide

  12. GitHub workflows
    GitHub action steps
    • Local or remote path
    • Version, tag, branch, or commit
    • Optional inputs (parameters)
    • Optional outputs (result values)
    • Optional name

    View Slide

  13. GitHub workflows
    GitHub action steps
    jobs:
    build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - uses: actions/[email protected]
    - name: Set up Node.js
    uses: actions/[email protected] # 👈
    with:
    node-version: 16.x # 👈
    cache: yarn # 👈
    - name: Install dependencies
    run: yarn install
    - name: Build
    run: yarn build

    View Slide

  14. GitHub workflows
    Run steps
    • Shell
    • OS-specific (default)
    • Bash (bash)
    • PowerShell (powershell)
    • PowerShell Core (pwsh)
    • Working directory
    • Terminal command
    • Optional name

    View Slide

  15. GitHub workflows
    Run steps
    jobs:
    build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - uses: actions/[email protected]
    - name: Set up Node.js
    uses: actions/[email protected]
    with:
    node-version: 16.x
    cache: yarn
    - name: Build
    run: yarn build # 👈

    View Slide

  16. GitHub workflows
    Conditions
    • Job-level
    • Step-level

    View Slide

  17. GitHub workflows
    Conditions
    jobs:
    lint:
    name: Lint
    if: ${{ github.event_name == 'pull_request' }} # 👈
    runs-on: ubuntu-latest
    steps:
    - uses: actions/[email protected]
    - name: Set up Node.js
    uses: actions/[email protected]
    with:
    node-version: 16.x
    cache: yarn
    - name: Lint
    run: yarn lint

    View Slide

  18. 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/[email protected]
    with:
    username: ${{ inputs.username }}
    token: ${{ secrets.token }}

    View Slide

  19. 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 }}

    View Slide

  20. GitHub Actions

    View Slide

  21. 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

    View Slide

  22. GitHub Actions
    Structure of action configuration
    • Name
    • Description
    • 0..n inputs (parameters)
    • 0..n outputs (result values)
    • Type and environment

    View Slide

  23. GitHub Actions
    Types
    • Docker container actions
    • JavaScript actions
    • Composite actions

    View Slide

  24. Docker container actions

    View Slide

  25. 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 are accessible as environment variables
    • Output values have to be set using terminal commands

    View Slide

  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 # 👈

    View Slide

  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"]

    View Slide

  28. Docker container actions
    Container script
    #!/bin/sh -l
    echo "Hello $INPUT_WHO_TO_GREET" # 👈 Input
    time=$(date)
    echo "::set-output name=time::$time" # 👈 Output

    View Slide

  29. JavaScript actions

    View Slide

  30. JavaScript actions
    • Node.js
    • NPM packages
    • Access to the file system of the workflow job
    • Is locally testable using environment variables
    • INPUT_=
    • Direct access to input and output values
    • Faster than Docker container actions
    • Faster than composite run steps calling Node.js scripts
    • Support Node.js versions 12 and 16

    View Slide

  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)

    View Slide

  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: node16 # 👈
    main: index.mjs # 👈

    View Slide

  33. Composite actions

    View Slide

  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
    • Output values are set using a special terminal command
    • Allow reuse of common actions and parameters across
    workflows

    View Slide

  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

    View Slide

  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

    View Slide

  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/[email protected]
    - uses: docker/[email protected]
    with:
    username: ${{ inputs.registry-username }}
    password: ${{ inputs.registry-password }}
    - uses: docker/[email protected]
    with:
    context: .
    push: true
    tags: user/app:latest

    View Slide

  38. Demo
    github.com/LayZeeDK/github-actions-angular

    View Slide

  39. Conclusion

    View Slide

  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
    • Actions by GitHub
    • 3rd party actions on GitHub Marketplace
    • Custom actions

    View Slide

  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

    View Slide

  42. GitHub Actions
    • Docker container actions
    • JavaScript actions
    • Composite actions

    View Slide

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

    View Slide

  44. View Slide