【Docker】Nginx Proxy ManagerでWordPressをスマートに常時SSL化(HTTPS)する方法

インフラ・サーバー

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

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

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

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

1. 今回目指す構成

これまでは、インターネットからのアクセス(ポート80番)をWordPressコンテナが直接受けていました。 今回はその手前に「Webの受付窓口」としてNginx Proxy Managerを1つ挟む形にレベルアップさせます。

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

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

これにより、暗号化の処理や証明書の更新はすべてNginx Proxy Managerが一手に引き受けてくれるようになり、WordPress側は純粋なサイト運営に集中できるようになります。

2. STEP 1:VPS側で「ポート443(HTTPS)」を開放する

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

  1. VPSの管理パネルにログイン。
  2. 「パケットフィルター設定」を開く。
  3. フィルターの種類で「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: admin@example.com / 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サイトを狙ったよくあるサイバー攻撃のパターンを自動ブロックしてくれる強力な防御壁です。
  • 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. まとめと動作確認

設定を入力して「Save」を押し、数十秒待って一覧画面(Proxy Hosts)に以下のように表示されれば設定完了です。

  • SSL: Let’s Encrypt
  • Access: Public
  • Status: Online(緑色のマーク)

ブラウザから直接 https://VPSのアドレス にアクセスし、URLの左側に鍵マーク(🔒)が表示され、WordPressの画面が正しく表示されれば、常時SSL化は成功です。

Docker環境におけるリバースプロキシの構築と、SSHトンネルを使ったセキュアなインフラ運用の知識は、今後のWeb開発において非常に強力な武器になります。ぜひ試してみてください!

コメント

タイトルとURLをコピーしました