리액트 배포 후에 발생한 400 에러의 경우 SPA 특성으로 인해 경로와 맞는 파일을 서버에서 찾지 못해서 발생하는 문제일 것이다. server.js에 아래와 같이 고정 파일을 명시해두면 해결된다.
(server.js)
// production mode일 때
// 모든 경로는 빌드된 index.html를 불러오도록 세팅
if(process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "../client/build/index.html"))
})
}그런데! 배포 후에 500 에러가 발생했다. 원인은 세 가지 중에 하나였다.
- 서버 통신의 Timeout 시간 지연 오류
- 서버 트래픽 과부하
- 서버 언어의 구문 에러(스크립트 문법 오류)
과부하 될만한 콘텐츠가 전혀 없는 페이지이므로 누가 봐도 마지막이 원인일 것으로 예상했다.
그런데 로컬에서는 새로고침 해도 페이지가 정상적으로 나오고, 문법 에러도 없다는데 도대체 어디가 문제일까 답답해 하던 차에...
server.js에 path 모듈을 불러오는 코드를 추가해보라는 글을 읽게 되었다. 설마...? 하면서 속는 셈 치고 적용해봤는데 해결되었다.
const express = require('express')
const app = express()
const port = process.env.PORT || 5000
...
// path 불러오는 코드 추가!
const path = require("path");
...
// production mode
if(process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("*", (req, res) => {
// path는 여기에서만 사용되었다.
res.sendFile(path.join(__dirname, "../client/build/index.html"))
})
}
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
+=