GitHub 작업을 사용하여 프런트엔드에 CI를 추가하는 방법 - NuxtJS 사례 연구

알바 실빈트💃🏼

이번 주에 내가 어떻게 IS를 자동화했는지 알려주고 싶어!MYBUG 프로젝트.이 문서에서는 간단한 워크플로우를 통해 GitHub 작업을 사용하여 CI를 만드는 방법을 설명합니다.🤗나는 네가 좋아하기를 바란다. 나는 너의 의견을 알고 싶다💜 dawntraoz.com/blog/how-to-ad…
18:2020년 8월 26일 오후 15시
이 글에서 GitHub 작업의 도움으로 지속적인 통합이 얼마나 쉬운지 보여드리고 싶습니다.

소개

우리가 시작하기 전에 우리가 댓글에서 토론할 개념을 되돌아보는 것이 가장 좋다.

지속적인 통합

지속적인 통합(CI)은 개발 실천으로 개발자들이 코드를 공유 저장소에 자주 통합한다.이상적인 상황은 모든 통합(합병)은 자동 구축과 테스트를 통해 검증할 수 있다는 것이다.

GitHub 작업 및 GitHub 워크플로우

GitHub 작업은 코드 https://github.com/을 저장하는 동일한 위치에서 소프트웨어 개발 워크플로우를 자동으로 실행할 수 있도록 도와줍니다.요청과 문제에 대한 협업도 가능하다.이러한 기능을 사용하면 저장소에 직접 포괄적인 CI 및 CD(Continuity Development) 기능을 구축할 수 있습니다.
자신의 작업을 만들거나 사용자 정의 커뮤니티와 공유하는 작업을 사용할 수 있습니다. marketplace을 참조하십시오.
워크플로우는 사용자 정의 자동화 프로세스로 단일 작업(작업)의 조합으로 저장소에 설정하여 프로젝트를 구축, 테스트, 포장, 발표 또는 배치할 수 있습니다.
워크플로우를 설정하려면 저장소에 YAML 파일을 만들고 push To master와 같은 작업을 수행할 시기를 정의해야 합니다.
나는 지금 개원 프로젝트를 만들고 있기 때문에, 우리가 합작을 시작할 때, 일할 수 있는 CI가 매우 중요하다.왜?그러면 우리는 모두 같은 표준과 준칙을 사용할 것이다. 이런 조건을 통과해야만 우리의 코드를 집적할 수 있기 때문이다.
그러나 나도 그것을 설정하는 것이 얼마나 쉬운지 본 후에 지금부터 나는 나의 모든 프로젝트에서 그것을 사용할 계획이라고 말해야 한다.나는 네가 이 문장을 완성한 후에도 같은 느낌을 가질 수 있기를 바란다💜

프로젝트 준비

작업 흐름을 설정하고 우리가 연속적인 통합 과정을 자동화하기 위해서는 먼저 프로젝트에서 실행할 조작을 준비해야 한다.
내 예에서, 나는 ESLint에서 설정한 규칙과 Jest의 단원 테스트가 모든 통합에서 통과되는지 확인하고 싶다.이를 위해, 나는 가방에 다음 스크립트를 만들었다.json:

"lint": "eslint --ext .js, .vue --ignore-path .gitignore ."
"test:unit": "jest"

또한 프로젝트가 다른 운영체제에서 작동하는지 확인하고 싶을 때 추가해야 합니다.운영체제와의 줄 바꾸기 형식이 호환되지 않도록 gitattributes 파일을 내 프로젝트에 가져옵니다.

# Enforce Unix newlines
* text=auto eol=lf

자체 워크플로우 설정

본문에 대해 나는 Is를 설명할 것이다!MyBug 구성은 NuxtJS에서 수행되지만 동일한 환경 (노드) 에서 구축된 모든 JavaScript 프로젝트에 적용될 수 있습니다.
YAML 파일 생성을 시작하려면 다음과 같은 두 가지 옵션이 있습니다.

1 - GitHub 저장소로 이동하여 Actions 탭을 클릭하면 워크플로우 제안이 표시되어 시작할 수 있습니다.가장 적합한 항목을 선택하고 "이 워크플로우 설정"단추를 누르십시오.

2 - 라는 폴더를 만듭니다.github 및 워크플로우 폴더를 추가합니다.CI 또는 선택한 YAML 파일을 작성합니다.

Both options will end with a YAML file in the path .github/workflows/CI.yml.

CI 구성부터 시작하겠습니다.yml 파일.
먼저 이름을 지정하고 워크플로우가 실행될 이벤트를 선택해야 합니다.

# Name your workflow
name: CI

# Set on which events you want run the actions.
# In this case the workflow will run on push for master and on pull request for master and develop branches
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master, develop ]

PR을 파악하거나 개발할 때마다 실행되는 워크플로우는 하나 이상의 순차적 또는 병렬 실행이 가능한 작업으로 구성됩니다.
workflow job은 같은 실행 프로그램에서 실행되는 단계이고 runner은 GitHub가 우리의 실행 작업에 제공하는 위탁 관리 가상 환경이다.

Although it also gives us the possibility of doing so in our own self-hosted environment.

같은 노드 버전으로 다른 운영체제 (Windows, Linux, MacOS) 에서 프로젝트를 실행하고 싶을 때, 나는 strategy을 사용했는데, 이것은 작업을 위한 구축 행렬을 만들었다.

