GitHub Action을 이용한 Vue.js CI/CD 구축

GitHub Action을 이용한 Vue.js CI/CD 구축

Vue.js 개발을 하다보면, 지속적인 통합 및 배포(CI/CD)가 필요합니다. 이를 구축하기 위해서는 다양한 도구들이 있지만, 이번에는 GitHub Action을 이용하여 Vue.js CI/CD를 구축하는 방법을 알아보겠습니다.

1. GitHub Action이란?

GitHub Action은 GitHub에서 제공하는 지속적인 통합, 배포를 위한 자동화 도구입니다. CI/CD를 위한 다양한 기능들을 제공하며, 또한 다양한 언어와 프레임워크를 지원합니다.

2. Vue.js CI/CD 구축하기

2.1. workflow 파일 생성하기

Vue.js 프로젝트 루트 디렉토리에 .github/workflows 폴더를 생성하고, 그 안에 ci-cd.yml 파일을 생성합니다. 이 파일은 GitHub Action에서 실행될 workflow를 정의하는 파일입니다. 아래는 ci-cd.yml 파일의 예시입니다.

name: CI/CD for Vue.js project

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

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

    - name: Set up Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '14.x'

    - name: Install Dependencies
      run: npm install

    - name: Build
      run: npm run build

    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@4.1.2
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: dist

위 workflow 파일에서는, main 브랜치에 push 또는 pull request가 일어날 때, build-and-deploy job이 실행됩니다. 이 job은 ubuntu-latest OS에서 실행되며, 아래와 같은 step들을 수행합니다.

1. actions/checkout action을 이용하여 소스 코드를 checkout합니다.
2. actions/setup-node action을 이용하여 Node.js를 설치합니다.
3. npm install 명령어를 이용하여 프로젝트의 의존성을 설치합니다.
4. npm run build 명령어를 이용하여 Vue.js 프로젝트를 빌드합니다.
5. JamesIves/github-pages-deploy-action action을 이용하여 빌드된 파일을 gh-pages 브랜치에 배포합니다.

위 workflow 파일에서 secrets.ACCESS_TOKEN은 GitHub의 Personal Access Token으로, 이를 이용하여 배포를 수행합니다.

2.2. Personal Access Token 생성하기

GitHub에서 Personal Access Token을 생성하여 이를 이용하여 배포를 수행합니다. Personal Access Token은 GitHub 계정의 Settings > Developer settings > Personal access tokens에서 생성할 수 있습니다. 생성한 Personal Access Token은 workflow 파일에서 사용되므로, Secrets에 등록해야 합니다.

2.3. Secrets 등록하기

GitHub Repository의 Settings > Secrets 메뉴에서, 위에서 생성한 Personal Access Token을 등록합니다. 이때, 등록할 Secret의 이름은 ACCESS_TOKEN으로 해야 합니다.

2.4. 배포 확인하기

위 workflow 파일을 등록하고, push 또는 pull request를 수행하면, workflow가 실행됩니다. workflow가 정상적으로 수행되었다면, gh-pages 브랜치에 빌드된 파일이 배포된 것을 확인할 수 있습니다.

3. 결론

GitHub Action을 이용하여 Vue.js 프로젝트의 CI/CD를 구축하는 방법을 알아보았습니다. GitHub Action은 다양한 기능들과 프레임워크를 지원하므로, 다양한 프로젝트에서 활용할 수 있습니다.