[React] Nginx 새로고침 404 에러 수정

location / {
	try_files $uri $uri/ /index.html =404;
}

 React를 배포하고, Nginx를 활용하여 서비스를 실행한 경우, index.html을 통하여 원하는 페이지로 이동 시에는 잘 넘어 가지만, 이동한 페이지에서 새로고침(F5)을 하는 경우 404 에러를 발생하게 됩니다.

 

 이를 해결하기 위해서는, 새로고침으로 전달된 uri 정보를 index.html를 통하여 uri로 이동하도록 설정을 해주어야 합니다.

server
{
    listen          80;
    server_name     localhost;
    #access_log     logs/localhost.log combined;

    location  /
    {
        try_files $uri $uri/ /index.html = 404;
        root   /data/sample;
    }
}

위와 같이 설정하게 되면, 80 PORT를 기준으로, 웹서버가 운영되며, root는 /data/sample의 index.html이고, 경로가 /가 아닌 uri를 통하여 들어온 경우, uri를 index.html 기준으로 실행해보고 없는 경우 404 에러를 발생하게 됩니다.