Data Engineering

[Infra] Vue.js CI/CD로 배포하기

Zyung 2023. 9. 28. 14:18

프로젝트를 진행하면서 Vue.js 배포를 담당하게 되었다.

기존에는 git에서 클론받아 직접 배포를 진행했었는데 CI/CD를 통해 환경을 구축하고 싶었다.

일단은 백엔드 배포를 통해서 Jeinkins 환경은 구축이 되어있었다.

먼저, CI/CD를 구축하기 위해서는 다음과 같은 절차로 배포한다.

  1. Local에서 Test
  2. Server에서 Test
  3. NginX에서 배포하기 
  4. CI/CD 구축하기

꼭꼭 테스트를 진행해보면서 이상이 없는지 확인하고 CI/CD를 구축

 

1. Local에서 Test하기

이건 개발하면서 계속 확인해 봤을 거라고 생각

 

2. Server에서 Test

서버에서도 똑같이 테스트해 본다

cd {Vue Project Name}
npm install 
npm run serve

http://{domain or ip}:8080

해당 url로 접속해서 잘 접속되는지 확인한다.

 

3. NginX를 통해서 Test

NginX는 Reverse-Proxy 서버이자 웹서버

 

1. NginX 설치

sudo apt install nginx
nginx -v

2. NginX 설정 변경

 

아까 git clone을 받은 프론트 프로젝트에서 다음과 같은 명령어를 통해 빌드 진행

npm install
npm run build

해당 폴더 내부에 dist라는 폴더가 생성된 것을 확인할 수 있다.

pwd 명령어를 통해 해당 디렉토리의 경로를 확인하고 설정을 진행한다.

sudo vi /etc/nginx/sites-enabled/default

이제 Nginx를 실행시킨다.

# syntax 검사
sudo nginx -t 
sudo service nginx restart

http://{domain or ip}로 접속해서 잘 접속이 되는지 확인한다.

 

 

4. CI/CD 구축

먼저 Jenkins가 이미 구축되어 있던 환경이었기 때문에 바로 Jenkins 설정부터 진행

 

 

1. Jenkins Plugins에서 nodejs 추가

 

Vue는 nodejs 환경이기 때문에 플러그인에서 Nodejs를 추가해주어야 한다.

Dashboard > Jenkins 관리 > Tools 에서 Nodejs 버전 선택해서 추가

 

 

2. 스크립트 작성

아까 위에서 했던 빌드와 배포를 그대로 Jenkins의 스크립트를 통해서 진행한다고 생각하면 된다.

 

1) 다음과 같이 Execute NodeJS script를 통해 NodeJS를 사용하겠다고 추가해 준다.

 

2)  빌드 수행

Execute shell을 하나 추가해서 빌드를 수행시킨다.

cd /var/jenkins_home/workspace/fe_deploy/fe
npm install
npm run build

 

3)  빌드 수행한 결과(dist 폴더)를 프론트가 있는 서버로 전송

Send files or execute commands over SSH 추가

 

- 기존 서버에 있는 빌드 파일부터 삭제

빌드 →  배포가 계속해서 일어나기 때문에 파일을 보내기 전에 기존에 보냈던 빌드 파일을 삭제하고 진행

-  파일 전송

dist 폴더는 내부에 js, css 등 다양한 파일과 폴더가 존재한다.

이러한 파일들을 모두 보내기 위해서 **/* 로 설정해 줘야 모두 전송이 된다.

  • Source files : 현재 서버에서의 파일 위치
  • Remove prefix: 앞에 주절주절 붙어있는 거 지우고 다른 서버로 보내기 위해 지우기
  • Remote directory: 보낼 곳의 위치 (나는 /front로 보내기로 /var/www/html은 권한이 없음…)
  • exec command: 보내고 나서 보낸 서버에서 수행할 스크립트 → 서버 재실행!!
echo "Sending dist file over SSH 1"
sudo service nginx restart

 

 

5. 이제 프론트가 있는 EC2서버에서 빌드 파일을 받은 장소를 NginX 설정에 반영

sudo vi /etc/nginx/sites-enabled/default

 

6. 이제 GitLab에서 푸시하였을 때 자동으로 Jenkins가 배포할 수 있도록 Webhook을 설정

Jenkins

Jenkins > { Job Name } > Configuration > 빌드유발

다음과 같이 설정

고급에서 Secret token을 생성하여 복사!

 

Gitlab

발급받은 Secret token을 Gitlab의 Webhook에 설정

URL은 Job이름이랑 맞추면 된다.

 

 

 

7. Test를 통해 CI/CD 구축 확인

Gitlab에서 Push events를 눌렀을 때 Jenkins에서 잡을 실행하고 잘 수행한다면 구축이 완료된 것이다.