GitHub Actions 아티팩트 - 빌드 데이터 영구 저장

소개

지속적 통합 (CI) 파이프라인에서 한 작업 (job) 은 다른 작업과 공유하거나 보관하고 싶은 파일 (컴파일된 바이너리, webpack 번들 또는 테스트 보고서 등) 을 생성하는 경우가 많습니다. 이러한 파일을 **아티팩트 (artifacts)**라고 합니다.

기본적으로 워크플로 실행 중에 생성된 파일은 실행이 완료되면 사라집니다. 이러한 파일을 영구적으로 보존하려면 아티팩트로 "업로드"해야 합니다.

이 실습에서는 Node.js 워크플로를 수정하여 dist 디렉터리를 생성하는 빌드 프로세스를 시뮬레이션하고, actions/upload-artifact 액션을 사용하여 해당 디렉터리를 저장하는 방법을 배웁니다.

이 실습은 이전 실습에서 생성한 리포지토리를 기반으로 합니다. github-actions-demo 리포지토리에서 작업하게 됩니다.

빌드 파일을 생성하도록 워크플로우 업데이트

이 단계에서는 빌드 프로세스를 시뮬레이션하기 위해 워크플로 파일을 수정합니다. dist 디렉터리와 더미 아티팩트 파일을 생성하는 단계를 추가할 것입니다.

github-actions-demo의 GitHub 리포지토리 페이지에서 녹색 Code 버튼을 클릭합니다.
HTTPS 탭이 선택되었는지 확인하고 URL 을 복사합니다. URL 은 https://github.com/your-username/github-actions-demo.git과 유사해야 합니다.
LabEx 환경에서 터미널을 엽니다. 기본 경로는 ~/project입니다.
git clone 명령을 사용하여 리포지토리를 다운로드합니다. your-username을 실제 GitHub 사용자 이름으로 바꾸십시오.

cd ~/project
git clone https://github.com/your-username/github-actions-demo.git

예시 출력:

Cloning into 'github-actions-demo'...
remote: Enumerating objects: X, done.
remote: Counting objects: 100% (X/X), done.
remote: Total X (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (X/X), done.

복제된 리포지토리로 이동합니다:

cd ~/project/github-actions-demo

WebIDE 편집기를 사용하여 새 워크플로 파일 .github/workflows/upload-artifacts.yml을 생성합니다. 왼쪽 파일 탐색기에서 project/github-actions-demo/.github/workflows/ 아래에서 파일을 찾을 수 있습니다.
기본 워크플로 구조를 생성하는 것으로 시작합니다. 워크플로 이름과 트리거를 추가합니다:

name: Upload Artifacts

on: [push]

jobs 섹션을 추가하고 실행기 (runner) 와 함께 빌드 job 을 정의합니다:

jobs:
  build:
    runs-on: ubuntu-latest

steps 섹션을 추가합니다. 먼저, checkout 단계를 추가합니다:

steps:
  - uses: actions/checkout@v4

Node.js 설정 단계를 추가합니다:

- name: Use Node.js
  uses: actions/setup-node@v4
  with:
    node-version: "20"

종속성을 설치하는 단계를 추가합니다:

- name: Install dependencies
  run: npm install

dist 디렉터리와 그 안에 파일을 생성하는 빌드 단계를 추가합니다:

- name: Build project
  run: |
    mkdir dist
    echo "This is the build artifact" > dist/build.txt

테스트 단계를 추가합니다:

- name: Run tests
  run: npm test

이제 완성된 파일은 다음과 같아야 합니다:

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test

설명

mkdir dist: dist라는 디렉터리를 생성합니다.
echo ... > dist/build.txt: 컴파일된 에셋을 시뮬레이션하기 위해 dist 내부에 간단한 텍스트 파일을 생성합니다.

변경 사항을 저장합니다 (Ctrl+S 또는 Cmd+S).

dist 디렉토리를 업로드하기 위해 actions/upload-artifact@v4 사용

이제 파일을 생성했으므로 업로드해야 합니다. 공식 actions/upload-artifact 액션을 사용할 것입니다.

.github/workflows/upload-artifacts.yml 파일에서 job 의 끝에 새로운 단계를 추가합니다:

- name: Upload build artifact
  uses: actions/upload-artifact@v4
  with:
    name: build-assets
    path: dist

완성된 파일은 다음과 유사해야 합니다:

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test
      - name: Upload build artifact
        uses: actions/upload-artifact@v4
        with:
          name: build-assets
          path: dist

설명 (Explanation)

uses: actions/upload-artifact@v4: 업로드를 처리할 액션을 호출합니다.
name: build-assets: GitHub UI 에 표시될 아티팩트의 이름입니다.
path: dist: 업로드할 디렉토리 (또는 파일) 입니다.

파일을 저장합니다 (Ctrl+S 또는 Cmd+S).

커밋, 푸시 후 GitHub UI 에서 아티팩트 확인

이 단계에서는 변경 사항을 커밋하고 GitHub 으로 푸시합니다. 이렇게 하면 방금 업데이트한 워크플로우가 트리거됩니다.

리포지토리 디렉토리에 있는지 확인합니다:

cd ~/project/github-actions-demo

변경 사항을 스테이징합니다:

git add .

변경 사항을 커밋합니다:

git commit -m "Add build step and upload artifacts"

변경 사항을 GitHub 의 원격 리포지토리로 푸시합니다:

git push

인증 관련 참고 사항

git push를 실행하면 WebIDE 가 자동으로 인증을 요청하는 팝업을 표시합니다. 다음 세부 단계를 따르십시오.

"The extension 'GitHub' wants to sign in using GitHub." 라는 메시지가 포함된 팝업이 나타납니다. Allow를 클릭합니다.
새 알림이 나타납니다. **"Copy&Continue to GitHub"**를 클릭한 다음, 다음 프롬프트에서 **"Open"**을 클릭합니다.
열리는 브라우저 창에서 GitHub 계정에 로그인하고 복사된 인증 코드를 입력합니다. 인증을 확인하면 페이지가 자동으로 닫힙니다.
몇 초 기다리면 터미널에서 푸시 작업이 성공적으로 완료되는 것을 볼 수 있습니다.

개인 정보 보호 참고 사항: WebIDE 는 인증 목적으로 GitHub 계정에 대한 전체 액세스를 요청합니다. 개인 정보 보호에 대해 걱정할 필요가 없습니다. 현재 랩을 완료하면 LabEx VM 은 즉시 파기되며 자격 증명 및 인증 정보는 유지되지 않습니다.

이 인증 프로세스는 사용자 이름이나 Personal Access Token(개인 액세스 토큰) 의 수동 구성이 필요하지 않습니다.