WordPressをhttps化してnginx reverse proxy配下で使うには

まだまとめてませんが、フロントエンドとバックエンドを分けた時に
どうなるかを散々悩んでやっと解決出来ました。
(実は完全会員制サイトを作りたいのです。)

#2015/01/20追記
 アップロードできるファイルサイズをデフォルトのままにしてましたんで、その辺ちょっと書き足しました。

これまで様々探してみましたが、ようやく答えに行き着きました
とりあえずここのリンクを参照!

前提条件としては、こんな感じです。
 インターネット側から見えるURL:https://frontend.hogehoge.site/
 裏側で動くWordpressが導入されたサイトのURL:http://backend.hogehoge.site

準備作業としては、このへんまでやっておきます。
 http://backend.hogehoge.site/ からWordPressをアクセスできるようにしておく。
 (DBのインストール、Wordpressの初期設定は済ませた状態)
 パーマリンクの設定は、好みでいいと思いますが、私は大体「https://frontend.hogehoge.site/archives/999」
 みたいにすることが多いです。
 管理者でログインして、設定→一般から、「サイトURL」と「xxxURL」を
 「https://frontend.hogehoge.site/」にしておく。
 (ここで保存すると、アクセスできなくなりますが、設定は反映されてますのでそのままにしておきます)
 

で、やったことはこんな感じです。。

  1. 先ずはnginx側から。
    こんな感じで設定しました。
    ポイントとしては・・・
    http://frontend.hogehoge.siteからのアクセスは、
    https://frontend.hogehoge.site
    へ無条件にリダイレクトする。

    proxyした時に、元のURLをヘッダーにキチンと残して上げる

    server {
            listen          80;
            server_name     frontend.hogehoge.site;
    
            location / {
                        rewrite ^(.*)$ https://frontend.hogehoge.site$1 redirect;
                       }
    
            }
    
    server {
            listen                  443;
            server_name             www.hogehoge.site;
            ssl                     on;
            ssl_certificate         /path/to/chainfile;
            ssl_certificate_key     /path/to/certfile;
    
            ssl_protocols           TLSv1 TLSv1.1 TLSV1.2;
            ssl_ciphers             HIGH:!aNULL:!MD5;
            ssl_prefer_server_ciphers on;
            ssl_session_cache shared:SSL:10m;
            ssl_session_timeout 10m;
        
         client_max_body_size 20M;
    
            location / {
                    proxy_redirect                          off;
                    proxy_set_header Host                   $host;
                    proxy_set_header X-Forwarded-Proto      https;
                    proxy_set_header X-Forwarded-Server     $host;
                    proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;
                    proxy_pass                       http://backend.hogehoge.site/;
            }
    }
  2. 次にbackend.hogehoge.siteにログインして、wp-config.phpに以下の行を追記する。
    おもいっきり先頭に書いちゃって下さいw

    <?php
    
    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);
    
    〜ここから下は元々書かれている部分と思ってください〜
  3. 実際にhttp://frontend.hogehoge.site/にアクセスしてみる。
    ちゃんとhttpsへリダイレクトされて、デフォルトのページが表示されるはずです。
    上手く言ってないと、スタイルシートが来ないとか、画像が全く表示されないとか
    ソース見るとhttp://frontend.hogehoge.siteから始まるURLになっていたりします。
  4. https://frontend.hogehoge.site/wp-login.phpにアクセスしてログインしてみる
    ここでリダイレクトループが出たら、リバースプロキシの設定が間違っているか、
    wp-config.phpで書き換えた内容がまちがってますので、しっかり確認して下さい。
  5. 最後に、ファイルアップロードサイズの上限をあげます。
    だって・・・デフォルト2MBだったんだもん。(ぐすん)
    こやつは複数箇所設定変更が必要です。
    (今日はもう眠いので、後日やります。
     それぞれの設定を1行足したり、記載を変更したりなレベルなので
     そのままオミットするかも(ぉぃ))

    1. フロントエンド(リバースプロキシ)側nginx
    2. バックエンド(Wordpressが実際動く鯖)側nginx
    3. バックエンド側php.ini/li>

さぁ・・・これで器にするための土は集まった。
次はろくろを回さないと。
器の上に載せる料理?
そんなのはマダマダ先ですw

まだまだ続きます。

コメント

  1. https,nginx,リバースプロキシ使用でWordpressがリダイレクトループにハマった時 | いつか創造される何かは、今想像出来る未来 @geeorgey 吉田丈治 より:

    […] WordPressをhttps化してnginx reverse proxy配下で使うには | 家鯖構築日記 […]

  2. […] WordPressをhttps化してnginx reverse proxy配下で使うには […]

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