한이음ICT공모전에서 React + Nestjs로 프로젝트를 진행하고 있다. 개발 막바지라 도메인을 구매하고 배포를 준비하고 있었다.
ec2와 R3 route?를 이용해서 도메인을 연결하기는 했는데 http기본 포트가 80번이라 80번에 리액트 프로젝트를 배포할 필요가 있었다.
빌드 후 80번 포트 배포
https://ryeowon.github.io/posts/ReactJS_deployment/
여기에 따르면 빌드후 serve를 해야 80번 포트로 배포가 가능하다고 했다.
npm start에서는 문제가 없었던 것이, 빌드하고 80번 포트에서 실행했더니 리액트 <-> nest간 http통신이 이상했다.
의심이 갔던 부분은 리액트의 package.json에서 proxy가 설정되어 있었고, http통신을 할 때 proxy기반의 주소에서 상대주소로 접근했던 것이다.
리액트에서 프록시를 없애주었고 http요청할 때 풀주소로 요청하도록 했다.
CORS
리액트에서 프록시를 제거했더니 CORS이슈가 발생한 것 같았다.
https://docs.nestjs.com/security/cors
nest의 main.ts에서 프록시를 설정해주었다.
이전에 삽잘하다가 설치한 nginex가 80번 포트를 막고 있어서 nginex를 삭제했다.
리액트는 screen으로 비동기 돌리고 nest는 pm2로 비동기 돌렸다.
(pm2 등록할 때 꼭 sudo 써줘야한다.!!)
굉장히 많이 헤멨는데 기억이 안나서 줄여서 썼다
당직서면서 새벽3시에 작성하다보니까 제정신이 아닌거같다(당직사관님 지금 잔다 ㅋㅋ)
개졸리다 오늘 코딩 끝 !
