React 빌드 후 정적 파일 서버에 올리기 (404 Error 해결)

• CRA 등을 이용하여 열심히 개발한 React 프로젝트를 빌드한 뒤, 이를 서버에 전달하여 정적 호스팅을 할 수 있다.
• 이 경우 자주 등장하는 문제가 바로 라우팅 된 페이지에서 새로고침을 하거나, root 경로('/') 곧바로 그 페이지에 접근하면 페이지를 찾을 수 없는 문제가 발생하는 것이다.
• 이는, SPA 환경에서 필연적으로 발생하는 문제로 내부에 라우팅은 JS에 의해 처리되고 실제 html은 맨 처음 한 번만 제공받기에 이런 문제가 발생한다.
• 대부분의 경우 별도의 설정이 없으면, build 폴더 내부의 index.html이 '/' 경로와 매칭되기에 최초 진입이나 '/' 경로를 시작으로한 라우팅에는 문제가 없다.
• 그러나 그 이외의 경로, 예를 들면 '/about'에 접근한다고 하였을 때 서버에서는 이에 대응되는 정적 파일이나 컨트롤러가 없기에 문제가 발생하는 것이다.
• 이러한 문제를 해결하기 위해서, 서버에서 모든 경로 혹은 라우팅이 가능한 경로들에 대하여 index.html을 전달해주면 된다.

🍒 다음은 해당 문제를 해결한 express 서버 예제이다.

const express = require('express')
const path = require('path')
const app = express()

// 정적 파일 디렉토리를 설정한다. JS, CSS, favicon 등 정적 파일을 전달하기 위함이다. root 경로('/)는 index.html 파일을 가르킨다.
app.use(express.static(path.join(__dirname, '../build')))

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, '../build', 'index.html'))
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`서버가 포트 ${port}에서 실행 중입니다.`)
})

build 폴더는 빌드된 React 정적 파일이다.