Nginx Proxy ManagerでWordPressSSL化

前回の記事で無料VPSを使ってWordPress環境を構築する方法を解説しました。

その続編として、サイトの常時SSL化（HTTPS化）の方法を今回解説します。暗号化されていないサイト（http://）のままだと、ブラウザに「保護されていない通信」と警告が出てしまい、Google AdSenseの審査にも通りません。

今回は、Docker環境と非常に相性が良く、GUIで視覚的にリバースプロキシや無料のSSL証明書（Let’s Encrypt）を管理できる「Nginx Proxy Manager（NPM）」を導入し、安全かつスマートに常時SSL化を完了させた手順を解説します。

セキュリティをガチガチに高めるため、「管理画面用のポートを世界に公開しない（SSHポートフォワーディングを活用する）」という実戦的なテクニックも盛り込んでいます。

1. 今回目指す構成
- この構成を採用するメリット
2. STEP 1：VPS側で「ポート443（HTTPS）」を開放する
3. STEP 2：docker-compose.yml の書き換え
4. STEP 3：【セキュリティ重要】SSHポートフォワーディングで管理画面を開く
5. STEP 4：Nginx Proxy ManagerでのSSL設定と各項目の根拠
- ① 「Details」タブ
- ② 「SSL」タブ
6.【よくあるハマりポイント】SSL化後に画面が崩れる・無限リダイレクトが起きる場合
- 解決策：wp-config.php へのコード追記
7. まとめと動作確認

1. 今回目指す構成

これまでは、インターネットからのアクセス（ポート80番）をWordPressコンテナが直接受けていました。

[ブラウザ] 
   │ (http / 80番)
   ▼
[WordPressコンテナの80番ポート]

今回はその手前に「Webの受付窓口」としてNginx Proxy Managerを1つ挟む形にレベルアップさせます。

【常時SSL化後の通信の流れ】

[ブラウザ] 
   │ (https / 443番)
   ▼
[Nginx Proxy Manager]
   │ (内部通信 / http / 8080番ポートへ向けて送信、外部公開しない)
   ▼
[ホストサーバーの8080番窓口] 
   │ (Dockerのポートマッピング "8080:80" によるコンテナ内への転送、外部公開しない)
   ▼
[WordPressコンテナの80番ポート]

この構成を採用するメリット

高い拡張性: 今後同じサーバー内に別のWebサービスやサブドメインを追加した際も、NPMの設定追加だけで容易にマルチドメイン運用が可能です。

SSL証明書の一括管理: 無料の Let’s Encrypt 証明書の取得・自動更新をGUI上で完結できます。

WordPress本体の軽量化: 重い暗号化処理（SSL/TLSハンドシェイク）をNPM側にオフロード（委譲）できるため、WordPress側の負荷を軽減できます。

2. STEP 1：VPS側で「ポート443（HTTPS）」を開放する

SSL通信（HTTPS）は443番ポートを使用します。まずはサーバーの門番（パケットフィルター）を開けます。

VPSの管理パネルにログイン。
「パケットフィルター設定」を開く。
フィルターの種類で「Web（80/443端口）」が許可されているか確認。追加されていなければ、これを追加して保存します。

⚠️ 重要な注意点
この段階で、Nginx Proxy Managerの管理画面用ポートである 「81番ポート」は絶対に開放しないでください。管理画面をインターネット全体に晒すと、自動ボットによるパスワード総当たり攻撃（ブルートフォース攻撃）の標的になります。

3. STEP 2：docker-compose.yml の書き換え

現在のWordPress環境のディレクトリに移動し、設定ファイルをNginx Proxy Managerを組み込んだ構成に書き換えます。

cd /app/wordpress
nano docker-compose.yml

既存の内容を書き換え、以下のように3つのコンテナ（NPM、WordPress、MySQL）が連携する形にします。

services:
  # 1. 新しく追加する「SSL・Web受付窓口」のコンテナ
  nginx-proxy:
    image: 'jc21/nginx-proxy-manager:latest'
    container_name: nginx_proxy_manager
    restart: always
    ports:
      - '80:80'    # 通常のアクセス受付
      - '443:443'  # セキュリティアクセス受付（HTTPS）
      - '81:81'    # 管理画面用のポート（※コンテナ内でのみ使用）
    volumes:
      - ./nginx_data:/data
      - ./nginx_letsencrypt:/etc/letsencrypt

  # 2. WordPress（外部ポートを8080に変更）
  wordpress:
    image: wordpress:latest
    container_name: wordpress_app
    restart: always
    ports:
      - "8080:80"  # 外部から直接見えないよう、NPM経由用に変更
    volumes:
      - wordpress_data:/var/www/html
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: your_db_password
      WORDPRESS_DB_NAME: wordpress
    depends_on:
      - db

  # 3. データベース（MySQL）
  db:
    image: mysql:8.0
    container_name: wordpress_db
    restart: always
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: your_root_password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: your_db_password

