Vue.js 프로젝트 Jenkins로 nginx에 배포해보기

vue cli 를 통해 vue 프로젝트를 만들었습니다.

일반적으로 vue.config.js 를 따로 설정해 주지 않는 이상 npm run build를 실행하게 되면

해당 디렉토리에 dist라는 폴더가 만들어집니다.

build의 결과물인 dist라는 폴더를 nginx에 올려야 합니다.

 

1. vue 프로젝트를 git 저장소에 push를 합니다.

이렇게 push가 되었습니다.

---

2. webhook을 통해 젠킨스가 빌드되기를 바랍니다.

해당 저장소의 Settings 를 눌러줍니다.

 

Webhooks 를 눌러줍니다.

저는 이미 만들어놨기에 하나가 만들어져 있습니다.

여기서 Add webhook을 눌러줍니다.

URL은 젠킨스의 접속 주소입니다. 저는 ec2를 사용하기 때문에 ec2의 주소 + /github-webhook/ 를 추가해줍니다.

Content type는 application/json을 선택해줍니다.

이벤트는 Just the push event로 푸시 이벤트가 일어났을 때 요청하게 합니다. 다른 것을 선택하셔도 됩니다.

---

3. 젠킨스에 접속해 새로운 item을 생성합니다.

---

4. 생성한 item을 클릭 후 구성에 들어갑니다.

---

5. 깃 허브 저장소 URL을 입력하고, 브런치를 정해줍니다.

---

6. 깃 허브 hoot trigger가 일어났을 때 빌드가 되도록 선택해줍니다.

---

7. Build에 shell 을 추가하여 해당 Command를 입력하게 해줍니다.

/var/www/html 은 nginx를 설치하면 index.html이 위치하는 주소입니다.

해당 주소에 /dist 로 배포 하기 위해 기존에 존재한다면 삭제해주기 위함입니다.

 

cd 명령어를 통해 jenkins에 workspace로 이동해 해당 item으로 이동하여, npm을 install하고 run build를 통해 dist를 생성합니다.

 

dist 폴더를 /var/www/html/ 로 이동하여 옮겨줍니다.

 이제 깃을 이용해 push를 하면 젠킨스에서 이러한 빌드가 이루어집니다.

---

8. 이제 ec2에 접속하여 필요한 패키지 설치를 진행합니다.

sudo apt update
sudo apt upgrade
sudo apt-get install nginx
sudo apt-get install nodejs
sudo apt-get install npm

패키지 목록을 업데이트하고 패키지를 최신으로 업그레이드 한 후 nginx를 다운받습니다.

nodejs와 npm도 설치해줍니다.

---

9. Nginx 환경 설정을 합니다.

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

 

80포트로 접속하기 위한 설정과 /dist로 배포하기 위해 root 경로를 수정하고 index.html을 읽기 위해 수정해줍니다.

라우터를 이용하기 위해 location / 을 /index.html로 설정해줍니다.

(오타를 주의합니다.)

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html/dist;
    index index.html index.htm;
    server_name _;

    location / {
        try_files $url $url/ /index.html;
    }
}

 

restart 해줍니다.

sudo systemctl restart nginx

---

10. ec2 접속 주소 : 80 로 이동하면 이렇게 vue 프로젝트가 띄워지는 것을 볼 수 있습니다.

---

* nginx를 설정 후 vue 프로젝트 빌드를 위해 git push를 진행하여 jenkins에 정상 빌드가 되었는지 확인합니다.

* 80 포트가 사용중이여서 nginx restart가 안되는 경우 80포트를 사용중인 프로세스를 다 죽이고 다시 해줍니다.

* 포스팅에 사용한 깃 저장소는 public이며 private인 경우 git 계정을 등록해야 합니다.