이글을 쓰게된 계기
토이 프로젝트를 react를 만들어서 vercel에 배포를 해놨습니다. 하지만 local에서 서버를 돌리고 request를 날려보니 mixed content 문제가 발생했습니다. https가 필요하다고 합니다. 이 문제를 해결하기 위한 과정입니다.
🟦 첫 번째 시도
로컬에서 ssl을 집어넣어서 https 요청을 커버하자!
⇒ 이 때는 ssl 계념을 잘 몰랐습니다. ssl을 적용하는건 로컬에서 돌리면 되는거 아냐? 라고 생각했었습니다. 하지만 인증된 도메인이 필요했었습니다.
🟦 두 번째 시도
ec2에 서버를 올려서 ssl을 받자! ⇒ ec2에 docker-compose로 nestjs 서버를 띄우는 방법
위 글에서 postgres 부분을 aws rds로 바꿨습니다. 그리고 nestjs 서버를 docker-compose로 띄웠습니다.
- postgres를 rds로 띄우기 참고
- nestjs 서버를 docker-compose로 띄우는거 참고
🟦 세 번째 시도
그런데 https요청이 안됐습니다. 가비아에서 jaewon.store 500원 주고 샀습니다
ssl 인증서 필요하다 ⇒ certbot이라는 무료 ssl 인증서 제공해주는 사이트가 있어서 공식문서 보고 따라했습니다.
참고
그리고 https를 서버에 그대로 적용하니 개발과정에서 https 요청이 에러가 났습니다. dev인 경우와 product인 경우를 나눠서 생각했습니다.
환경변수로 하는 방법이 더 깔끔할거 같아서 바꿀 예정입니다. 지금은 key가 있는지 없는지에 따라 서버를 생성할 때 ssl의 적용 유무를 나타냅니다.
위 방법대로 하면 linux에서 파일을 읽어오지 못했습니다. 그래서 어쩔 수 없이 .env 파일로 개발, 배포 환경 구분을 했습니다.
prop인 환경에서만 key를 가지게됩니다.
.env 파일안에는 NODE_ENV 환경을 적어두었습니다. ec2에 있는 .env 파일에는 prop를 적어주었습니다.
🟦 네 번째 시도
vercel에서 환경변수가 적용이 안되었습니다.
vercel에서 환경변수 사용하는 법
프로젝트 세팅에 들어가서 Enviroment Variables에 넣으면 됩니다.
REACT_APP_API_ADDRESS=https://서버주소명:포트번호
환경변수에 api 주소를 다시 적어주는 https를 해결했습니다!
