client는 리액트를 사용하여 구현하였고, build 명령어를 통해 생성된 build
내용물을 server/public
으로 옮겨 서버의 url에 접속하면 client에 접근할 수 있도록 구현하였다.
build 시 build
폴더가 생성되고 그 안에 패키지화된 파일이 저장되는데, build할 때마다 server/public
폴더로 계속 옮겨주어야 한다. 너무 귀찮아서... package.json
의 scripts
부분을 아래와 같이 수정하여 내용물의 이동과 폴더 삭제를 한번에 할 수 있도록 만들었다. build 내용물을 삭제하고 싶지 않다면 맨 뒤의 && rm -rf ./build
를 지우면 된다.
"scripts" :{
"build": "react-scripts build && rm -rf ../server/public/* && cp -r ./build/* ../server/public && rm -rf ./build"
}
http://127.0.0.1:{port}
에 접근했을 때 client를 실행하려면 server/public
의 index.html
를 실행해야 한다. express에서는 이를 지원한다.
app.use(express.static('public'));
React에서 client side routing을 구현하였다면 아래와 같이 작성해야 url을 통해 직접 접근을 할 수 있다.
app.use(express.static(path.join(__dirname, 'build')));
+app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
배포를 하기 위해서!
파일을 압축하여 용량을 줄이고 코드 내용을 확인할 수 없도록 만든다.
client side routing은 SPA
// 정리 필요!
이번엔 react router를 통해 client를 SPA(Single Page Application)로 구현하고, build 명령어를 통해 server에서 구동하도록 만드는 비교적 간단한 스프린트였다. express 문서를 보고 client 코드를 연결하는 건 크게 어렵지 않았지만, react-router는 공식 문서를 봐도 어떻게 돌아가고 있는건지 모르겠고 어떻게 구현해야 내가 원하는 대로 만들 수 있을지 어려워서 스프린트 기간 내 마치지 못했다. 이후 참고할 만한 코드가 있다면 따라치면서 익숙해지도록 해야겠다...