Github 워크플로(CI/CD)를 사용하여 Netlify 배포 트리거

투고 부문
이것은 DIY Deployments에 대한 저의 제출입니다.

My github Repository

Netlify에 반응 앱을 최대한 빨리 배포하는 방법이 궁금하십니까? Github Actions github 워크플로를 사용하여 쉽고 빠르게 배포할 수 있습니다. 이 게시물에서는 github 워크플로를 사용하여 netlify 자동 배포를 트리거하는 방법을 보여드리겠습니다.

npx create-react-app를 사용하여 간단한 반응 앱을 만듭니다.

터미널에서 npm run build를 실행합니다. 이렇게 하면 루트 디렉토리에 빌드 폴더가 생성됩니다.Netlify를 사용하면 아래 이미지에서 볼 수 있듯이 드롭 영역에 빌드 폴더를 끌어다 놓을 수 있습니다. 이 옵션을 사용하려면 자유롭게 입력하세요.
netlify netlify > 사이트에 로그인하면 이 빌드 폴더를 놓을 위치가 표시됩니다. 사이트를 삭제하면 몇 초 안에 사이트가 활성화됩니다.

Netlify는 또한 터미널을 통해 netlify-cli를 사용하여 배포할 수 있는 액세스 권한을 부여할 수 있습니다. 당신은 할 수 있습니다
Refer to this resource .

로컬 저장소를 github 저장소(원격)에 연결하고 refer to this guide . 그러면 원격 저장소가 생기고 작업을 추가할 수 있습니다.

그런 다음 저장소에서 github 작업 흐름을 설정할 차례입니다. 이렇게 하려면 github > 작업으로 이동하여 github 워크플로를 추가합니다. 그들이 제공하는 많은 템플릿이 있습니다. 하지만 이 글에서는 Node.js를 사용할 것입니다.

NodeJ를 선택하면 아래 템플릿이 제공됩니다.



다음 편집으로 템플릿을 편집하려면 자유롭게 입력하십시오.

name: CI/CD

on:
  push:
    branches: [ develop ]
  pull_request:
    branches: [ develop ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test 

    - name: Build
      run: npm run build

그런 다음 클릭하여 커밋을 시작하고 새 파일을 커밋합니다. gitworkflow가 성공적으로 실행됩니다.

이제 네트워크화를 위해 배포할 시간입니다:

netlify에 배포하려면 2가지가 필요합니다.

저희 넷리파이 사이트_ID

Netlify 개인 액세스 토큰

site_ID를 찾으려면 이미 배포된 앱 > 사이트 개요 > 사이트 설정 > 일반으로 이동한 다음 해당 site_ID를 복사합니다.



Netlify 개인 액세스 토큰을 찾으려면 프로필 사진을 클릭하고 *사용자 설정 > 애플리케이션*으로 이동합니다. 나중에 필요하므로 토큰을 생성하고 복사하십시오.



Site_ID와 netlify 개인 액세스 토큰을 모두 복사한 후에는 github로 이동하여 저장소 비밀을 입력할 차례입니다. github > 설정 > 비밀로 이동하여 새 비밀 추가를 클릭합니다. 그런 다음 netlfy 사이트 ID와 개인 액세스 토큰을 추가하십시오.

github에 비밀을 추가한 후 Node.js.yml 파일에서 netlify 사이트를 배포하는 이 단계를 추가하겠습니다.

- name: Deploy Site
      env:
        NETLIFY_SITE_ID: ${{ secrets.NETLFY_APP_ID }}
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_ACCESS_TOKEN }}
      run: netlify deploy --prod

교체해야 합니다${{secrests.The name of the secret you put on your github}}.

최종 github 작업 흐름은 다음과 같습니다.

최종 YML 파일

name: CI/CD

on:
  push:
    branches: [ develop ]
  pull_request:
    branches: [ develop ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test 

    - name: Build
      run: npm run build
    - name: Deploy Site
      env:
        NETLIFY_SITE_ID: ${{ secrets.NETLFY_APP_ID }}
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_ACCESS_TOKEN }}
      run: netlify deploy --prod

모든 github 작업 흐름이 잘 설정되면 반응 앱의 루트 폴더로 이동하여 netlify.toml 파일을 추가하고 이 코드를 추가합니다.

[build]
command = "npm run build"
publish = "build"

특히 반응이 react-router dom으로 빌드된 경우 리디렉션 규칙과 같은 추가 스태프를 netlify.toml에 넣을 수도 있습니다. 또는 게시 폴더로 이동하여 새 파일_redirects을 만들고 아래 코드를 작성합니다.
/* /indext.html 200
위의 워크플로를 설정하고 위의 netlify.toml 파일이 있는지 확인하면 애플리케이션이 자동으로 배포되어 워크플로를 완료하는 데 걸리는 시간만큼 짧은 시간 내에 netlify됩니다.

행복한 코딩 ^_^