GitLab은 버전 관리와 CI/CD 기능을 지원하는 웹 기반 Git 저장소 관리 플랫폼입니다. 이와 함께 Vue.js를 사용하여 웹 애플리케이션을 개발하면 코드 변경 내역이 자동으로 테스트되고 배포될 수 있습니다. 이 글에서는 Vue.js와 GitLab CI/CD를 함께 사용하는 방법을 알아보겠습니다.

1. GitLab 프로젝트 생성

먼저 GitLab에 프로젝트를 생성해야 합니다. GitLab에 로그인한 후 “New Project” 버튼을 클릭하여 새로운 프로젝트를 생성합니다. 프로젝트 이름과 설명 등을 설정한 후 “Create project” 버튼을 클릭하여 프로젝트를 생성합니다.

2. Vue.js 프로젝트 초기화

Vue.js CLI를 사용하여 Vue.js 프로젝트를 초기화합니다. 터미널을 열고 다음 명령어를 실행합니다:

vue create my-vue-app

이 명령어는 my-vue-app이라는 이름으로 새로운 Vue.js 프로젝트를 생성합니다. Vue.js CLI는 몇 가지 선택사항을 제공하는데, 여러분의 프로젝트 요구사항에 맞게 선택하면 됩니다.

3. GitLab과 연결

GitLab 프로젝트와 로컬 Vue.js 프로젝트를 연결해야 합니다. 로컬 Vue.js 프로젝트 폴더로 이동한 후 다음 명령어를 실행합니다:

git remote add origin [GitLab 프로젝트 URL]

이 명령어는 GitLab 프로젝트와 로컬 프로젝트를 연결합니다.

4. GitLab CI/CD 설정

GitLab CI/CD는 .gitlab-ci.yml 파일을 사용하여 구성됩니다. 로컬 Vue.js 프로젝트 폴더에 .gitlab-ci.yml 파일을 생성하고 다음 내용으로 작성합니다:

image: node:12.18.3

stages:
  - build
  - test
  - deploy

before_script:
  - npm install

build:
  stage: build
  script:
    - npm run build

test:
  stage: test
  script:
    - npm run test

deploy:
  stage: deploy
  script:
    - npm install -g firebase-tools
    - firebase login:ci
    - firebase deploy --token $FIREBASE_TOKEN

이 .gitlab-ci.yml 파일은 세 가지 스테이지(build, test, deploy)를 정의합니다. 각 스테이지는 해당하는 스크립트를 실행합니다. 이 예시는 Vue.js 프로젝트를 빌드하고 테스트한 후 Firebase를 사용하여 배포하는 예시입니다. 여러분의 프로젝트 요구사항에 맞게 .gitlab-ci.yml 파일을 수정할 수 있습니다.

5. CI/CD 실행

이제 GitLab CI/CD를 실행할 준비가 되었습니다. 이를 위해 GitLab 프로젝트 페이지에서 “CI/CD > Pipelines”으로 이동합니다. “Run pipeline” 버튼을 클릭하여 CI/CD 파이프라인을 실행합니다. GitLab은 .gitlab-ci.yml 파일을 참고하여 스크립트를 실행하고 결과를 보여줍니다. CI/CD 파이프라인이 성공적으로 완료되면 Vue.js 애플리케이션은 테스트되고 배포됩니다.

결과 확인

CI/CD 파이프라인이 완료되면 Firebase를 사용하여 배포한 Vue.js 애플리케이션을 확인할 수 있습니다. Firebase 콘솔에서 배포된 애플리케이션의 URL을 확인하고 브라우저에서 이를 열어서 애플리케이션을 확인해보세요.

결론

이제 Vue.js와 GitLab CI/CD를 사용하여 애플리케이션을 빠르게 테스트하고 배포할 수 있는 환경을 구성했습니다. CI/CD를 사용하면 개발 프로세스를 자동화하여 개발 효율성을 향상시킬 수 있습니다. Vue.js와 GitLab CI/CD는 함께 사용하기 좋은 툴이며, 이를 통해 프로젝트를 더욱 효율적으로 관리할 수 있습니다.