[Management] Nginx - vue.js 새로고침 시 404 Error

 

Nginx 에서 vue.js를 빌드 한 후 홈페이지에 접속을 했습니다.
그리고 새로고침을 눌렀을 때 아래와 같은 오류가 발생했습니다.

404 Not Found Page

 

<해결방법>

/etc/nginx/sites-enabled/default 설정 파일 수정

기존 설정 파일

server {
        listen 8081 default_server;
        listen [::]:8081 default_server;
        server_name {publicIPv4};
        location / {
                # add_header Cache-Control "max-age=0, no-cache, no-store, must-revalidate";
                # add_header Pragma "no-cache";
                root /home/ubuntu/twim/dist;
                index index.html
                try_files $uri $uri/ /index.html = 404;
        }
        location /api {
                proxy_pass http://{publicIPv4}:8080;
        }
}

 

수정 설정 파일

server {
        listen 8081 default_server;
        listen [::]:8081 default_server;
        server_name {publicIPv4};
        
        index index.html //추가
        
        location / {
                # add_header Cache-Control "max-age=0, no-cache, no-store, must-revalidate";
                # add_header Pragma "no-cache";
                root /home/ubuntu/twim/dist;
                index index.html
                try_files $uri $uri/ /index.html = 404;
        }
        location /api {
                proxy_pass http://{publicIPv4}:8080;
        }
}

Server{} 내부에도 index index.html 추가

 

[참고]

1. Vue 라우터 및 Nginx로 새로고침 시 404