react 특정 path에 배포

react 특정 path에 배포

요즘 front-end 라이브러리 또는 프레임워크에선 pjax 방식으로 라우팅 관리를 할 수 있다

• https://poiemaweb.com/js-spa
  • pushState + ajax

react-router-dom도 같은 방법으로 구현되어 있을 것이다

이번에 특정 URL path가 react의 home이 되도록 해야하는 이슈가 있었다

• e.g., www.some-domain.com/course/study 처럼 /course/study가 home이 되어야 했다

특정 path로 home 설정하기

• CRA를 사용하면 환경변수로 PUBLIC_URL을 설정할 수 있다

  • 이것을 우리가 원하는 path(/course/study)로 지정하면 될줄 알았다

• 하지만 react-router-dom에서 push를 '/'를 home으로 해주고 있었기 때문에 navigate 등 경로에 영향을 주는 모든 곳에 PUBLIC_URL을 붙여 주어야 했다

  • e.g., ${process.env.PUBLIC_URL}/lesson/:lessonId

동작 테스트

개발 환경

• 개발 환경에서 테스트하는 것은 간단했다
• package.json에서 start script 맨앞에 PUBLIC_URL=/course/study 같이 원하는 경로를 붙여주면 되었다

배포 환경

• 매번 서버 개발자한테 빌드파일을 주고 테스트해달라고 요청할 수 없었기에
  nginx를 로컬에 설치해서 course폴더를 생성하고 그 안에 study 폴더를 생성해서 빌드된 react 파일들을 구동하여 배포환경 테스트를 진행하였다

왜 특정 path에 배포하려 했는가?

• 백엔드에서 특정 라우팅경로를 태워서 (/course) 해당 경로에 미들웨어를 붙여서 무언가를 하려고 했다
• 정확히는 잘 모르겠지만 미들웨어를 태우기가 어렵다는 것 같았다(정확히는 잘모름, 라라벨 관련 이슈인 것 같았다)
• SSO같은 인증 프로세스를 해당 미들웨어에서 처리하려 했으나 잘되지 않아서 고민하고 있어서 인증프로세스를 프론트에서 API요청을 통해 처리해야될 것 같다는 의견을 제안했다
• 또 다른 의견으로 웹서버에서 서브도메인을 설정해보는 것은 어떤지 제안했으나 다음주에 백엔드 개발자들끼리 고민해서 결정될 것 같다

결론

• react로 특정 path에 배포를 하는 것은 가능하다
• 하지만 백엔드서버 라우팅에 붙은 미들웨어로 뭔가를 컨트롤 할 순 없는 것 같다
  • html에서 pushState로 URL을 조정하지만 서버까지 전달되지않기 때문