😹 Nginx로 전달하는 Vue 페이지 하위 경로 접속시 나타나는 404오류 해결하기

문제

Nginx에서 Vue 프로젝트 빌드 파일을 전달하도록 환경을 구성했다.

메인페이지가 잘 나오는 것(http://example.com)을 확인하고 하위 경로도 잘 나오겠지라고 생각했다.

하지만 Vue 라우터에 등록한 하위 경로(http://example.com/home 등..)에 접속했더니 404 에러가 나타났다.

 

원인

Vue가 SPA이기 때문이다. Nginx는 정적 컨텐츠를 전달할 때, root 디렉터리에서 파일의 존재 여부를 찾는다.

'http://{IP주소}:{포트번호}/mainpage' 로 요청을 보내고 nginx 설정에서 root 디렉터리를 '/usr/share/nginx/html' 이라고 했을 때, 해당 root 경로 안에서 mainpage.html 이라는 파일을 찾아 전달하려고 한다는 말이다.

 

하지만 나의 경우 하위 경로가 파일로 존재하는 것이 아니고 하나의 페이지에서 내용만 바뀌는 SPA 방식이기 때문에 존재하지 않는 파일이라는 의미에서 404 에러가 나타났던 것이다.

 

해결과정

1) sites-available, sites-enabled 폴더를 만든다.

mkdir /etc/nginx/sites-available
mkdir /etc/nginx/sites-enabled

2) default 를 생성한다.

cd /etc/nginx/sites-available
touch default

3) default에는 다음과 같은 내용을 작성한다.

server {
	listen 80 default_server;
    listen [::]:80 default_server;
    
    # 나의 루트 디렉터리는 해당 경로였다.
    root /usr/share/nginx/html;
    # 거기서 다음과 같은 특정 파일들만을 본다.
    index	index.html	index.htm	index.nginx-debian.html;
    
    server_name _;
    
    location / {
    	# 다음과 같이 변경을 해서 파일을 찾는게 아니도록 설정했다.
    	try_files $uri	$uri/	/index.html;
    }
}

try_files 내부 리디렉션이 수행되어 http://{IP주소}:{포트번호}/mainpage' 와 같은 접근시 /usr/share/nginx/html/mainpage.html이 반환되도록 한다.

 

$uri 는 'http://{IP주소}:{포트번호}/mainpage' 와 같은 접근시 /mainpage 부분이 된다.

 

4) nginx.conf 파일에 sites-enabled를 포함시킨다.

나의 경우 맨 마지막 괄호가 닫히기 직전에 작성을 해줬다. 

include /etc/nginx/sites-enabled/*;

5) sites-availble과 sites-enabled를 링크로 연결한다.

ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default

6) 잘 실행이 되는 지 테스트 한다.

nginx -t

 

성공적으로 테스트 되면, nginx를 재시작 해주자!

 

결과

결과적으로, 404에러가 해결되어 하위 경로로 라우팅이 잘 동작했다.

 

출처

https://gist.github.com/sanrandry/bd4350a591f62eb259e48cd9fbfcd642

nginx sites-available folder not found

https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/

Serving Static Content | NGINX Plus