설치 환경

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 설정을 통해 해당 호스트로 요청하게 해준다

참조