Vue.js 프로젝트를 EC2에서 Nginx로 배포하는 방법

 

Vue.js로 만든 프론트엔드 프로젝트를 EC2에 배포하고, Nginxx를 통해 정적 파일을 서빙하는 방법을 정리했다.

또한, 백엔드 API와 연동하는 설정 및 Swagger 접속 설정까지 포함했다.

 

1. 프로젝트 빌드

EC2에 배포하기 전에 Vue 프로젝트를 빌드해야 한다.

Vue 프로젝트 폴더에서 다음 명령어를 실행한다.

npm run build

 

빌드가 완료되면 dist 폴더가 생성된다.

이 dist 폴더 안에는 assets 폴더와  index.html 파일이 포함되어 있다.

 

이제 EC2 인스턴스의 Nginx root 경로로 파일을 옮겨야 한다.

파일을 전송하는 방법은 scp 명령어를 사용하면 된다.

여기에서 볼 수 있다.

 

2. Nginx 설치 및 설정

1) Nginx 설치

EC2 인스턴스에 인스턴스에 접속한 후 다음 명령어를 실행하여 Nginx를 설치한다.

sudo yum install nginx -y

 

설치가 완료되면 Nginx를 시작하고 부팅 시 자동으로 실행되도록 설정한다.

sudo systemctl start nginx
sudo systemctl enable nginx

 

2) Nginx 설정 변경

Nginx의 설정 파일을 열어 수정한다.

sudo vim /etc/nginx/nginx.conf

 

server{} 블록 안에서 기존 설정 중 중복되는 부분을 제거하고 아래 내용을 추가한다.

 

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri /index.html;
}

 

 

try_files $uri /index.html; 설정을 추가하는 이유는 Vue.js가 SPA(싱글 페이지 애플리케이션)이기 때문이다.
Vue는 경로가 여러 개일 수 있지만, 모든 요청을 index.html로 처리해야 한다.
이 설정이 없으면 새로고침 시 404 에러가 발생할 수 있다.

 

 

3. 백엔드 서버와 프록시 연결

Vue 프론트엔드에서 백엔드 API와 통신하려면 프록시 설정이 필요하다.

백엔드 서버의 IP 주소와 포트를 proxy_pass에 설정하면 된다.

 

Nginx 설정 파일(/etc/nginx/nginx.conf)의 server {} 블록 안에 다음 내용을 추가한다.

 

location /api/ {
    rewrite ^/api/(.*) /$1 break; 
    proxy_pass http://백엔드서버의IP:8080;  
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

 

 

4. Swagger 연동

Swagger UI를 프론트엔드에서 접근할 수 있도록 설정하려면 아래 내용을 추가한다.

 

location /swagger {
    proxy_pass http://백엔드서버의IP:8080;  
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

 

 

설정을 해준뒤엔 항상 systemctl restart nginx로 적용을 꼭 시켜준다.

 

sudo systemctl restart nginx

 

이제 http://EC2_PUBLIC_IP로 접속하면 잘 보일것!