[AWS] EC2 프리티어 API 서버에 HTTPS 적용 후 Mixed Content 해결하기

 

들어가기 전

 

도메인 구매는 작성하지 않으니 가비아에서 도메인을 구매하고 오시면 빠른 작업이 됩니다.

 

 

 

 

목차

 

• 문제 상황 발생
• 원인 파악
• AWS EC2 API 서버에 도메인 적용하기
• NginX를 이용해 SSL 적용하기
• 프록시 서버 설정하기
• Mixed Content 에러랑 헤어지기

 

 

 

 

문제 상황

 

Front 서버와 API 서버를 각각 배포하고 나면 CORS 처럼 꼭 한번은 경험하는 에러일 것입니다.

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. This request has been blocked; the content must be served over HTTPS.

 

프론트 프로젝트에 Domain도 입히고 SSL도 적용했는데 왜!!!!!!!!!!!!????

 

 

 

 

원인

 

HTTPS로 페이지를 로드했는데 HTTP의 리소스를 불러오려고 할 때 발생하는 에러입니다.

즉, 사용자는 보안이 된 페이지를 접속해 있는데 보안이 안된 서버의 데이터를 조회 하려고 해서 브라우저가 차단해버리는 것입니다.

[그림1] 요청 시각화

 

 

뭔가 이 말을 내 눈으로 확인해야 겠다면 아래를 눌러서 확인해주시면 됩니다.

 

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

Mixed content - Security on the web | MDN

 

 

 

 

AWS EC2 API 서버에 도메인 적용하기

 

1) AWS의 Route53으로 진입하여 호스트 영역 생성

Route53으로 진입하면 DNS 관리의 아래 숫자를 눌러 호스팅 영역으로 들어갑니다.

그 다음 오른쪽 위에 있는 호스팅 영역 생성 버튼을 클릭하여 아래와 같은 화면으로 진입합니다.

[그림2] 호스팅 영역 생성

• 도메인 이름 : 여러분이 구매한 도메인을 입력해주세요!
  예시) coasis.tistory.com을 구매 했으면 coasis.tistory.com을 입력해주시면 됩니다.
• 설명 : 여러분이 어떤 도메인인지 설명하고 싶은 것을 작성하면 됩니다.
  예시) 가비아에서 구매한 도메인
• 유형 : 그래도 외부에 있는 사용자에게 오픈 할 것이니 퍼블릭 호스틱 영역을 선택하였습니다.

 

2) 레코드 생성

호스팅 영역에 있는 생성된 호스팅 영역 이름(도메인)을 클릭하여 들어갑니다.

저는 이미 생성한 것이 있어서 레코드가 있는 것이고 여러분들은 레코드 생성 버튼을 클릭하여 레코드 생성을 합니다.

[그림3] 호스팅 영역

 

[그림4] 레코드 생성

 

• 레코드 이름 : 서브 도메인으로 사용하려면 작성해 주시고, 메인 도메인이라면 "빈 칸"으로 남겨주세요!
• 값 : 여러분의 EC2 퍼블릭 IP 주소를 넣어주세요.
  예시) 192.68.20.10

 

3) 도메인 네임서버 등록

레코드에서 값이 4개 있는 행이 보이실 겁니다. 이 값을 가비아에서 네임 서버 설정에 등록해 줄겁니다.

혹시 몰라서 가렸습니다...

[그림5] 호스팅 영역 레코드

 

가비아 페이지에 접속 한 후, 로그인해서 My가비아를 클릭 해주세요.

그 다음 위에 메뉴바에 서비스 관리를 클릭하여 구매한 도메인 목록으로 들어가서 해당 도메인의 관리를 눌러주세요!

[그림6] 가비아 서비스 관리

 

네임 서버에 설정을 클릭하여 이전에 말했던 4개의 값을 순서대로 넣어주시면 됩니다.

이 때, 각 주소마다 끝 부분에 .(마침표)가 있는데 지워주세요!

저는 이미 넣었기 때문에 1,2,3,4 차  값이 있는 것입니다.

[그림7] 네임서버 설정

순서대로 넣어주세요!

[그림8] 네임서버 설정2

 

 

 

 

NginX를 이용해 SSL 적용하기

 

Tip) 

Let's Encrypt은 무료, 자동화, 개방형 인증 기관(CA, Certificate Authority)으로, 웹사이트에 무료 SSL/TLS 인증서를 90일간 제공하는 서비스입니다.

Cerbot은 Let’s Encrypt 인증서를 자동으로 발급 및 갱신할 수 있도록 도와주는 오픈 소스입니다.

 

 

여러분의 Ec2 서버에 접속하여 아래의 명령어를 해주시기 바랍니다.

 

1) Cerbot 설치

sudo apt update
sudo apt install certbot python3-certbot-nginx

 

2) SSL 인증서 발급

NginX를 사용할 것이니 --nginx 옵션을 활용해서 SSL 추가해줍니다.

이것을 하려면 Ec2 인스턴스의 방화벽 포트80을 뚫어주어야 합니다.

# sudo certbot --nginx -d [도메인]
sudo certbot --nginx -d example.co.kr

 

3) 인증서 자동 갱신 설정

인증서가 갱신되면 웹서버(NginX)를 재기동 해주어야 합니다. 

sudo certbot renew --dry-run

# 수동 갱신
sudo certbot renew

 

 

 

 

프록시 서버 설정하기

 

1) 파일 생성하면서 설정하기

sudo vi /etc/nginx/conf.d/default.conf

 

2) 파일 설정

[도메인]은 여러분들 도메인으로 작성해주시기 바랍니다.

• 아래 설정 값은 https://[도메인]으로 접속하는 모든 요청들을 나의 Ec2 로컬 IP:8080 포트로 보내버린다는 설정
  작동 예시) https://[도메인] 접속 → NginX가 서버IP http://localhost:8080 호출 → 어플리케이션(Spring) 진입
• 같은 서버내에 있으니 localhost로 내부적으로 웹서버가 Redirect 외부 방화벽 8080 뚫을 필요 X
• 만약, 웹서버가 다른 장비(다른 IP)에 있다면 localhost가 아닌 IP주소로 변경하면 됩니다.
• 443포트는 모든 요청에 대해 방화벽을 뚫어줘야합니다.

server {
        listen 443 ssl;
        server_name [도메인];

        ssl_certificate /etc/letsencrypt/live/[도메인]/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/[도메인]/privkey.pem;

        location / {
                proxy_pass http://localhost:8080;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }

}

다 작성했다면 ESC를 눌러 :wq로 저장한 체 빠져나옵니다.

 

 

3) NginX 문법 확인

문법이 잘 맞았는지 확인합니다.

sudo nginx -t

# 출력 값
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

 

4) NginX 설정 반영

# 기존 연결 유지하면서 설정만 반영
sudo systemctl reload nginx

# NginX 완전히 다시 시작
sudo systemctl restart nginx

 

 

MixedContent랑 헤어지기

 

이제 여러분이 구매한 도메인으로 접속하면 잘 적용된 것을 확인할 수 있습니다.

[그림9] SSL 적용완료

 

감사합니다.