[web] react 새로고침 시 404 Error

어디서?

로컬환경에서는 문제없었지만, 배포 이후, 새로고침 하면 404 Error가 발생했습니다.

이러한 에러를 connect-history-api-fallback이라고 칭하기도 합니다.

 

왜?

로컬환경에서 실행할 때는 npm start로 시작하기 때문에 react - router가 정상적으로 작동하게 됩니다.

물론, 배포 환경에서도 react-router는 정상적으로 작동하지만, 유저가 직접 url을 입력하거나, 새로고침하는 경우 서버에 해당 요청에 대한 파일을 요구하게 됩니다.

저는 index.html밖에 없기 때문에 404에러가 발생했던 것입니다

 

해결법

저는 nginx를 이용하여 문제를 해결하였습니다.

server{
	root /home/ec2-user/cppp/front/build;
    	location / {
    	try_files $uri /index.html;
    }
}

root => 서버에서 제공할 정적파일 위치를 저장합니다.

try_files => 는 파일을 찾는 순서를 정의하는 지시자입니다.

위의 코드에서는 $uri에서 찾고, 원하는 파일이 없으면 /index.html을 주는 식으로 작동합니다.

 

<참고>

저는 위 방식을 이용했을 때, permission에러 또한 발생했습니다.

/home/ec2-user/cppp/front/build에 접근할 권한이 없어서 발생했던 문제였습니다.

nginx.conf 파일에서

user root;로 변경해 주었더니 해결되었습니다.