proxy配下のWordPressをSSL化するのに少しハマったのでメモ

概要

このinamuu.comをやっとHTTPS化しました。
wikiの方はさっくり出来たのですが、WordPressの方で少しハマってしまったので、メモとして残しておきます。

構成(下記roleは全てdockerコンテナで稼働)

nginx → WordPress(apache2+mod_php)

証明書作成（Let’sEncrypt）

Let’sEncryptのサイト通りにやります。

# git clone https://github.com/certbot/certbot
# cd cert-bot
# ./certbot-auto -n
# ./certbot-auto certonly --webroot \
-w DOCUMENTROOT1 \
-d inamuu.com \
-d www.inamuu.com \
-w DOCUMENTROOT2 \
-d wiki.inamuu.com \
-m メールアドレス \
--agree-tos -n
# ls -l /etc/letsencrypt/live/inamuu.com
合計 4
-rw-r--r-- 1 root 543  5月 25 23:08 README
lrwxrwxrwx 1 root  34  5月 25 23:08 cert.pem -> ../../archive/inamuu.com/cert1.pem
lrwxrwxrwx 1 root  35  5月 25 23:08 chain.pem -> ../../archive/inamuu.com/chain1.pem
lrwxrwxrwx 1 root  39  5月 25 23:08 fullchain.pem -> ../../archive/inamuu.com/fullchain1.pem
lrwxrwxrwx 1 root  37  5月 25 23:08 privkey.pem -> ../../archive/inamuu.com/privkey1.pem

nginxのProxy設定

ssl証明書をDockerコンテナが読み込める場所へ設置して、下記設定にしました。

server {
 listen 80;
 server_name inamuu.com www.inamuu.com;
 location / {
   rewrite ^(.*)$ https://inamuu.com$1 redirect;
 }
}

server {
    listen 80;
    server_name wiki.inamuu.com;
    return 301 https://$host$request_uri;
}

server {
  listen 443 default ssl;
  server_name inamuu.com;

  location / {
             proxy_redirect   off;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-Proto https;
             proxy_set_header X-Forwarded-Host $host;
             proxy_set_header X-Forwarded-Server $host;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

             proxy_pass http://wordpress/;
             proxy_redirect http:// https://;
  }
  ssl_certificate /etc/nginx/ssl/fullchain1.pem;
  ssl_certificate_key /etc/nginx/ssl/privkey1.pem;
}

server {
  listen 443 ssl;
  server_name wiki.inamuu.com;
  proxy_set_header Host $http_host;
  location / {
    proxy_pass http://pukiwiki;
  }
  ssl_certificate /etc/nginx/ssl/fullchain1.pem;
  ssl_certificate_key /etc/nginx/ssl/privkey1.pem;
}

上記設定だと、httpsへリダイレクトされる、httpsページがLet’sEncryptのSAN証明書でアクセスできるようにはなります。
しかし、WordPress側でたくさんのMIXContentsが発生する上に、CSSが読み込まれないなどの問題があります。
これらの対応として、下記が必要です。

WordPress側の設定

プロキシまではSSLでも、Backendへproxyする際はhttpとなるため、WordPress側ではSSLと判定されないために、上記問題が起こるようです。
そこで、下記をwp-config.phpへ記述が必要です。

※wp-config.phpの下へ追記ではなく、最初に追記してください。そうしないと、https判定されません。

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO'])
    && $_SERVER['HTTP_X_FORWARDED_PROTO'] === "https") {
  $_SERVER['HTTPS'] = 'on';
}

define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

この後は、管理画面の設定より、サイトURLをhttpsへ変更してあげることで、httpsで接続できるようになります。

※私の場合は、プラグインがhttps対応していなかったりで、エラーだったりmix contentsとして表示されてしまったので、プラグインを停止するなども実施しました。

おしまい。