목차

개요
Composite Action란
중복 코드가 있는 GitHub Action 예제
Composite Action 만들기
Composite Action 사용하기
Composite Action의 inputs
Composite Action의 outputs
완료

개요

GitHub Actions를 사용하다보면 여러 Action에서 공통으로 사용하는 부분이 있을 수 있습니다. 이때 Composite Action를 사용하면 공통으로 사용하는 부분을 하나의 Action로 만들어서 재사용성을 높일 수 있습니다.

이번 블로그 포스트에서는 Composite Action를 사용하여 GitHub Action의 재사용성을 높이는 방법에 대해서 알아보겠습니다.

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: 'variable_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을 사용하여 값을 전달할 수 있습니다.

Composite Action의 outputs를 사용하기 위해 Composite Action을 다음과 같이 수정합니다.

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

outputs를 사용하면 Composite Action의 실행 결과물을 활용하는 Action를 만들 수 있습니다.

완료

이것으로 Composite Action를 사용하여 GitHub Actions의 중복을 제거하고 Action의 재사용성을 높이는 방법에 대해서 알아보았습니다.

여러분도 혹시 중복되는 Action이 있다면 Composite Action을 사용하여 Action의 재사용성을 높여보시기 바랍니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

[GitHub Actions] Composite Action를 사용하여 GitHub Actions 중복 제거하기

댓글