티스토리

잘알자

검색하기

[GitHub Actions] Vite 프로젝트 + Vercel과 함께 사용하기

CI & CD

[GitHub Actions] Vite 프로젝트 + Vercel과 함께 사용하기

jalalja 2024. 12. 18. 19:19

CI / CD 란?

- CI / CD 란?

CI/CD는 Continuous Integration (지속적인 통합)과 Continuous Delivery (지속적인 제공), 또는 Continuous Deployment (지속적인 배포)를 의미하는 용어로, 애플리케이션 개발과 배포 프로세스를 자동화하는 방법론이다.
CI/CD는 개발자의 코드 변경 사항이 주기적으로 통합되고, 자동화된 테스트 및 배포 과정이 실행되는 방식으로, 이를 통해 개발 속도를 높이고, 품질을 유지하며, 효율성을 개선할 수 있다는 장점을 가지고 있다.

- Continuous Integration

개발자들은 본인 코드의 변경사항을 main repository에 주기적으로 빈번하게 merge 해야한다.
주기적으로 merge 된 코드의 변경사항이 자동으로 빌드가 되고, 프로젝트 안에서 어떠한 버그가 없는지 자동으로 테스트가 되어야 한다.

- Continuous Delivery

CI가 완료된 뒤에 배포 준비과정을 거치게 되고, 그 후에 검증팀이나 개발자에 의해 수동으로 배포가 이루어지는 것이다.

- Continuous Deployment

Continuous Delivery 과정을 자동화한 것이다.

GitHub Actions 란?

- GitHub Actions 란?

GitHub Actions는 GitHub에서 제공하는 CI/CD 자동화 도구이다.
GitHub Repository와 밀접하게 통합되어, 코드 변경에 따라 빌드, 테스트, 배포 등 다양한 작업을 자동으로 실행할 수 있다.

- GitHub Actions 중요 개념

Workflow
- Workflow는 .github/workflows/ 폴더에 yml 또는 yaml 파일 형태로 저장이 된다.
- 하나의 Repository에서 여러개의 Workflow를 작성할 수 있고, Workflow들은 독립적으로 동작을 하게된다.
- 이런 Workflow 들은 특정 Event에 의해서 실행이 된다.

Event
- Event는 Workflow를 실행하는 조건이나 행동을 의미한다.
- Event는 Workflow 파일의 on 키워드 아래에 정의되며, 다양한 유형의 이벤트를 지정할 수 있다.
- 주요 Event로는 push, pull_request 등이 있다.

on:
  push:
    branches: [ "main", "develop", "release" ]
  pull_request:
    branches: [ "release", "hotfix" ]

Job
- Job은 Workflow의 독립적인 실행단위이다.
- Job은 jobs 하위에 정의할 수 있고, 중복된 이름을 사용할 수 없다.
- 각 Job은 서로 다른 실행 환경에서 병렬로 실행되며, 필요에 따라 순차적으로 실행되도록 의존성을 설정할 수도 있다.
- Job은 여러 Step으로 구성되며 빌드, 테스트, 배포와 같은 구체적인 작업을 정의하는데 사용된다.

jobs:
  build:  # Job 이름
    runs-on: ubuntu-latest
    steps:
      - name: Build application
        run: npm run build

Step
- Step은 Job을 구성하는 가장 작은 실행 단위이다.
- Step은 steps 하위에 정의할 수 있고, 중복된 이름을 사용할 수 있다.
- Step은 명령어를 실행하거나, GitHub의 Action(재사용 가능한 작업)을 호출하여 작업을 수행할 수 있다.
- 모든 Step은 Job 내에서 순차적으로 실행이 일어난다.

steps:
  - name: <step_name>        # Step 이름 (선택 사항, 가독성을 위해 사용)
    uses: <action_name>      # GitHub Action 호출
    run: <command>           # 명령어 실행
    env:                     # 환경 변수 설정
      VAR_NAME: value
    with:                    # Action의 입력값 설정
      key: value
    if: <condition>          # 조건부 실행
    timeout-minutes: <time>  # Step 실행 시간 제한
    continue-on-error: true  # 실패 시에도 워크플로우 진행

Action
- Action은 GitHub Actions의 핵심 구성 요소로, 반복적인 작업을 자동화하는 독립적인 단위이다.
- GitHub에서 제공하는 공식 Action을 사용하거나, 자체 Action을 만들고 공유할 수 있다.

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Use custom action
        uses: actions/checkout@v3

Runner
- Runner는 Workflow로부터 job을 실행시켜주는 어플리케이션이다.

GitHub Actions 로 CI/CD 구축

- GitHub Action 시작하기

Actions -> node 검색 -> Node.js Configure 클릭

- yml 파일 작성 후 저장

환경변수 설정은 하단에 별도로 다루었다.

// Workflow 이름
name: GOTCHA-CI/CD

// 환경변수 정의 (supabase)
env:
  VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
  VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

// event 정의
on:
  push:
    // main, develop, release 브랜치에 push 하는 경우 이벤트가 발생된다.
    branches: [ "main", "develop", "release" ]
  pull_request:
    // release, hotfix 브랜치에 pr이 생기면 이벤트가 발생한다.
    branches: [ "release", "hotfix" ]

jobs:
  // job 정의
  build:
    // 우분투 최신 버전에서 실행한다.
    runs-on: ubuntu-latest

    strategy:
      matrix:
        // Node.js의 두 가지 버전(20.x, 22.x)에서 빌드와 테스트를 병렬로 실행한다.
        node-version: [20.x, 22.x]

    steps:
    // repository의 소스코드를 가져온다.
    - uses: actions/checkout@v4
    
    // 지정한 node-version을 설치한다.
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'yarn'
    
    // 종속성을 설치한다.
    - name: install dependencies
      run: yarn
      
    // 빌드 명령어를 사용해 프로젝트를 빌드한다.
    - name: build
      run: yarn build

  Deploy-Preview:
    // 상단에 정의한 build job이 끝난 후에 실행이 된다.
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code
        uses: actions/checkout@v3
      
      // vercel CLI를 설치한다.
      - name: Install Vercel CLI
        run: yarn global add vercel@latest
        
      // Vercel 프로젝트의 환경설정 파일(.env 또는 .vercel)을 현재 워크플로우 환경으로 가져온다.  
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
        
      // 프로젝트를 빌드한다.  
      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      
      // 최종적으로 프로젝트를 배포한다.
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

- 환경변수 설정

Settings -> Secrets and variables -> Actions

Repository secrets의 New repository secret 클릭

환경변수 추가
- Name : 변수명
- Secret : 변수값

- main branch에 merge

배포까지 성공적으로 되는 것을 확인할 수 있다.

Vercel 토큰 발급

Vercel 토큰 생성

Account Settings -> Tokens -> 토큰 생성
토큰은 다시는 못보기 때문에 별도로 메모를 해두는 것이 좋다.