[DevOps] 배포한 리액트 프로젝트의 nginx 서버 404 에러

 

배포한 프로젝트의 url에 직접 주소를 입력하여 접근하려니 404 에러가 났다.

 

에러 원인

리액트 앱이 Single Page Application(SPA)으로 주로 구성되어 있고, 웹 서버가 SPA의 라우팅 방식을 제대로 처리하지 못하기 때문에 발생한다. 따라서 웹 서버가 클라이언트 사이드 라우팅을 올바르게 처리하도록 구성해야 한다.

 

SPA에서는 브라우저가 서버에 단 한 번 페이지를 요청하고, 이후 모든 라우팅은 클라이언트 측에서 자바스크립트를 통해 처리된다.

사용자가 애플리케이션 내에서 다른 페이지로 이동할 때, 서버에 새 페이지를 요청하는 것이 아닌 리액트 프레임워크를 통해 동적으로 컨텐츠를 변경한다.

 

그러나 브라우저의 주소창에 URL을 직접 입력하는 경우 해당 요청은 서버로 가게 되고, 서버에서 경로 요청에 대한 설정이 되어 있지 않기 때문에 404 Not Found 에러가 반환된다.

 

 

트러블 슈팅 

해결하기 위해서는 Nginx 설정 파일을 수정하여, 모든 요청을 리액트 앱의 index.html로 리다이렉트하도록 설정해야 한다.

설정을 변경하면 서버는 직접적으로 해당 경로에 대한 파일을 제공하지 않고, 대신 리액트 앱이 클라이언트 사이드에서 라우팅을 처리할 수 있게 된다.

 

과정

나는 인스턴스 내부에 도커 컨테이너를 풀받았기 때문에 인스턴스 내부의 도커 컨테이너에 접속했다.

docker exec -it ContainerID /bin/bash

 

(bash가 오류나는 경우에는 sh를 쓰면 됨)

 

 

도커 컨테이너 내부에 접속한 후, /etc/nginx/conf.d/default.conf 의 파일을 열어 파일을 수정한다.

 

해당 파일에서 location을 수정해주면 된다.

 

...

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

...

 

이 코드는 알 수 없는 라우트로 접속했을 때 자동으로 index.html로 가도록 설정해주는 코드이다.

 

이후 도커 컨테이너를 재시작하면 더이상 에러가 뜨지 않는다!