[인프라] Vue.js, React 배포 이후 새로고침하면 404 Not Found

문제 상황

 

프론트를 Nginx랑 Docker를 이용해 EC2에 배포해놨는데, 배포한 프론트 서버에 접속했을 때 새로고침하거나 url을 입력해서 접속하면 404 Not Found 페이지가 뜨는 문제가 발생했다. ` GET http://{프론트 서버 ip}/login 404 (Not Found) ` 이런식으로..

 

찾아보니 Vue.js 프로젝트에서는 History 모드를 사용하는 Vue Router를 사용하고 있으니, 실제로 서버 설정에서 적절한 리다이렉션 처리가 필요하다고 한다.

• History 모드는 클라이언트 사이드에서 라우팅을 담당하기 때문에, 사용자가 직접 URL을 입력하거나 새로 고침을 할 때 서버가 해당 경로의 파일을 찾을 수 없어서 404 오류가 발생한다고 한다.

현재는 Vue.js로 배포한 서버에 문제가 발생한 것인데, 이전에 React로 배포했을때도 같은 문제가 발생한 적이 있었다.

 

해결 방안

 

1. nginx 설정 파일 변경 필요

모든 서버 요청을 index.html로 리다이렉션 하게끔 nginx 설정 파일을 루트에 생성해준다.

server {
    listen 80;
    server_name {도메인 입력};

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

default.conf

 

2. 도커로 이미지를 빌드해서 배포중이기 때문에, 도커파일에서 nginx 설정파일을 복사하는 명령어를 추가하여 도커 이미지 내에 위치하도록 해준다.

# 사용자 정의 Nginx 설정 파일 복사
COPY ./default.conf /etc/nginx/conf.d/default.conf

Dockerfile

 

3. 이후 다시 빌드하니, 오류가 해결되었다.