프론트엔드와 백엔드 CI/CD 파이프라인 구축하는 연습을 하는도 중 오랜만에 다시 만났다.
React앱은 S3 + Cloud Front 를 통해 배포하고, github actions 로 자동배포 를 구축했고,
node 서버는 Elastic Beanstalk를 통해서 EC2 + Load Balancer + Auto Scaling 을 조합하고, 마찬가지로 github actions를 통해 자동배포를 구축했다.
여기서 프론트는 Colud Front 덕에 자동으로 https 로 배포되었고, 서버는 로드밸런서에 도메인을 달아주고 ACM인증을 해야지만 https로 배포된다.( 다른방법도 있겠지만 )
간한히 fetch() 로 통신까지만 구축하려고 했는데, 처음엔 cors를 만나서 미들웨어 추가후 다시 배포를 했고 (넘편했다..자동배포)
통신은 됬지만 이번엔 Mixed Content 에러가 발생하면서 통신하지 못했다.
간단히 정리하면 https 에서 http 통신을 하려면 발생하는 경고이다.
이미 https로 보안화 되어있는 사이트에서, 신뢰하지 못하는 http 통신을 막는것은 어찌보면 당연하다.
해결할 방법은 프론트를 http로 바꾸거나, 서버를 https로 바꿔야한다.
아니면 html <head>에 다음 태그를 추가해주면된다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">근데 나의 경우에는 경고문만 사라졌지, 통신한 데이터를 받아오지 못했다.
그리고 근본적으로 production 환경에서는 이방법을 사용해선 안되고, 모든 통신을 https로 변경해야한다.
반응형
'Archive' 카테고리의 다른 글
| React 앱 + AWS S3 + Cloud Front + Github Actions CICD 배포 정리 (0) | 2022.07.07 |
|---|---|
| CSS 공백처리 white-space 총정리 (0) | 2022.07.06 |
| node에서 S3 업로드하기 (0) | 2022.07.02 |
| Javascript 언어의 특성 (0) | 2022.07.01 |
| React 공식문서에서는 왜 querySelector()를 권장하지 않을까? (0) | 2022.07.01 |
