GitHub Actions Artifacts 효과적으로 관리하여 릴리스 배포하기

튜토리얼

당신의 팀은 코드를 수동으로 패키징하는 데 많은 노력을 투자했습니까? 그렇다면, 이제 GitHub Actions Artifacts를 사용하여 이 절차를 자동화할 시간입니다. 동시에, 릴리스의 변동성을 줄이고 다른 중요한 작업에 시간을 절약할 수 있습니다.

GitHub Actions Artifacts를 사용하면, 반복적이고 시간이 많이 소요되는 배포 작업을 제거하고 한 활성 작업에서 다른 활성 작업으로 데이터를 효과적으로 전송할 수 있습니다. 이 자습서에서는 React 애플리케이션을 Netlify에 배포하기 위해 Artifacts를 사용하고 관리하는 방법을 배우게 됩니다.

계속 읽고 일관된 배포를 시작하세요!

전제 조건

이 자습서는 실습을 위한 데모로 진행됩니다. 함께 따라하려면 간단한 React 애플리케이션과 GitHub 저장소가 있는지 확인하십시오. 이 자습서에서는 React 카운터 앱 저장소를 사용합니다.

CI/CD 워크플로우 구축

Github Actions 워크플로우의 작업이 종료되면, 처리하고 생성한 데이터도 종료됩니다. 작업이 완료된 후에도 저장소 페이지에 보관할 수 있는 데이터인 Artifacts를 업로드하기 위해 upload-artifact 액션을 사용할 수 있습니다.

그러나 배포 릴리스를 위해 GitHub Actions Artifacts를 사용하기 전에, 먼저 응용 프로그램에 대한 CI/CD 워크플로우를 빌드해야 합니다.

관련 자료:Jenkins CI CD 파이프라인 생성 방법

1. 애플리케이션의 루트 디렉토리에 .github 폴더를 생성하고 workflows라는 하위 폴더를 만듭니다.

2. 그 다음, workflows 폴더에 워크플로우 파일(.yml 파일)을 생성합니다. 파일 이름은 원하는 대로 지정할 수 있습니다. 하지만 이 튜토리얼에서는 파일 이름을 ci.yml로 지정합니다.

파일 워크플로우 리소스 구조는 아래와 같아야 합니다.

Verifying workflow resource structure

3. 다음 코드를 ci.yml 파일에 추가하고 변경 사항을 저장합니다. 아래 코드는 애플리케이션을 위한 빌드 작업이 있는 CI 워크플로우를 생성합니다.

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
# The workflow will be triggered on a push or pull event on the main branch

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
# Operating System to run on
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    steps:
    - uses: actions/checkout@v3
# Get code from the repository
    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
           node-version: ${{ matrix.node-version }}
    - name: Install dependencies
      run: npm ci

    - name: Build app
      run: npm run build

    - name: Run tests
      run: npm run test

4. 이제 변경 사항을 추가하고 커밋한 뒤 원격 GitHub 리포지토리에 푸시합니다.

푸시가 성공하면 아래와 같이 황색 원으로 표시된 커밋을 볼 수 있으며, 이는 워크플로우가 실행 중임을 나타냅니다.

Verifying successful commit and push to the remote repository

5. 작업 탭을 클릭하여 워크플로우를 확인합니다.

Viewing the workflow

6. 왼쪽에 있는 빌드 작업 중 하나를 클릭하고 Build app 작업을 확장합니다. 빌드 작업에서 생성된 데이터(정적 파일)를 확인할 수 있습니다. 이 파일들은 배포에 필요한 파일입니다.

이 생성된 파일들은 작업을 실행하는 서버가 폐기되거나 작업이 종료될 때 손실됩니다. 배포에 이 파일들이 필요하기 때문에 다음 섹션에서 이 파일들을 아티팩트로 업로드하는 단계를 구현할 것입니다.

Viewing the builds

7. 마지막으로, 빌드 작업의 단계 블록 아래에서 테스트 실행 후 다음 코드를 추가하십시오.

아래 코드는 actions/upload-artifact@v3 액션을 사용하여 빌드 디렉토리에서 production이라는 이름의 artifact를 업로드합니다.

생성된 파일은 작업을 실행하는 서버가 삭제되거나 작업이 종료될 때 손실됩니다. 배포에 이러한 파일이 필요하므로 아래 코드는 이러한 파일을 가져와 artifact로 업로드하는 단계를 구현합니다.

# Artifact 업로드
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build

사용자 지정 Artifact 보존 기간 구성

Artifact는 기본적으로 90일 동안 저장되며 삭제됩니다. 그러나 저장소의 유형에 따라 이 보존 기간을 변경할 수 있습니다.

사용자 지정 Artifact 보존 기간을 설정하기 위해 다음과 같은 값을 설정할 수 있습니다:

  • 개인 저장소 – 1에서 400 사이의 값.
  • 공개 저장소 – 1에서 90 사이의 값만 가능합니다.

