개요
CI/CD (지속적 통합/지속적 배포)는 개발자들이 애플리케이션을 빠르고 신뢰할 수 있는 방식으로 개발, 테스트, 배포하는 프로세스입니다. 이 글에서는 Vue.js를 사용하여 프론트엔드 애플리케이션을 개발하고, Jenkins를 사용하여 CI/CD 파이프라인을 구축하는 방법에 대해 알아보겠습니다.
Vue.js 프로젝트 설정
먼저 Vue.js 프로젝트를 설정해야 합니다. 아래 명령어를 사용하여 Vue CLI를 설치합니다:
npm install -g @vue/cli
프로젝트를 생성하기 위해 다음 명령어를 실행합니다:
vue create my-project
Vue CLI가 프로젝트 생성 후 초기 설정을 도와줄 것입니다. 설정 중에는 프로젝트 템플릿, 라우터, 상태 관리 등을 선택할 수 있습니다.
Jenkins 설정
Jenkins를 설치하고 구성해야합니다. Jenkins를 다운로드하여 설치하는 방법은 여기에서 확인할 수 있습니다.
Jenkins를 설치한 후, 웹 브라우저에서 Jenkins 홈페이지에 접속합니다. 초기 설정을 완료한 뒤, 새로운 프로젝트를 생성합니다.
- Jenkins 홈페이지에서 새로운 Item을 클릭합니다.
- 프로젝트 이름을 입력하고, Freestyle project를 선택합니다.
- OK를 클릭하여 프로젝트를 생성합니다.
프로젝트 설정 페이지에서 다음 단계를 수행합니다:
- 소스 코드 관리 섹션에서 Git 리포지토리의 URL을 입력하고, 인증 정보를 설정합니다.
- 빌드 유발 섹션에서 빌드를 트리거할 이벤트를 선택합니다. 일반적으로 Git 커밋 이벤트를 선택합니다.
- Build 섹션에서 빌드 스크립트를 작성합니다. Vue.js 프로젝트를 빌드하는 명령어인
npm run build를 포함해야합니다.
이제 Jenkins는 Vue.js 프로젝트를 설정하고 빌드할 수 있습니다.
CI/CD 파이프라인 구축
Jenkins를 사용하여 CI/CD 파이프라인을 구축해봅시다.
- Jenkins 대시보드에서 새로운 Item을 생성합니다.
- 프로젝트 이름을 입력하고, Pipeline을 선택합니다.
- OK를 클릭하여 파이프라인을 생성합니다.
파이프라인 설정 페이지에서 다음 단계를 수행합니다:
- Definition 섹션에서 Pipeline script를 선택합니다.
- 스크립트 영역에 다음과 같은 Jenkins 스크립트를 작성합니다:
pipeline {
agent any
stages {
stage('Checkout') {
steps {
checkout scm
}
}
stage('Build') {
steps {
sh 'npm ci'
sh 'npm run build'
}
}
stage('Deploy') {
steps {
sh 'npm install -g firebase-tools'
sh 'firebase use <project-id>'
sh 'firebase deploy --only hosting'
}
}
}
}
위 스크립트는 다음 세 가지 단계로 구성됩니다:
- Checkout: Git 리포지토리에서 소스 코드를 체크아웃합니다.
- Build: Vue.js 프로젝트를 빌드합니다.
- Deploy: Firebase Hosting으로 프로젝트를 배포합니다.
위 예제에서는 Firebase를 사용하여 호스팅합니다. Firebase가 아닌 다른 호스팅 플랫폼을 사용하려면 해당 플랫폼의 배포 스크립트로 변경해야합니다.
- Save를 클릭하여 파이프라인을 저장합니다.
이제 Jenkins CI/CD 파이프라인이 완성되었습니다. 코드를 커밋하고 Jenkins가 자동으로 빌드 및 배포하는지 확인할 수 있습니다.
결론
Vue.js와 Jenkins를 사용하여 CI/CD 파이프라인을 구축하는 방법에 대해 알아보았습니다. CI/CD를 통해 개발자들은 애플리케이션을 더욱 효율적으로 개발, 테스트 및 배포할 수 있습니다. 이러한 프로세스는 개발자들에게 시간과 노력을 절약해줄 뿐만 아니라 애플리케이션의 품질과 안정성을 향상시킵니다.
더 자세한 정보는 Vue.js 공식 문서와 Jenkins 공식 문서를 참조하십시오.