[Webpack] SPA 구현 시 새로고침 후 404 에러 (라우팅 에러)

Webpack과 Vanilla JavaScript를 사용하여 SPA를 구현하던 중 에러가 발생했다.

 

 

문제 상황

메뉴바 Click을 통한 페이지 이동에는 문제가 없다.

 

그러나 새로고침을 하거나 주소창에 URL 입력 시 404 에러가 발생했다.

단 루트 페이지(/)에서는 에러가 발생하지 않았다.

 

원인

처음에는 window.history.pushState를 활용한 라우팅 관련 코드가 원인이라고 생각했다.

그러나 관련 코드를 수정해도 문제가 해결되지 않았다.

 

주소창에 URL을 입력하는 것은 GET 요청을 의미한다.

그러므로 에러가 발생한 이유는 해당 URL의 GET 요청을 처리하지 못한 것이다.

서버에 없는 URL이기 때문에 해당 요청을 처리하지 못하고 404 에러가 발생한다.

 

해결방안

History API 사용 시, 404 에러 대신에 index.html 페이지를 제공할 수 있어야 한다.

 

웹팩의 devServer.historyApiFallback 속성을 사용하면 문제를 해결할 수 있다.

historyApiFallback : 설정된 URL 이외의 경로로 접근했을 때 404 응답 대신 index.html 제공

 

webpack.config 에 아래 코드를 추가해주어야 한다.

// webpack.config.js

mode: 'production',

entry: {
  // 생략
},

output: {
  // 생략
},

devServer: {
  historyApiFallback: true,
},