사용자 지정 Artifact 보존 기간을 설정하려면 # Artifact 업로드 단계에서 retention-days: 2를 workflow YAML 파일에 포함시키십시오.

# Artifact 업로드
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build
    # Artifact 보존 기간 사용자 지정
		retention-days: 2

또는 다음을 통해 GitHub에서 artifact 보존 기간을 구성하십시오:

  • 저장소에서 Settings 탭으로 이동하십시오.
  • 액션을(를) 클릭하여 드롭다운을 확장하고 일반을 선택하세요.
  • 아래에 표시된 Artifact 및 로그 보존 섹션 아래에 보존할 일 수를 입력하고 저장을 클릭하세요.
click Save

Git 저장소에서 Netlify로 프로젝트 가져오기

빌드 아티팩트는 이제 업로드 단계가 있기 때문에 워크플로우에서 다른 작업에서 다운로드하여 액세스할 수 있으며 워크플로우 완료 시간을 줄일 수 있습니다. 워크플로우에 배포 작업을 추가하고 해당 작업의 한 단계에서 업로드된 항목을 다운로드합니다.

그러나 워크플로우를 업데이트하기 전에 앱 배포를 위해 Netlify를 설정해야 합니다:

1. 웹 브라우저를 열고, Netlify로 이동하여 GitHub으로 로그인하세요.

2. 로그인한 후, 사이트 섹션에서 새 사이트 추가를 클릭하고 기존 프로젝트 가져오기를 선택하여 프로젝트를 가져옵니다.

Initiating importing project to Netlify

3. 이 튜토리얼을 위해 GitHub에서 생성한 저장소를 사용할 예정이므로 GitHub를 클릭하세요. GitHub에 대한 Netlify 액세스를 승인하는 팝업 창이 나타납니다.

Choosing GitHub as the Git provider

4. 승인한 후, 가져올 프로젝트의 저장소를 검색하고 선택하세요.

Selecting the GitHub repository to import the project from

5. 새 페이지에서 사이트에 대한 기본 빌드 설정(배포할 브랜치 및 빌드 명령 등)을 구성하세요. 그러나 GitHub 액션을 사용하여 배포할 예정이므로 빌드 명령 및 게시 디렉토리 필드를 비워두세요.

빌드 설정을 구성한 후, 사이트를 배포하려면 “사이트 배포”를 클릭하면 배포되는 것을 확인할 수 있습니다. 배포 후에는 사이트에 대한 실시간 링크가 생성됩니다.

빌드 명령 필드를 비워 두었다면, 링크로 이동하면 앱이 빌드되지 않았으므로 404 페이지가 표시됩니다.

Configuring basic build settings for the site

6. 다음으로, 사이트 정보를 확인하기 위해 “사이트 설정”을 클릭하십시오 (6단계).

Accessing the site details

7. 마지막으로, “사이트 세부 정보” 페이지에서 나중에 사용하기 위해 “사이트 정보” 섹션 아래의 “사이트 ID”를 기록해 두십시오.

Noting the Site ID

개인 액세스 토큰 생성

이제 사이트 ID를 갖게 되었으므로 액세스 토큰을 얻어야 합니다. 개인 액세스 토큰은 GitHub Actions가 Netlify 계정에 액세스 할 수 있도록 권한을 부여합니다.

1. 프로필 아이콘을 클릭하고 프로필 설정에 액세스하기 위해 “사용자 설정”을 선택하십시오.

Accessing the profile settings

2. 새로운 페이지에서 “응용 프로그램”을 클릭한 다음, “개인 액세스 토큰” 섹션 아래의 “새 액세스 토큰”을 클릭하여 새 액세스 토큰 생성을 시작하십시오.

Initiating creating a new access token

3. 새 페이지에서 토큰에 대한 설명적인 이름을 입력하고 “토큰 생성”을 클릭하십시오.

Generating a new personal access token

4. 이제 토큰을 안전한 장소에 복사하십시오.

Copying the new personal access token

사이트 ID와 액세스 토큰 보호를 위해 시크릿 생성

Netlify에서 사이트 ID와 액세스 토큰을 얻었으므로, 이를 저장소에 추가하여 액션 워크플로에서 사용할 수 있도록해야 합니다. 그러나 먼저 사이트 ID와 액세스 토큰을 보호하기 위해 시크릿을 생성해야 합니다.

관련:GitHub Actions 환경 변수 및 비밀 정보 시작하기

1. 브라우저에서 GitHub 저장소로 이동하십시오.

2. 다음으로, 설정 탭을 클릭한 다음 Secrets(왼쪽 패널) → Actions(Secrets 아래)를 클릭하여 저장소에서 사용 가능한 액션 목록에 액세스하십시오.

Accessing the list of actions in the GitHub repository

3. Actions secrets 페이지에서 New repository secret을 클릭하여 새로운 비밀 정보를 추가합니다.

