[📛 Error] 리액트 배포 후 새로고침 시 404 Error

배포하고서 문제가 없어보였으나, 새로고침할 때마다 404 에러가 뜬다. 

로컬에서는 정상적으로 작동했던 것 같은데.. 

검색해보면 여러 사람들이 한 번쯤은 겪고 지나간 에러인 것 같다. 

 

👀 에러 파악하기 

 

리액트의 특성을 파악하면 쉽게 해결할 수 있는 문제였다. 

 

사용자가 처음 접속 후 서버에 요청할 시 index.html을 보내주는데 이 파일에는 bundle.js나 css 파일이 연결되어 있다. 

html 파일을 읽으면서 react-router가 작동되는데 서버 쪽이 아닌 클라이언트 사이드에서 이루어지며 단순히 주소만 바꿔주며 경로를 잡아준다. 

이러한 상태에서 새로고침을 하게 되면 url은 react-router의 경로로 되어 있기 때문에 서버는 어떤 것을 반환해달라는 것인지 알 수 없어서 404 에러가 발생하는 것이다. 

 

 

👩‍🔧 에러 해결하기 

 

@Controller
public class WebController implements ErrorController {
    @GetMapping(value =  {"", "/join","/mypage", "/login", "/shoes", "/home",
            "/myShoes", "/logout", "/writeReview", "/userpage", "/error", "/shoes/**"})
    public String forward() {
        return "forward:/index.html";
    }
}

 

모든 URL을 index.html으로 forwarding하도록 설정해주었다. 

 

이외에도 nginx를 이용해서 해결하는 방법도 있다고 한다. 

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

설정되지 않은 경로에 대한 기본값을 지정하는 것이다. 

nginx.conf 파일에 위와 같은 내용을 설정해주면 된다. 

$uri 경로를 찾지 못하면 index.html로 보낸다는 의미이다. 

 

 

다음에는 리액트의 특성에 관련된 내용을 정리해봐야겠다. . 

 

참고

http://ngmsoftware.com/bbs/board.php?bo_table=study&wr_id=854

 

https://sangmin802.github.io/Study/Think/react-router-problem/