GitLab CI/CD 파이프라인을 활용한 GUARDIANSVIEW 프로젝트 배포

CI/CD 파이프라인이란?

CI/CD(지속적 통합/지속적 배포)는 애플리케이션 개발 단계를 자동화하여 애플리케이션을 더욱 짧은 주기로 고객에게 제공하는 방법입니다. CI/CD의 기본 개념은 지속적인 통합, 지속적인 서비스 제공, 지속적인 배포입니다.

지속적 통합(Continuous Integration, CI) 은 개발자들이 코드 변경사항을 중앙 리포지토리에 자주 병합하는 개발 방식입니다. 각 통합마다 자동화된 빌드와 테스트가 실행되어 버그를 빠르게 감지할 수 있습니다.

지속적 배포(Continuous Deployment, CD) 는 개발자의 변경사항이 리포지토리에서 자동으로 고객이 사용 가능한 프로덕션 환경까지 릴리스되는 것을 의미합니다. 이는 수동 개입 없이 자동화된 테스트를 통과한 코드를 프로덕션에 배포합니다.

GitLab CI/CD는 이러한 과정을 자동화하기 위한 강력한 도구로, .gitlab-ci.yml 파일 하나로 전체 빌드, 테스트, 배포 파이프라인을 정의할 수 있습니다. 이를 통해 개발자는 코드에 집중하고, 반복적인 배포 작업은 자동화할 수 있습니다.

 

GUARDIANSVIEW 프로젝트 GitLab CI/CD 배포 과정

이제 GUARDIANSVIEW 프로젝트를 GitLab CI/CD 파이프라인을 통해 배포한 과정을 상세히 설명하겠습니다.

 

1. GitLab CI/CD 파이프라인 설정

프로젝트 루트 디렉토리에 .gitlab-ci.yml 파일을 생성하여 CI/CD 파이프라인을 정의

image: node:16
stages:
  - build
  - deploy
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .npm/
install_dependencies:
  stage: build
  script:
    - npm install
  artifacts:
    paths:
      - node_modules/
build_app:
  stage: build
  script:
    - npm run build
  artifacts:
    paths:
      - dist/
  only:
    - main
pages:
  stage: deploy
  script:
    - npm run build
    - rm -rf public
    - mv dist public
  artifacts:
    paths:
      - public
  only:
    - main

 

이 설정은 다음과 같은 작업을 수행합니다:

• node:16 이미지를 기반으로 실행
• build와 deploy 두 단계로 구성
• 종속성 캐싱을 통한 빌드 속도 향상
• 의존성 설치 후 빌드 실행
• GitLab Pages를 통한 배포 설정

2. Vue 구성 파일 수정

Vue 프로젝트의 vue.config.js 파일을 수정하여 올바른 출력 디렉토리와 배포 경로를 설정

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production'
    ? '/'
    : '/',
  outputDir: 'dist'  // 'public'에서 'dist'로 변경
})

 

이 설정을 통해 빌드된 파일이 dist 디렉토리에 출력되도록 지정했습니다.

 

3. GitHub에서 GitLab으로 프로젝트 이전

GitHub에 있던 프로젝트를 GitLab으로 이전하기 위해 다음 명령어를 실행

git remote add gitlab https://gitlab.com/guardians2693015/guardians_earthquake.git
git push --force --all gitlab
git push --tags gitlab
git add .gitlab-ci.yml vue.config.js
git commit -m "Add CI/CD configuration"
git push gitlab main

 

4. Firebase 배포 토큰 설정

Firebase로 배포하기 위한 토큰을 생성하고 GitLab에 등록

npm install -g firebase-tools
firebase login
firebase login:ci

 

생성된 토큰을 GitLab 프로젝트 설정에 등록했습니다.

1. GitLab 프로젝트 → Settings → CI/CD → Variables
2. 'Add Variable' 클릭
3. Key: FIREBASE_TOKEN, Value: 생성된 토큰 값 입력
4. 'Mask variable' 체크 (보안을 위해)
5. 'Add Variable' 클릭하여 저장

5. 배포 상태 확인

GitLab CI/CD 파이프라인의 실행 상태를 확인했습니다:

1. GitLab 프로젝트 페이지로 이동
2. 왼쪽 메뉴에서 Build → Pipelines 클릭
3. 최신 파이프라인 상태 확인:
   • 녹색 체크 표시(✓) Passed: 모든 작업이 성공적으로 완료됨
   • 빨간색 표시(✗) Failed: 오류 발생

6. 트러블슈팅

배포 과정에서 몇 가지 이슈가 발생했으며, 다음과 같이 해결

6.1. 보호된 브랜치 이슈

$ git push --force --all gitlab
Enumerating objects: 90, done.
Counting objects: 100% (90/90), done.
Delta compression using up to 16 threads
Compressing objects: 100% (83/83), done.
Writing objects: 100% (90/90), 62.34 MiB | 7.31 MiB/s, done.
Total 90 (delta 18), reused 21 (delta 0), pack-reused 0 (from 0)
remote: GitLab: You are not allowed to force push code to a protected branch on this project.

 

GitLab에서는 기본적으로 main 브랜치가 보호되어 있어 강제 푸시가 불가능했습니다. 이를 해결하기 위해

1. GitLab 프로젝트 페이지로 이동
2. 왼쪽 사이드바에서 Settings → Repository 선택
3. Protected Branches 섹션으로 이동
4. main 브랜치 옆의 "Unprotect" 버튼 클릭

6.2. 계정 인증 이슈

Before you can run pipelines, we need to verify your account.
We won't ask you for this information again. It will never be used for marketing purposes.
Verify my account
Unable to create pipeline
* Identity verification is required in order to run CI jobs

 

GitLab CI/CD 파이프라인을 실행하기 위해서는 계정 인증이 필요했습니다. "Verify my account" 버튼을 클릭하여 인증 절차를 완료했습니다.

6.3. 스테이지 정의 이슈

Unable to create pipeline
* unit_test job: chosen stage test does not exist; available stages are .pre, build, .post

 

.gitlab-ci.yml 파일에서 정의하지 않은 스테이지를 참조하는 문제가 발생했습니다. 다음과 같이 수정하여 해결했습니다:

• stages 섹션에 "test"와 "deploy" 스테이지 추가
• Firebase 토큰을 하드코딩하는 대신 $FIREBASE_TOKEN 환경 변수 사용

7. 배포 결과

성공적으로 배포된 사이트: https://guardians-earthquake-8d7b2d.gitlab.io/