Initiating creating a new repository secret

4. 이제 새로운 비밀 정보에 대한 설명적인 이름을 제공하십시오. 그러나 이 튜토리얼에서는 비밀 정보 이름으로 NETLIFY_AUTH_TOKEN을 사용합니다.

액세스 토큰을 값으로 추가하고 새 비밀 정보를 만들기 위해 Add secret을 클릭하십시오.

Adding a secret for the access token

5. 마지막으로, 네트워크 ID를 위한 비밀 정보도 추가하는 단계를 반복하십시오.

추가되면 다음과 같이 저장소 비밀 정보 섹션에 비밀 정보가 표시됩니다.

Verifying the newly-added secrets

Netlify로 아티팩트 다운로드 및 배포

이제 Netlify 사이트와 비밀 정보가 설정되었으므로 워크플로에 Netlify로 배포하는 단계를 포함시킬 것입니다.

1. 배포 작업을 포함하는 아래의 코드를 추가하여 워크플로를 업데이트하십시오.

다음 코드에는 업로드된 아티팩트를 다운로드하는 단계와 Netlify로 배포하는 다른 단계가 포함되어 있습니다.

ATA의 GitHub 저장소에서 ci.yml 파일의 전체 코드를 찾을 수 있습니다.에 대한 완전한 코드를 찾을 수 있습니다.

deploy:
  name: Deploy #작업 이름
  needs: build #빌드 작업은 배포 작업이 실행되기 위해 성공적으로 실행되어야 합니다.
  runs-on: ubuntu-latest

  steps:
  - name: Download artifact
    uses: actions/download-artifact@v3
#업로드된 파일을 다운로드합니다.
    with:
      name: production
      path: ./build

  - name: Deploy to Netlify
    uses: netlify/actions/cli@master
#Netlify로 배포하는 단계
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
#인증을 위한 비밀 정보
    with:
      args: deploy --dir=build --prod

2. 그 다음, 변경 사항을 원격 저장소에 추가하고 푸시합니다.

저장소의 워크플로우 페이지에서 최신 커밋이 실행되고 있음을 아래와 같이 확인할 수 있어야 합니다.

커밋 후, 자세한 내용을 보기 위해 최신 실행을 클릭하세요.

Verifying the latest commit being run

작업이 성공적으로 실행된 경우, 작업 옆에 녹색 확인 표시와 페이지 하단의 프로덕션 아티팩트가 표시됩니다.

Verifying the jobs run successfully

3. 이제, 배포 작업(왼쪽 패널)을 클릭하고, Netlify로 배포하는 작업을 확장하세요. 단계의 출력에서 웹사이트 URL이 포함되어 있습니다.

웹사이트 URL을 클릭하여 사이트가 작동하고 접근 가능한지 확인하세요.

Verifying the Website URL

URL은 웹 브라우저의 새 탭에서 자동으로 열리며, 아래와 같이 작동 중인 사이트를 나타냅니다.

Verifying the site works correctly and is accessible via a web browser

사용하지 않는 아티팩트 삭제하여 공간 절약하기

각 릴리스마다 새로운 릴리스를 업로드하고 다운로드할 때마다 디스크 공간을 더 많이 사용합니다. 공간을 절약하려면 어떻게 해야 할까요? 사용하지 않는 아티팩트를 삭제하는 것이 가장 실용적인 해결책입니다. 각 서버에 머무는 릴리스 아티팩트의 수를 제한하여 수천 개의 릴리스가 축적되고 디스크가 가득 차지 않도록 해야 합니다.

보존 기간 설정을 사용하여 일정 시간 후에 아티팩트를 삭제하는 것 외에도 GitHub의 워크플로우 페이지에서 아티팩트를 삭제할 수도 있습니다.

워크플로우 페이지에서 아티팩트 옆에 있는 삭제 아이콘을 클릭하면 아티팩트를 삭제할 수 있습니다.

Deleting an artifact from the workflow on GitHub

이제 최상위에 있는 프롬프트에서 확인을 클릭하여 아티팩트를 삭제하겠다는 것을 확인하세요.

Confirming artifact deletion

아래에서 아티팩트가 더 이상 페이지에 없어져서 성공적으로 삭제되었음을 확인할 수 있습니다.

Verifying the artifact is deleted

결론

아티팩트를 사용하면 한 워크플로우가 다른 워크플로우에 정보를 제공하는 더 복잡한 자동화를 간편하게 개발할 수 있습니다. 이제 GitHub Actions 아티팩트에 대해 더 잘 이해하고 배포 릴리스에 사용할 수 있는 방법을 알게 되었습니다.

이 새로운 지식을 활용하여 다음 프로젝트의 워크플로우 자동화에 GitHub Actions를 활용해 보는 것은 어떨까요?

Source:
https://adamtheautomator.com/github-actions-artifacts-2/