Express + React 배포 설정

express 

1. http://localhost:3000/images/kitten.jpg 와 같이 로드 할 수 있도록 static 설정을 해준다.

app.use(express.static(path.join(__dirname, 'public')));

 

2. http://localhost:3000/detail/5f1fff21ecee792a58c8fe17 와 같이 / 이외의 url에서 접근해도 index.html을 바라보도록 설정한다.

(라우팅 처리는 react에서 한다.)

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

 

 

react

webpack 설정에 publicPath: '/'를 해준다. (static file이 root를 바라보도록)

  output: {
    filename: 'bundle.[hash].js',
    publicPath: '/'
  },

 

참고
https://cocoder16.tistory.com/4

react-router와 서버의 router를 같이 사용하기 (express 예제 포함)