jobs:
  # This workflow contains a job called "integration"
  integration:
        # A strategy that defines different variations of an environment to run each job in.
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        node: [12]
    # The runners that the job will run on
    runs-on: ${{ matrix.os }}

일단 우리가 주자를 설치하면 집적 작업에서 지켜야 할 절차를 정의할 수 있다.
step은 저장소에서 명령을 실행하거나 설치 작업을 실행하거나 작업을 실행할 수 있습니다.각 단계에서 다음과 같은 속성을 정의합니다.

이름, GitHub

에 표시

실행할 작업을 사용, 지정하고 전송 작업

에 정의된 키/값 쌍을 사용합니다.

만약 단계 운행을 방지하기 위해 조건

을 만족시키지 않으면

run, 운영체제 케이스

에서 명령 실행
전에 말씀드렸듯이 ESLint 설정이 예상대로 충족되었는지, 단원 테스트가 통과되었는지 확인하고 싶습니다.구현에 필요한 단계를 살펴보겠습니다.

우선 노드를 설정해야 합니다.js.

노드를 추가합니다.js가 내 환경에서 setup-node을 사용했고 GitHub 검증을 통해 노드 버전과 우리가 위에서 본 행렬에서 정의한 매개 변수 node를 전달했다.

So when we have to change the node version we have to do it only in one place.

노드가 구축되면 워크플로우가 저장소에 접근할 수 있어야 합니다. 이를 위해 checkout을 사용합니다.

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:
        - name: Setup Node.js environment
          uses: actions/[email protected]
          with:
            node-version: ${{ matrix.node }}

        - name: Checkout master branch
          uses: actions/checkout@v2

그럼 npm 의존항

을 설치하겠습니다.
의존항을 설치하려면 npm 설치 명령을 실행하는 절차를 추가하십시오.
단, 우리는 효과적인 방식으로 조작하기를 원하기 때문에, node\u 모듈에 캐시를 추가합니다.이를 위해 캐시할 폴더 경로 (node\u 모듈) 와 캐시를 복구하고 저장하는 데 사용할 현식 키 (package lock.json) 를 지정하는 cache 동작을 추가했습니다.
단계에서 사용할 수 있는 if 조건을 사용하면 이 캐시 작업의 출력 (캐시 적중 - 일치하는 키를 나타내는 부울 값) 이true 또는false인지 확인하고 명령을 계속하거나 피할 수 있습니다.

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:

        # ... Before steps ...

        - name: Cache node_modules
          uses: actions/[email protected]
          with:
            # A list of files, directories, and wildcard patterns to cache and restore
            path: node_modules
            # An explicit key for restoring and saving the cache
            key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}

        - name: Install dependencies
          if: steps.cache.outputs.cache-hit != 'true'
          run: npm install

        # ... After steps ...

ESLint 및 유닛 테스트 검사

이번에는 명령을 사용하면 ESLint와 테스트가 올바르게 통과될 수 있습니다.
우리는 명령을 실행하기 위한 절차를 만들 것입니다: npmrunlint, 그리고: npmruntest:unit를 위한 절차를 만들 것입니다. 만약 오류를 내거나 명령을 실행하지 않는다면, 모든 단계는 부정하거나 긍정적인 답을 제시할 것입니다.
그 밖에 테스트를 진행할 때, 우리는 우리가 실현한 코드 커버율을 특별히 기쁘게 보여 주었다.이것이 바로 우리가 동작을 사용하는 이유: codecov/codecov-action.이를 사용함으로써 https://www.codecov.io/ 사이트는 우리의 요청의 역사 기록과 커버 범위의 증가 또는 감소를 가져올 것이다.또한 readme.md에 덮어쓰기를 표시하고 다음을 추가할 수 있습니다.

  <img src="[https://codecov.io/gh/](https://codecov.io/gh/)<GitHub_name>/<GitHub_repo>/branch/master/graph/badge.svg?token=<your_token>" />

다음과 같이 취급됩니다.

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:

        # ... Before steps ...

        - name: Run ESLint
          run: npm run lint

        - name: Run unit tests
          run: npm run test:unit

        - name: Code coverage
          uses: codecov/[email protected]

워크플로의 모든 부분을 개별적으로 볼 수 있는 경우 전체 CI를 여기에 저장합니다.모든 항목에서 사용할 수 있도록 yml 파일!

# Name your workflow
name: CI

# Set on which events you want run the actions.
# In this case the workflow will run on push for master and on pull request for master and develop branches
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master, develop ]

jobs:
  # This workflow contains a job called "integration"
  integration:
        # A strategy that defines different variations of an environment to run each job in.
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        node: [12]
    # The runners that the job will run on
    runs-on: ${{ matrix.os }}

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - name: Setup Node.js environment
        uses: actions/[email protected]
        with:
          node-version: ${{ matrix.node }}

      - name: Checkout master branch
        uses: actions/checkout@v2

      - name: Cache node_modules
        uses: actions/[email protected]
        with:
          # A list of files, directories, and wildcard patterns to cache and restore
          path: node_modules
          # An explicit key for restoring and saving the cache
          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}

      - name: Install dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run unit tests
        run: npm run test:unit

      - name: Code coverage
        uses: codecov/[email protected]

나는 이것이 도움이 되기를 바란다. 너는 이 직위를 떠나서 새로운 것을 배우지 마라.읽어주셔서 감사합니다. 궁금한 게 있으면 저에게 물어보세요.

If you want to use more badges as the one for the coverage, check this website: https://badgen.net/ (it's amazing!)