워드프레스 블로그에 SSL 적용하기

4년간 방치해둔 블로그를 버릴까도 생각했지만 회사도 그만둔 김에 놀면 뭐하나… 일단 시대에 맞게 HTTPS로 서빙을 해보기로 마음먹고 시도해봤다. 일단 내가 운영하는 워드프레스 서빙 환경은 다음과 같다.

AWS EC2에 도커 환경구성
AWS EC2에 Nginx 설치하고 여러 도커 컨테이너를 멀티 호스팅

일단 SSL 인증서가 필요하다. 무료 인증서를 받기 위해 EC2에 Certbot 을 설치한다.

sudo yum install epel-release
sudo yum install certbot python3-certbot-nginx

Let’s Encrypt 에서 SSL 인증서 받기

sudo certbot --nginx -d miconblog.com

이렇게 서트봇을 이용해 인증서를 발급받으면 알아서 nginx 설정까지 추가해준다. (우와! 똑똑하다!)

server {
  server_name miconblog.com;

  location / {
    proxy_pass http://127.0.0.1:8888;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $http_host;
  }
	
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/miconblog.com/fullchain.pem; # managed by Certbot    
  ssl_certificate_key /etc/letsencrypt/live/miconblog.com/privkey.pem; # managed by Certbot    
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot    
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot}
}

server {
  if ($host = miconblog.com) {
    return 301 https://$host$request_uri;
  } # managed by Certbot
    
  server_name miconblog.com;
  listen 80;
  return 404; # managed by Certbot
}

이렇게 인증서를 설정하고 nginx 를 재시작하면 짜짠~ 하고 잘 될줄 알았다. ㅎㅎㅎ 재시작후 블로그를 접속하면 CSS가 제대로 로드되지 않고 다 깨진다. 거기에 더불어 어드민 페이지에 아예 접속을 못하는 문제가 더 치명적이다.

무엇이 문제일까?

요즘은 검색보다는 chatGPT를 이용해 검색하기 때문에 이와 관련된 질의를 던졌다.

SSL 설정이후에 워트프레스 사이트에 스타일 시트를 못가져오고 이런 에러를 내고 있어.
Mixed Content: The page at ‘https://miconblog.com/’ was loaded over HTTPS, but requested an insecure stylesheet ‘https://miconblog.com/wp-content/themes/sparkling/assets/css/bootstrap.min.css?ver=6.5.5’. This request has been blocked; the content must be served over HTTPS.

그래서 얻은 대답은 블로그 설정에 사이트 주소와 워드프레스 주소를 변경하라는 둥둥… 여러가지 답을 주지만 죄다 헛방.. 근본적인 이유를 다시 생각해봤다. 아무래도 어드민을 접속하지 못하는 이유와 CSS를 로드하지 못하는 문제는 같은 원인인것 같다. 즉, 서버 랜더링하는 루트페이지를 제외하고 나머지 모든 페이지 링크들이 모두 302 무한 리다이렉션 되면서 리소스를 가져오지 못하는게 진짜 문제인게 아닐까? 뭔가 설정이 잘못된것 같은데… 오래만에 서버 관리하려니 머리가 안돌아간다. 다시 GPT 에게 질문을 던졌다.

SSL 이 없던 워드프레스에 Let’s Encrpty 로 SSL 인증서를 발급받고, nginx 설정에 아래와 같이 추가됐는데, 그 이후부터 https://miconblog.com/wp-admin/ 이런 접근은 모두 302 에러가 반복되고 있어.
(… 설정을 추가해서 질문함 …)

앗!! 이번에는 제대로 답을 준것같다. 생각해보니 Certbot 이 만들어준 nginx 설정에 http로 접속 했을때 https 로 리다이렉션하게 되는데,.. 리다이랙션이 무한히 반복되는 느낌이다.

실제로 워드프레스 설정(wp-config.php)에도 아래와 같이 리버스 프록시를 썼을때 방어하는 내용이 있다. 즉, HTTP 접속을 HTTPS로 바꿀때 무한 루프에 빠지는 문제를 해결하기 리버스 프록시를 거치면서 설정한 헤더값을 본다는 내용이다.

// If we're behind a proxy server and using HTTPS, we need to alert WordPress of that fact
// see also http://codex.wordpress.org/Administration_Over_SSL#Using_a_Reverse_Proxy
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
	$_SERVER['HTTPS'] = 'on';
}

그런데, 나는 HTTP_X_FORWARDED_PROTO 헤더를 리버스 프록시로 설정하지 않았다. ㅎㄷㄷㄷ

location / {
    proxy_pass http://127.0.0.1:8888;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
}

nginx 설정에 간단히 한줄을 추가했더니 뚜뚱! 해결!
드디어 나도 HTTPS로 서빙한다. 야호~~~!

Let’s Encrypt 에서 SSL 인증서 받기

무엇이 문제일까?

불꽃남자

답글 남기기 응답 취소