[GitHub Actions] Composite Actionを使ってGitHub Actionsの重複を減らす

概要

GitHub Actionsを使って開発をする際にActionで共通で使う部分が出てくることがあります。この時、Composite Actionを使うと共通で使う部分を一つのActionにまとめて再利用性を高めることができます。

このブログポストではComposite Actionを使ってGitHub Actionsの再利用性を高める方法について紹介します。

Composite Actionとは

Composite Actionは複数のActionを一つのActionにまとめて使うことができる機能です。Composite Actionを使うと複数のActionで共通で使う部分を一つのActionにまとめて再利用性を高めることができます。

公式ドキュメント: Composite Action

重複コードがあるGitHub Actionの例

Reactを使うプロジェクトで次のようなGitHub Actionsを使うことができます。

name: 'Check code'

on:
  pull_request:

jobs:
  cspell:
    name: CSpell
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20.3.0
      - name: Enable Yarn 3.7.0
        run: corepack enable
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: CSpell
        run: yarn cspell
  remark:
    name: Remark-lint
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20.3.0
      - name: Enable Yarn 3.7.0
        run: corepack enable
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Remark-lint
        run: yarn remark
  eslint:
    name: ESLint
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20.3.0
      - name: Enable Yarn 3.7.0
        run: corepack enable
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: ESLint
        run: yarn lint
  stylelint:
    name: Stylelint
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20.3.0
      - name: Enable Yarn 3.7.0
        run: corepack enable
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Stylelint
        run: yarn stylelint
  test:
    name: Test
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20.3.0
      - name: Enable Yarn 3.7.0
        run: corepack enable
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Test
        run: yarn test

ReactプロジェクトでCSpellと複数のLinterとTestを実行するGitHub Actionsです。ここでDependenciesをインストールする部分が重複していることが分かります。

      ...
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version: 20.3.0
      - name: Enable Yarn 3.7.0
        run: corepack enable
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      ...

この部分をComposite Actionを使って一つのActionにまとめて再利用する方法について見ていきます。

Composite Actionを作る

Dependenciesをインストールする部分をComposite Actionにするために.github/actions/install-dependencies.ymlファイルを作成して次のように修正します。

name: 'Install Dependencies'
description: 'Install Dependencies'

runs:
  using: 'composite'
  steps:
    - name: Setup node
      uses: actions/setup-node@v4
      with:
        node-version: 20.3.0
    - name: Enable Yarn 3.7.0
      shell: bash
      run: corepack enable
    - name: Install dependencies
      shell: bash
      run: yarn install --frozen-lockfile

Composite Actionを使うためにはusingキーワードにcompositeを使ってComposite Actionであることを明示します。そしてstepsにComposite Actionを実行するステップを記述します。

コマンドを実行する際にはshellキーワードにbashを使ってbashシェルを使うように設定する必要があります。

Composite Actionを使う

Composite Actionを使うためにはGitHub Actionsを次のように修正します。

name: 'Check code'

on:
  pull_request:

jobs:
  cspell:
    name: CSpell
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/install_dependencies
      - name: CSpell
        run: yarn cspell
  remark:
    name: Remark-lint
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/install_dependencies
      - name: Remark-lint
        run: yarn remark
  eslint:
    name: ESLint
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/install_dependencies
      - name: ESLint
        run: yarn lint
  stylelint:
    name: Stylelint
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/install_dependencies
      - name: Stylelint
        run: yarn stylelint
  test:
    name: Test
    runs-on: ubuntu-latest
    timeout-minutes: 30
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/install_dependencies
      - name: Test
        run: yarn test

공통으로 분리한 Composite Action을 다음과 같이 사용하도록 수정하였습니다.

      ...
       - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install dependencies
        uses: ./.github/actions/install_dependencies
      ...

Composite Action는 .githubフォルダで管理しているため、actions/checkoutを使ってコードを先にチェックアウトする必要があります。その後、usesキーワードにComposite Actionのパスを記述してComposite Actionを使えます。

Composite Actionのinputs

Composite Actionを使う際、特定の値を渡してActionを実行したい場合があります。この場合、Composite Actionのinputsを使って値を渡すことができます。

Composite Actionのinputsを使うため、Composite Actionを次のように修正します。

name: 'Composite Action with inputs'
description: 'Composite Action with inputs'
inputs:
  variable_name:
    description: 'Description of the variable'
    required: true
    default: 'variabel_default_value'
runs:
  using: 'composite'
  steps:
    - name: Print Composite Action inputs variable
      run: echo ${{ inputs.variable_name }}
      shell: bash

このinputsを使うと条件によって異なる動作をするComposite Actionを作成することができます。

このように作ったComposite Actionは次のように使ってComposite Actionのinputsを使うことができます。

      ...
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Composite Action with inputs
        uses: ./.github/actions/composite_action
        with:
          variable_name: 'test_input_value'
      ...

Composite Actionのoutputs

Composite Actionを使う際、Composite Actionから特定の値を受け取ってActionを実行したい場合があります。この場合、Composite Actionのoutputsを使って値を渡すことができます。

name: 'Composite Action with outputs'
description: 'Composite Action with outputs'
outputs:
  variable_name:
    description: "variable description"
    value: ${{ steps.output_step.outputs.output_variable_name }}
runs:
  using: 'composite'
  steps:
    - name: Set outputs
      id: output_step
      run: echo "output_variable_name=test_output_value" >> $GITHUB_OUTPUT
      shell: bash

このように作ったComposite Actionは次のように使ってComposite Actionのoutputsを使うことができます。

      ...
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Composite Action with outputs
        id: composite_action
        uses: ./.github/actions/composite_action
      - name: Print Composite Action outputs variable
        run: echo ${{ steps.composite_action.outputs.variable_name }}
      ...