http-server에서 React Router 404 오류를 수정하는 방법
React Router를 http-server 패키지와 함께 사용하다가 페이지를 새로고침할 때 404 오류가 발생하는 경우가 있습니다. 이 문제는 http-server와 기본적으로 호환되지 않는 HTML5 pushState 기능 때문에 발생합니다. 하지만 걱정하지 마세요. 이 문제를 해결할 수 있는 다양한 해결책이 있습니다.
해결책 1: http-server 구성하기
404 오류를 해결하는 한 가지 방법은 http-server를 구성하여 모든 요청을 react-router 설정이 있는 index.html로 리디렉션하는 것입니다.
이 해결책을 구현하기 위해 http-server를 실행하는 명령어를 수정할 수 있습니다:
http-server --proxy http://localhost:8080? ./build--proxy 플래그는 서버가 처리할 수 없는 오류 요청을 지정한 URL로 리디렉션합니다. 이 경우에는 index.html로 리디렉션됩니다. 이 페이지로 모든 요청을 리디렉션함으로써 react-router가 내부적으로 라우팅을 처리합니다.
이 명령어를 자주 사용하는 경우에는 package.json 파일에 스크립트를 추가하여 이 과정을 간소화할 수 있습니다:
"scripts": {
...
"serveprod": "npm run build && http-server --proxy http://localhost:8080? ./build"
...
}npm run serveprod를 실행함으로써 build 폴더를 사용하여 애플리케이션을 편리하게 빌드하고 서비스할 수 있습니다.
해결책 2: Express 서버 사용하기
React + Webpack 프로젝트에서 작업 중이라면 create-react-app 설명서에서 제공하는 지침에 따라 새로고침 문제를 해결할 수 있습니다. 이를 위해 Express 서버를 설정합니다.
먼저 다음 명령어를 사용하여 Express를 설치합니다:
npm i --save expressserver.js라는 파일을 만들고 다음 코드를 추가합니다:
// 라이브러리
const express = require("express");
const path = require("path");
// 서버 생성
const app = express();
const PORT = 3000;
const BUILD_FOLDER = "public";
app.use(express.static(path.join(__dirname, BUILD_FOLDER)));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, BUILD_FOLDER, "index.html"));
});
app.listen(PORT);
파일을 저장하고 다음 명령을 사용하여 서버를 실행합니다:
node server.js이 설정은 Express 서버가 build 폴더에서 정적 파일을 제공하도록 구성합니다. 또한 모든 요청을 index.html로 전송하여 react-router가 적절하게 라우팅되도록 합니다.
해결책 3: Single Page Application 제한 처리하기
404 오류의 또 다른 원인은 애플리케이션이 Single Page Application (SPA)인 경우입니다. 이는 모든 사이트 데이터가 ‘/’ 경로에 로드되는 것을 의미합니다. ‘/’를 통해 사이트를 로드하지 않고 다른 페이지에 접근하려는 경우 라우팅이 실패합니다.
이 제한을 해결하기 위해 Tyler McGinnis의 블로그 게시물에서 언급된 기술을 구현하여 새로고침시 알맞은 라우팅 동작을 보장할 수 있습니다.
결론
React Router를 사용하여 http-server로 제공되는 페이지를 새로고침할 때 발생하는 404 오류는 다양한 접근 방식을 사용하여 해결할 수 있습니다. http-server를 구성하거나 Express 서버를 설치하여 HTML5 pushState가 올바르게 작동하도록 하여 원활한 네비게이션을 가능하게 하고 새로고침 시 404 오류를 방지할 수 있습니다. Single Page Application의 제한 사항을 이해하여 작업 중단되지 않는 라우팅에 적절한 해결책을 구현하는 데 도움이 될 것입니다.