volumes:
  db_data:
  wordpress_data:

設定ができたら、一度古いコンテナを落として、新しい構成でバックグラウンド起動します。

# 古いコンテナの停止と削除
docker compose down

# 新しい設定で再起動
docker compose up -d

4. STEP 3：【セキュリティ重要】SSHポートフォワーディングで管理画面を開く

Nginx Proxy Managerの管理画面は81番ポートで動きます。ここに設定のためにアクセスしたいのですが、これを世界中に丸見え（パケットフィルターで開放）にしておくのはセキュリティ上非常に危険です。パスワード総当たり攻撃などの標的になってしまいます。

そこで、VPS側は閉じたまま、「SSHポートフォワーディング（トンネリング）」を使って、自分の手元のPCからだけ安全にアクセスする技を使います。

手元のPC（WindowsのコマンドプロンプトやPowerShell）を立ち上げ、以下のコマンドを実行します。

ssh -i "秘密鍵のパス" -p SSHポート番号 -L 8181:127.0.0.1:81 VPSのユーザー名@サーバーのIPアドレス

-L 8181:127.0.0.1:81 という設定により、サーバー内の「81番ポート」が、手元PCの「8181番ポート」に安全な暗号化トンネルで直結されます。
このターミナル画面は、接続を維持するために開いたままにしておきます。

この状態で、手元PCのブラウザから http://localhost:8181 にアクセスすると、以下のような初期画面が開き、サーバーのポートを一切外に晒すことなく、安全にNginx Proxy Managerのログイン画面を開くことができます！

5. STEP 4：Nginx Proxy ManagerでのSSL設定と各項目の根拠

初期情報（Email: [email protected] / Password: changeme）でログインし、その後プロファイルを自分のものに変更したら、「Hosts」＞「Proxy Hosts」＞「Add Proxy Host」からドメインを登録します。

次の出てくる設定の意味と推奨設定は以下の通りです。ここを正しく設定することが、WordPressを安全に高速化させる鍵になります。

① 「Details」タブ

Access List: Publicly Accessible（そのまま）
- ブログ等として全員に公開するため、アクセス制限はかけません。
Cache Assets: OFF
- Nginx側でのキャッシュ機能です。WordPress側のプラグインと競合したり、テーマのデザイン調整中に「変更が反映されない！」と混乱するのを防ぐため、最初はOFFが安全です。
Block Common Exploits: ON (推奨)
- SQLインジェクションなど、Webサイトを狙ったよくあるサイバー攻撃のパターンをNginxのWeb層で自動ブロックしてくれる強力な防御壁です。
Websockets Support: ON
- リアルタイム通信の仕組みです。今のWordPressで必須ではないですが、ONにしておいてデメリットはありません。

② 「SSL」タブ

SSL Certificate: Request a new SSL Certificate を選択。
Force SSL: ON (推奨)
- http:// でアクセスしてきたユーザーを、自動で安全な https:// へ強制リダイレクト（転送）します。常時SSL化の必須設定です。
HTTP/2 Support: ON (推奨)
- 通信を効率化し、サイトの読み込み速度を圧倒的に速くする最新の規格です。表示速度はSEO（検索順位）にも好影響を与えます。
HSTS Enabled: OFF
- ブラウザに「今後絶対にHTTPSでしか接続するな」と強烈に記憶させる仕組みですが、万が一環境をリセットしたくなった際にブラウザ側でブロックされて身動きが取れなくなる罠があるため、運用が安定するまではOFFが安全です。
Trust Upstream Forwarded Proto Headers: ON (超重要)
- WordPressに対して「外側はちゃんとHTTPSで安全に繋がっているよ」という情報を正しくパスするための設定です。これをONにしないと、WordPress側で「リダイレクトループ（画面が真っ白になる）」が起きたり、デザイン（CSS）が崩れたりします。

6.【よくあるハマりポイント】SSL化後に画面が崩れる・無限リダイレクトが起きる場合

自分もWordPressサイトを作り直すときに出会ったことのある不具合なのですが、Nginx Proxy Managerで常時SSL化を設定した際、WordPress特有の現象として「表示デザイン（CSS）が崩れる」「管理画面アクセス時にリダイレクトループが発生してログインできない」というトラブルが発生することがあります。

これは、WordPressが「自分はHTTP（8080番）でアクセスされている」と誤認し、CSSなどの内部リソースを http:// のまま読み込もうとする（混合コンテンツ / Mixed Content）ことが原因です。

解決策：wp-config.php へのコード追記

WordPressコンテナ内の wp-config.php の先頭（/* That’s all, stop editing! */ より上）に、以下の記述を追加してください。

// リバースプロキシ経由のHTTPS接続を正しく認識させる設定
if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {$_SERVER['HTTPS'] = 'on';
}

define('WP_HOME', '
your-domain.com
your-domain.com(https://your-domain.com)');
define('WP_SITEURL', '
your-domain.com
your-domain.com(https://your-domain.com)');