Rush monorepo 및 React로 확장 가능한 프론트엔드 구축 — Github Actions + Netlify

TL;DR

코드를 보고 싶다면 여기에서 찾을 수 있습니다. https://github.com/abereghici/rush-monorepo-boilerplate

실제 대규모 프로젝트에서 Rush가 사용된 예를 보고 싶다면 Bentley Systems에서 개발한 오픈 소스 프로젝트인 ITwin.js을 볼 수 있습니다.


Netlify을 사용하면 빌드 명령을 사용하여 대시보드에서 직접 프로젝트 배포를 구성할 수 있습니다. 이것은 당신이 가지고있을 때 잘 작동합니다.
프로젝트를 단일 저장소에 저장하고 자주 배포할 필요가 없습니다. 그들은 300분의 무료 빌드를 포함하는 무료 계획을 제공합니다. 반면에 Github Actions는 더 유연하며 2000분의 무료 빌드를 제공합니다. 또한 "테스트", "린팅", "배포"등과 같은 다양한 작업을 실행할 수 있습니다.

Netlify 사이트 만들기

Netlify에 아직 계정이 없으면 계정을 만들고 새 사이트를 만드십시오.

프로젝트 설정으로 이동하여 API ID를 복사하십시오.

Github 저장소를 열고 저장소의 설정으로 이동하십시오.

"비밀"을 클릭하고 이름으로 새 비밀을 추가하십시오NETLIFY_SITE_ID.
Netlify에서 복사한 API ID를 붙여넣습니다.

Netlify 대시보드로 돌아가서 사용자 설정을 엽니다. https://app.netlify.com/user/applications#personal-access-tokens

"응용 프로그램"을 클릭하고 새 액세스 토큰을 만듭니다.

Github "Secrets"를 열고 이름으로 새 비밀을 만듭니다NETLIFY_AUTH_TOKEN.
Netlify에서 생성된 새 액세스 토큰을 붙여넣습니다.

Github 작업 워크플로 만들기

이 시점에서 배포에 필요한 모든 자격 증명이 있습니다. 이제 구성 작성을 시작할 수 있습니다.
common/rush/command-line.json 에 lint 와 test 두 개의 명령을 더 추가해야 합니다. 프로젝트를 빌드하기 전에 CI/CD에서 트리거합니다.
common/rush/command-line.json에서 다음을 추가합니다.

    {
      "name": "test",
      "commandKind": "bulk",
      "summary": "Run tests on each package",
      "description": "Iterates through each package in the monorepo and runs the 'test' script",
      "enableParallelism": true,
      "ignoreMissingScript": true,
      "ignoreDependencyOrder": true,
      "allowWarningsInSuccessfulBuild": true
    },
    {
      "name": "lint",
      "commandKind": "bulk",
      "summary": "Run linter on each package",
      "description": "Iterates through each package in the monorepo and runs the 'lint' script",
      "enableParallelism": true,
      "ignoreMissingScript": true,
      "ignoreDependencyOrder": true,
      "allowWarningsInSuccessfulBuild": false
    }

monorepo의 루트에 .github/workflows 폴더를 만들고 main.yml 라는 새 파일을 만듭니다.

mkdir -p .github/workflows

touch .github/workflows/main.yml

이제 Github Actions에 대한 구성을 작성해 보겠습니다.

# Name of workflow
name: Main workflow

# When workflow is triggered
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
# Jobs to carry out
jobs:
  lint:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
    steps:
      # Get code from repo
      - name: Checkout code
        uses: actions/checkout@v1
      # Install NodeJS
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      # Run rush install and build on our code
      - name: Install dependencies
        run: |
          node common/scripts/install-run-rush.js change -v
          node common/scripts/install-run-rush.js install
          node common/scripts/install-run-rush.js build
      # Run eslint to check all packages
      - name: Lint packages
        run: node common/scripts/install-run-rush.js lint
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
    env:
      CI: true
    steps:
      # Get code from repo
      - name: Checkout code
        uses: actions/checkout@v1
      # Install NodeJS
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      # Run rush install
      - name: Install dependencies
        run: |
          node common/scripts/install-run-rush.js change -v
          node common/scripts/install-run-rush.js install
          node common/scripts/install-run-rush.js build
      # Run unit tests for all packages
      - name: Run tests
        run: node common/scripts/install-run-rush.js test
  deploy:
    # Operating system to run job on
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
        app-name: [react-app]
        include:
          - app-name: react-app
            app: '@monorepo/react-app'
            app-dir: 'apps/react-app'
            app-build: 'apps/react-app/build'
            site-id: NETLIFY_SITE_ID
    needs: [lint, test]
    # Steps in job
    steps:
      # Get code from repo
      - name: Checkout code
        uses: actions/checkout@v1
      # Install NodeJS
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      # Run rush install and build on our code
      - name: Install dependencies
        run: |
          node common/scripts/install-run-rush.js change -v
          node common/scripts/install-run-rush.js install
      - name: Build ${{ matrix.app-name }}
        working-directory: ${{ matrix.app-dir }}
        run: |
          node $GITHUB_WORKSPACE/common/scripts/install-run-rush.js build --verbose --to ${{ matrix.app }}
      - name: Deploy ${{ matrix.app-name }}
        uses: nwtgck/[email protected]
        with:
          publish-dir: ${{ matrix.app-build }}
          production-deploy: ${{ github.event_name != 'pull_request' }}
          github-token: ${{ secrets.GITHUB_TOKEN }}
          enable-pull-request-comment: true
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets[matrix.site-id] }}

