[Nginx] Nginx 에서 Dist 파일 연동 하기

  Nignx 에서 동적 어플리케이션의 페이지와 연동 하는 reverse proxy 방법의 upstream 이 아닌, vue.js 나 angular.js 와 같은 Fornt-end 프레임워크를 이용하여 개발한 SPA 어플리케이션과 REST 기반의 API 서버와 연동하고자 할때, 다른 방법으로 연동해야 한다.

  이를 위해서는 먼저 nginx 를 배포된 front-end 어플리케이션과 연동 작업이 필요하며, 아래와 같이 연동 해준다.

1) build 된 dist 파일을 특정 폴더에 복사 해준다.

build 된 파일을 /var/www/html/vue/app이라는 폴더에 복사한다.

2) nginx 서버 설정

• /etc/nginx/sites-available/default 파일을 아래와 같이 수정 한다.

3) ngix 서버 재시작

• sudo service nginx restart