GCP 가상 머신에 Nginx 리버스 프록시와 무료 SSL(Let's Encrypt) 적용해 Mixed Content 오류 없애기

왜 이걸 해야 할까?

• HTTPS 사이트에서 HTTP로 된 리소스(css, js, 이미지 등)를 불러오면 브라우저가 "Mixed Content" 오류를 발생시킨다.
• 이 오류는 보안상 취약하며, 크롬 브라우저는 콘텐츠를 차단하기도 한다.
• SSL 인증서(Let’s Encrypt)를 설치하고, Nginx를 통해 HTTP 요청을 HTTPS로 리디렉션해야 안전한 사이트 운영이 가능해진다. 

 

1. 도메인 발급  (Duck DNS)

이 오류를 해결하기 위해 먼저 도메인이 필요하다. 무료 도메인 발급을 찾아보니 전부다 유료로 전환 된 것인지 내가 못 찾는 건지 구글에 있는 것으로는 찾을 수가 없었다. 

 

구글링을 하다가 발견한 처음 보는 사이트에서 용감하게 무료 DNS 사이트에서 발급 받았다... 돈 있으면 꼭! 사서 구매하자

Duck DNS

 

2. 외부 고정 IP 할당 

도메인을 만들고 나면 current ip를 입력하는 공간에 GCP VM의 외부 고정 IP 주소를 넣어준다. update ip를 누른 후 cmd 창을 켜 A 레코드가 제대로 연결되었는지 ping 명령어를 ( ping 도메인 )이용해 확인해 준다.

 

 

3. GCP VM에 Nginx 설치

Nginx는 리버스 프록시 역할을 하며, SSL을 처리하고 외부 요청을 내부 Spring Boot 서버로 연결해 준다. 

 

GCP SSH 브라우저를 열어 아래와 같이 설치 명령어를 입력해 준다. 

sudo apt update
sudo apt install nginx -y

설치 후 브라우저에서 http://도메인 접속 시, Nginx 환영 페이지가 보이면 성공!

 

4. Let’s Encrypt로 SSL 인증서 발급 (Certbot 사용)

HTTPS 통신을 위해서는 인증서가 필요하며, Let’s Encrypt는 그걸 무료 + 자동 발급해 준다.

 

아래의 명령어를 입력해 설치해 주고 이메일도 입력하고, 동의도 Y로 표시해 준다. 

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d 도메인 (ex : mixedxontent.duckdns.org)

 

• 인증서 파일은 sudo ls /etc/letsencrypt/live/ 명령어를 통해 확인하고 이렇게 도메인이 나오면 성공한 것이다.
  
• Nginx 설정 파일에 자동으로 HTTPS 설정이 추가되는데, sudo grep -r "ssl_certificate" /etc/nginx/ 명령어를 통해 확인 하면 된다. 그러면 하기와 같이 Certbot이 도메인에 대해 정상적으로 SSL 인증서를 발급했고, Nginx 설정 파일에도 자동으로 적용해 줬다는 응답이 보인다.
  

 

5. Nginx에 리버스 프록시 및 HTTPS 설정

외부에서 https://도메인 으로 들어온 요청을 Nginx가 받아서 내부 Spring Boot 서버(http://localhost:포트)로 안전하게 리버스 프록시 + HTTPS로 연결을 할 수 있게 설정해주어야 한다. 

 

리버스 프록시 (Reverse Proxy)	클라이언트의 요청을 받아서, 대신 내부 서버로 전달하고 응답도 다시 받아서 대신 응답하는 중계 서버
HTTPS	암호화된 보안 연결 (자물쇠 아이콘 뜨는 주소)

 

 

아래의 명령어를 실행해 Nginx 웹 서버의 기본 사이트 설정 파일을 텍스트 편집기로 열어준다. 

sudo nano /etc/nginx/sites-available/default #텍스트 편집기 열기

 

그러면 왼쪽 이미지처럼 이미 작성 되어있는 기본 파일이 열리지만 이걸 우리가 사용하는 설정에 맞게 오른쪽처럼 변경해 준다.  작성 코드는 아래에 있고 각자 도메인과 spring port만 프로젝트에 맞게 넣어주면 된다. 기존 내용 전부 삭제 (Ctrl + K 반복해서 줄 삭제 가능) → 아래 내용 전체 복사 → 붙여넣기 →    Ctrl + O → 엔터 → Ctrl + X로 저장 후 나가기

 

server {
    listen 80;
    listen [::]:80;
    server_name 도메인

    # 모든 HTTP 요청을 HTTPS로 리디렉션
    return 301 https://$host$request_uri;
}

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

    ssl_certificate /etc/letsencrypt/live/mixedxontent.duckdns.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mixedxontent.duckdns.org/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://localhost:포트;
        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;
    }
}

 

 

6. 설정 반영 

설정이 끝났으면 아래의 명령어를 이용해 적용을 해준다.  

 

sudo nginx -t        # 설정 확인
sudo systemctl reload nginx   # 설정 적용

 

 

그 후 브라우저에 접속해 https://도메인에 접속 후 자물쇠 표시가 뜨고, Spring Boot 앱의 응답이 보이면 리버스 프록시 성공이다. 

 

*아직 Spring Boot가 준비 되지 않았다면? 

임시로 8080 포트에서 응답하는 간단한 서버를 만들어 확인하면 된다. 아래의 명령어를 입력한 뒤 다시 도메인에 접속해보자. 내 도메인 연결이 아주 잘 되는 것을 확인할 수 있다. 

sudo apt install -y python3
python3 -m http.server 8080

 

 

 

이렇게 GCP VM에 Nginx 리버스 프록시와 Let's Encrypt SSL을 적용하여, Mixed Content 문제를 해결하였다. 처음에는 여러 설정과 개념들이 복잡하게 느껴져서 이해가 잘 안 갔는데 막상 하나씩 따라 해 보면 생각보다 어렵지 않고, 안전한 서비스 환경을 만들어 나가는 거란 생각이 들었다. 실제로 서비스할 때 HTTPS는 이제 필수니까, 이런 기본 세팅을 잘 해두면 나중에 확장하거나 유지보수할 때도 훨씬 수월해질 것 같다.