-
20241209 mixed content 문제카테고리 없음 2024. 12. 9. 15:50
문제
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)
➡️내도메인 한국에서 별칭 추가
이제 오류 안뜬다!!!!!!!!!!!!!!