위의 구성을 분해해 보겠습니다.
lint , test 및 deploy 3개의 작업이 있습니다. lint 및 test 작업은 병렬로 실행되고 deploy 작업은 lint 및 test 작업이 모두 성공적으로 완료된 후에 실행됩니다. 우리는 매트릭스를 사용하여 다른 NodeJS 버전에서 작업을 실행하고 있습니다(현재는 14.x만 사용하고 있지만 다른 버전으로 확장할 수 있음). Matrix는 또한 여러 프로젝트에 대해 동일한 빌드 단계를 실행하는 데 사용됩니다. 현재 react-app 프로젝트만 있지만 쉽게 확장할 수 있습니다.
master 분기가 수정될 때 이 워크플로를 실행하고 있습니다. pull 요청의 경우 Netlify는 미리 보기 URL을 제공하지만 master 분기에 직접 푸시하면 production 빌드가 트리거되고 코드가 기본 URL에 배포됩니다.

우리가 만든 메인 워크플로는 대부분 개발/스테이징 환경에 적합합니다. 프로덕션의 경우 흐름을 수동으로 트리거하고 git tag 를 생성할 수 있습니다.Netlify에서 다른 사이트를 만들고 Github에서 PRODUCTION_NETLIFY_SITE_ID 비밀을 만들 수 있습니다.
다음 구성을 사용합니다.

name: React App Production Deployment
on:
  workflow_dispatch:
    inputs:
      version:
        description: Bump Version
        default: v1.0.0
        required: true
      git-ref:
        description: Git Ref (Optional)
        required: false
# Jobs to carry out
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      # Get code from repo
      - name: Clone Repository (Latest)
        uses: actions/checkout@v2
        if: github.event.inputs.git-ref == ''
      - name: Clone Repository (Custom Ref)
        uses: actions/checkout@v2
        if: github.event.inputs.git-ref != ''
        with:
          ref: ${{ github.event.inputs.git-ref }}
      # Install NodeJS
      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      # Run rush install and build on our code
      - name: Install dependencies
        run: |
          node common/scripts/install-run-rush.js change -v
          node common/scripts/install-run-rush.js install
          node common/scripts/install-run-rush.js build
      # Run eslint to check all packages
      - name: Lint packages
        run: node common/scripts/install-run-rush.js lint
  test:
    runs-on: ubuntu-latest
    env:
      CI: true
    steps:
      # Get code from repo
      - name: Clone Repository (Latest)
        uses: actions/checkout@v2
        if: github.event.inputs.git-ref == ''
      - name: Clone Repository (Custom Ref)
        uses: actions/checkout@v2
        if: github.event.inputs.git-ref != ''
        with:
          ref: ${{ github.event.inputs.git-ref }}
      # Install NodeJS
      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      # Run rush install
      - name: Install dependencies
        run: |
          node common/scripts/install-run-rush.js change -v
          node common/scripts/install-run-rush.js install
          node common/scripts/install-run-rush.js build
      # Run unit tests for all packages
      - name: Run tests
        run: node common/scripts/install-run-rush.js test
  deploy:
    # Operating system to run job on
    runs-on: ubuntu-latest
    needs: [lint, test]
    # Steps in job
    steps:
      # Get code from repo
      - name: Clone Repository (Latest)
        uses: actions/checkout@v2
        if: github.event.inputs.git-ref == ''
      - name: Clone Repository (Custom Ref)
        uses: actions/checkout@v2
        if: github.event.inputs.git-ref != ''
        with:
          ref: ${{ github.event.inputs.git-ref }}
      # Install NodeJS
      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      # Run rush install and build on our code
      - name: Install dependencies
        run: |
          node common/scripts/install-run-rush.js change -v
          node common/scripts/install-run-rush.js install
      # Build app
      - name: Build react app
        working-directory: apps/react-app
        run: |
          node  $GITHUB_WORKSPACE/common/scripts/install-run-rush.js build --verbose --to @monorepo/react-app
      - name: Deploy react app
        uses: nwtgck/[email protected]
        with:
          publish-dir: apps/react-app/build
          production-deploy: true
          github-token: ${{ secrets.GITHUB_TOKEN }}
          enable-pull-request-comment: true
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.PRODUCTION_NETLIFY_SITE_ID }}
      # Create release tag
      - name: Create tag
        run: |
          git tag ${{ github.event.inputs.version }}
          git push origin --tags

이제 react-app 프로젝트에 대해 프로덕션 배포를 수동으로 트리거할 수 있습니다. 다음 버전 번호를 version 매개변수로 제공하면 태그가 생성됩니다. 이전 버전으로 되돌리려면 git-ref 를 제공하여 되돌릴 수도 있습니다.

이 과정에서 문제가 발생하면 이 게시물here과 관련된 코드를 볼 수 있습니다.