20241209 mixed content 문제

문제

React 서버에서 https로 접속하고, React에서 백엔드 서버(API)에 http로 접속해서 데이터를 가져오는 과정에서 mixed content 오류가 발생한다

 

Route 53 사용하지 않고 하는 방법을 소개한다!!

 

목표 인프라 구조

---

Step 0

 

---

cd C:\IaC\mixedTest

terraform init
terraform plan
terraform apply

 

MobaXterm으로 sample-ec2-01, sample-ec2-02 원격 접속 후 아래 명령어 실행

sudo apt-get update
sudo apt-get install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker
sudo usermod -aG docker ubuntu

 

 

Frontend 대상 그룹 생성

 

Backend 대상그룹 생성

 

로드밸런서 생성 (ALB)

 

 

Frontend

ALB의 DNS 이름 복사해서

아래에 붙여 넣음

 

build & docker image 생성

 

docker hub에 push

 

sample-ec2-01에서 heeseok96/react-mixed-app:aws 이미지 pull & container 실행

Backend

spring : 코드 변경 없이 tag 수정 후 docker hub에 이미지 push

 

sample-ec2-02에서 heeseok96/sb-mixed-app:aws 이미지 pull & container 실행

DNS로 접속해서 실행 확인

로드 밸런서에 리스너 추가

로드밸런서의 DNS 이름 복사 후

 

내도메인 한국에서 별칭 수정

 

이러면 mixed content 오류가 뜬다

https://내도메인주소:80

 

 

프론트엔드 코드 수정

 

8080 리스너 삭제

 

ALB 하나 더 생성 (sample-alb-be)

 

➡️내도메인 한국에서 별칭 추가

 

이제 오류 안뜬다!!!!!!!!!!!!!!