[Nginx] SPA 빌드 파일 배포 설정 (with. Proxy)

설치 환경

Docker를 통해 nginx를 설치하여 진행 하였으므로, linux 환경에서 진행됨.

자세한 사항은 nginx 공식문서를 참조.

SPA 빌드 파일 배포

빌드 파일 배포

vue3 + vite를 이용하여 빌드된 파일이 dist 경로에 생성 되었다.

해당 파일을 nginx의 root 경로에다가 위치시켜준다.

root 경로는 설정하기 나름이지만 보통 /usr/share/nginx/html/ 경로를 root 경로로 주로 사용하는 것 같다.

nginx 설정 파일 작성

설정 파일 위치는 /etc/nginx/conf.d 디렉토리 하위에 위치 시킨다.

경로는 설치 환경마다 달라질 수 있다. 문서 참조

/etc/nginx/conf.d/default.conf

server {
    listen 80;
    client_max_body_size 5M;
		
    location / {
		    # base 경로 설정
        alias /usr/share/nginx/html/;
        
        # 맵핑된 uri가 없으면 index.html 반환
        ## 경로 목록을 넘겨 해당 경로가 없으면 다음 경로를 찾는 지시어
        ## SPA 프로젝트의 경우 내부 라우터를 사용하기 위함
        try_files $uri $uri/ /index.html;
    }
		
		# Reverse Proxy
		## /api 경로는 backend 서버로 proxy 되도록 설정
    location /api {
        proxy_pass <http://192.168.10.2:8080>;
    }
}

위에서 3가지 주요한 설정만 하면 된다.

• alias
  • index.html 파일이 위치한 root 경로를 명시해준다.
• try_files
  • 맵핑된 url이 없는경우 index.html을 반환해주는 설정을 해준다.
  • SPA 프로젝트의 경우 내부 라우터를 사용할 수 있게 하기 위한 설정이다.
• proxy_pass
  • api 서버가 다른 호스트에 있는 경우, proxy 설정을 통해 해당 호스트로 요청하게 해준다

참조

• Reverse Proxy
• Serving Static Content
• try_files