[Management] Nginx를 이용한 Vue.js와 Spring 배포

 

개요

저희 프로젝트는 AWS에 Spring Project 내부 /resources/static에 Vue.js 빌드파일을 넣고,
WAR파일을 빌드하여 하나의 빌드파일로 배포를 하고 있었습니다.

원래는 한 서버에서 두 개의 파일을 빌드해야 프론트를 수정할 때
서버를 끄지 않고 진행할 수 있습니다. 하지만 의사소통의 문제로 하나의 빌드파일을
이용해서 배포를 하고 있었습니다.

그래서 AWS서버에 Nginx를 이용해서 Vue.js 빌드파일을 웹서버에 올리고,
Spring과 연결하는 작업을 진행하였습니다.

 

1. EC2 서버에 접속하여 Nginx 설치

sudo apt-get update
sudo apt-get install nginx #nginx 설치
sudo vi /etc/nginx/sites-enabled/default #nginx 설정 파일 수정

 

2. Nginx 설정 파일 작성

server {
        listen 80 default_server;
        listen [::]:9090 default_server;
        server_name {aws IPv4};
        location / {
                root /home/ubuntu/front;
                index index.html
                try_files $uri $uri:9091/ /index.html;
        }
        location /api {
                proxy_pass http://{aws Ipv4}:9091;
        }
}

웹 서버를 열기 위한 Index파일의 위치 설정과, Spring 서버의 API를 호출하였을 때 (/api) 설정들을 했습니다.

 

3. Nginx 재실행

sudo systemctl restart nginx #nginx 재시작
sudo systemctl status nginx #nginx 상태 확인

 

4. Vue.js 실행 (Index.html 접속)

http://{AWS IPv4} #ex) http://168.0.0.4

 

5. Spring Server 실행

nohup java -jar project-0.0.1-build.jar & #Spring Server 백그라운드에서 실행

 

 

마무리

Nginx를 통해 Vue.js를 웹서버에 올리고, Spring Boot Server를 실행시켜서
AWS EC2 Server에 Vue와 Spring을 동시에 올리는 작업을 해보았습니다.

처음 해보는 작업이라 바로 되지 않아 많은 시도를 했지만 결국에는
성공을 하여 배포를 진행할 수 있어서 뿌듯했습니다.

다음에는 서버 무중단 배포에 관한 내용도 다뤄보겠습니다. 감사합니다.