ABOUT ME

Today
Yesterday
Total
  • 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)

     

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

     

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

     

     

Designed by Tistory.