GiitHub Action의 공통 동작을 제거하여 간단하게 유지

22649 단어 GitHub Actionstech
안녕하세요.스타데이 주식회사예요.
그렇다면 여러분은 GiitHub Action을 사용하고 계십니까?당사의 대부분의 프로젝트는 GiitHub Action을 충분히 활용하고월별 WinSession 지적재산권을 공유했습니다.
GiitHub Actions가 좋은 곳은 활동의 유연성이라고 생각해요.이를 통해 GUI에서의 작업을 떠올리며 활동을 직관적으로 연결해 Workflow를 만들 수 있다.그럼에도 불구하고 워커플로우가 늘어나면서 복제품으로 다른 워커플로우를 가져와 필요한 스텝을 고쳤을까.
이에 따라 이번에는 워크플로우의 유지보수성을 높이기 위해 스텝의 공통화를 조사했다.
그나저나 이번 설명 때 기릿허브에 샘플을 준비했어요.참고해주세요.
https://github.com/TakahashiIkki/gha-standardization-sample

샘플 전제 설명

  • GiitHub Pages를 이용한 정적 웹 사이트 관리
  • 기술창고
  • Next.js

  • Static HTML Export 기능을 통해 출력된 HTML, CSS, JS GitHub Pages를 사용하여 호스트
  • 아래 Workflow 2개 만들기
  • 모든 Push 이벤트에서linter를 착용하고 build을 시도합니다(보통test도 이동합니다)
  • 규칙 위반 시 NG
  • 이하,main.yml로 설명
  • main 분기에 대한 Push(PR 통합)에서 GiitHub Pages로 설계
  • 이하, deploy.yml로 설명
  • GiitHub Actions에서 흔히 볼 수 있는 구성의 하나로, Push 활동에서test/linter가 실행되고main 지점의Push에서 depro를 진행하는 형식이다.

    일반적인 Workflow 설정


    일반main.yml


    모든 Push 이벤트에서 linter를 걸면 다음과 같은 내용을 쓸 수 있습니다.
    참고로 전제는 package.jsonscript"lint": "next lint"를 미리 설정한 것이다."build": "next build" 등지.js 동작의 환경을 조정한 후 각자의 지령을 집행함으로써 기대하는 동작을 얻을 수 있다.
    일반main.yml(클릭하여 확장)
    name: Main
    
    on:
      push:
    
    jobs:
      build_and_test:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
    
          - uses: actions/setup-node@v2
            with:
              node-version: "16"
    
          - name: Install dependencies
            run: npm ci
    
          - name: Check lint
            run: npm run lint
    
          - name: Run build
            run: npm run build
    

    일반적인 deploy.yml


    main 지점에 대한 Push 활동에서 depro 처리를 하는 경우 다음과 같은 내용을 쓸 수 있습니다.
    Static HTML Export 기능npm ci을 사용하여 디렉토리에서 export를 수행한 후 out을 사용하여 디렉토리를 추출합니다.(패키지.json의scripts에서 peaceiris/actions-gh-pages로 정의한다고 가정합니다.)
    https://github.com/peaceiris/actions-gh-pages
    일반적인 deploy.yml(클릭하여 확장)
    name: Deploy to GitHub Pages
    
    on:
      push:
        branches:
          - main
    
    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
    
          - uses: actions/setup-node@v2
            with:
              node-version: "16"
    
          - name: Install dependencies
            run: npm ci
    
          - name: Check lint
            run: npm run lint
    
          - name: Run build
            run: npm run build
    
          - name: Static HTML Export
            run: npm run export
    
          - name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./out
    
    다음은 주제 밖의 말로, 이번"export": "next export"은Workflow를 촉발시켰다.본래의 업무로 눈을 돌리면 보통 메인 지점에서 PR을 하고 평론을 통해 합병하는 절차를 취한다.mainブランチへのpushイベント는 촉발하고 싶은 곳이지만 실제로는 GiitHub Actions에서는 촉발할 수 없다mainブランチへのPRがマージされた時.그걸 하려면 다음 중 하나를 해야 해.
  • 모드 1
  • GiitHub의 Branch protection rules에서 Pull Request를 통해main 분기에 Push를 하는 것을 금지한다.
  • main 지점의 ブランチへのPRがマージされた時 이벤트를 트리거하여Workflow를 실행합니다.
  • 모드 2
  • main 지점에 대한 PR이 닫혔을 때 Workflow를 터치합니다 (PR 합병이라도 이벤트 처리로 합니다)
  • 실행 시push, 합병 이외에 Workflow 종료
  • 모드 2의 예제(클릭하여 확장)
    pull_request:
    branches:
      - main
    types: [closed]
    jobs:
      sample:
        runs-on: ubuntu-latest
        if: github.event.pull_request.merged == true
        steps:
          - name: checkout
            uses: actions/[email protected]
    
    이번에 모델 1을 실시했다.

    시선을 공통적인 부분으로 돌리다


    위 코드에는 다음 이미지와 같이 여러 공통 Step이 있습니다.
    共通部分のdiff画像 if: github.event.pull_request.merged == true/npm ci/npm run lint 이 일대의 Step을 통합하여 공통화하다.(실제로는 공통화된 부분이 많고, 이후 공통화된 규제와 주의사항에 보완할 예정입니다.)

    코드의 통용화


    공통 부분의 재단


    코드의 공통화는 npm run build 등으로 불린다.다음은 공식 문서의 참고 내용입니다.
  • https://docs.github.com/ja/actions/creating-actions/about-custom-actions#choosing-a-location-for-your-action
  • https://docs.github.com/ja/actions/creating-actions/creating-a-composite-action
  • https://docs.github.com/ja/actions/creating-actions/metadata-syntax-for-github-actions#runs-for-composite-actions
  • 문서에서yaml 파일은 임의의 위치에 놓을 수 있지만 제약으로yaml 파일은 파일 이름Composite action 또는action.yml이어야 한다.
    공식 문서에서는 action.yaml 디렉터리에 각 동작을 준비하는 디렉터리를 설정하는 방법을 소개했다.
    아마 ./.github/actions/ 이런 느낌일 거예요.
    그럼, 실제yaml에 관해서는 어느 정도의 지정 문법이 있습니다.
    일반적인 Workflow./github/actions/{Action名}/action.yml에서 각 Step가 기술한 곳jobs.[*].steps의 기술법으로 step를 기술한다.
    또한 runs.[*].steps와 각 단계의 using: "composite"를 지정해야 한다.
    셸이 지정한 필요한 이유를 찾을 수 없습니다.어떤 OS로 움직이는지는 호출자의 Workflows가 알고 있고, Composite action은 알 수 있는 방법이 없어 지정이 필요하다고 생각합니다.
    runs:
      using: "Composite"
      steps:
        - name: Install dependencies
          run: npm ci
          shell: bash
    
        - name: Check lint
          run: npm run lint
          shell: bash
    
        - name: Run build
          run: npm run build
          shell: bash
    

    공통 섹션 읽기


    읽기는 복사 경로에서 지정한 상대 경로입니다. 액션을 먼저 하십시오.yml가 놓인 디렉터리의 위치를 지정한 다음 읽습니다.
    정해진 방법대로 지정하지 않으면shell 이렇게 처리되고 외부의 third party 동작을 찾을 수 있으니 주의해야 한다.
  • main.yml
  • name: Main
    on:
      push:
    jobs:
      build_and_test:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
    
          - uses: actions/setup-node@v2
            with:
              node-version: "16"
    
          - name: Initialize
            uses: ./.github/actions/build
    
  • deploy.yml
  • name: Deploy to GitHub Pages
    
    on:
      push:
        branches:
          - main
    
    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
    
          - uses: actions/setup-node@v2
            with:
              node-version: "16"
    
          - name: Initialize
            uses: ./.github/actions/build
    
          - name: Static HTML Export
            run: npm run export
    
          - name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./out
    
    어느 정도의 공통화 결과를 얻었다.

    공통화의 제약


    if 구문 지원


    편리한 Composite action 기능이지만 제약 조건으로 지원되지 않습니다actions/checkout@v2.
    솔직히 말하면 저는if문법이 없어서 자유롭게 사용할 수 없어요. 지원이 있으면 내부 스크립트의 미세조정이 도움이 될 거예요.
    2021-01-18 보충
    비록 평론에서 이미 보충을 했지만, 지금은 이미if문법을 지지한다.Shunsuke Suzuki씨, 감사합니다.
    슈키슈키의 댓글.
    공식 문서

    공동화할 수 없는 곳

    if構文는 공통화로 제시할 수 없다.
    Composite action은 checkkout 액션에 따른 것이라고 한다.

    - uses: actions/checkout@v2문법 지원


    https://github.blog/changelog/2021-08-25-github-actions-reduce-duplication-with-action-composition/
    지난해 8월 지지를 받았다.이번에는 setup-node가 공통화에 포함되지 않은 느낌이 든다.js 설정은 Composite action에도 포함될 수 있습니다.
    runs:
      using: "composite"
      steps:
        - uses: actions/setup-node@v2
          with:
            node-version: "16"
    
        - name: Install dependencies
          run: npm ci
          shell: bash
    
        - name: Check lint
          run: npm run lint
          shell: bash
    
        - name: Run build
          run: npm run build
          shell: bash
    

    매개변수 지원


    Composite action에 변수를 use 형식으로 전달할 수도 있습니다.예를 들면 이런 느낌.
    inputs:
      node_version:
        description: "setup node-version"
        required: true
    runs:
      using: "composite"
      steps:
        - uses: actions/setup-node@v2
          with:
            node-version: ${{inputs.node_version}}
    

    Context 지원


    https://docs.github.com/ja/actions/learn-github-actions/contexts
    물론 지원inputsgithubコンテキスト.

    총결산

  • GiitHub Actions에서 공통 step를 외부에 모아 Composite action으로 정의할 수 있습니다.
  • uses 문법을 사용하여 복합 경로의 상대 경로에서 창고의 임의의 디렉터리를 읽을 수 있습니다.
    하지만 파일 이름은 action입니다.반드시 yml가 필요합니다.
  • envコンテキスト
  • 기본적으로 일반적인 Workflow와 같은 상하문을 지원한다
  • 이 기사를 읽은 사람이 더 나은 기릿허브 액션으로 살 수 있었으면 좋겠어요.
    이상, 스타데이 엔지니어가 보냈습니다!

    [PR] 엔지니어 모집


    우리는 스타데이에서 엔지니어에 대해 칭찬을 아끼지 않았다../github/actions/{Action名}/action.yml 우리 삶과 떼려야 뗄 수 없는 관계 영역에 관한 문제를 기술로 해결할까?
    자세한 내용은 이쪽을 보세요!
    https://stafes.notion.site/stafes/d0996a00d77d418280982797c7e16001

    좋은 웹페이지 즐겨찾기