本ブログは、GCP(Google Cloud Platform)上にWordPressの仮想インスタンス(サーバ)を立てて運営しています。
この連載では、本ブログを0から構築した時の手順を紹介しています。
GCPって何?という方は次の記事を先に読んでくださいね。
今回は、SSL化を行ってサイトにhttpsでアクセスできるようにします。
この記事でやること
CloudFlareを介したhttps通信の概要
今回は、CloudFlareを介してhttps通信する場合のSSLの設定を行っていきます。
手順に入る前に、本サイトの構成でhttps通信を可能にする方法を説明します。(CloudFlareを介したSSL設定は先人の記事がたくさんありますが、どんな構成かわかっていないと地味にはまる。)
システム構成のおさらい
下記の記事で説明したように、本ブログはCDNとしてCloudFlare、画像用ストレージとしてGoogle Cloud Storageを使用しています。
CloudFlareを利用しているのはCDNとしての用途以外に、GCSがhttp通信しか受け付けていないことから、CloudFlareを介することでクライアントからのhttps通信を可能にするためです。
CloudFlareのSSLオプション
CloudFlareには、ブラウザ⇔CloudFlare、CloudFlare⇔オリジンサーバの間でどのような通信を行うかによって、4種類の設定があります。
オプション | 暗号化(SSL)の有無 | ブラウザからの見え方 | |
ブラウザ⇔CloudFlare | CloudFlare⇔オリジンサーバ | ||
オフ | なし | なし | 保護されていない |
Flexible | あり | なし | 保護されていない |
Full | あり | あり | 保護されている |
Full(strict) | あり | あり(SSL証明書の有効性を検証) | 保護されている |
どの設定がいいか。結論から言うと「Full(strict)」です。
ブラウザから「保護されていない」とみなされる「オフ」と「Flexible」は論外として、「Full」ではダメな理由としては、GCSとの通信がhttps化されなかったから。一番厳格なstrictモードでないとGCSとのhttps通信はできないらしい。
2021/3/27 追記
Full(Strict)にして運用したところ、証明書が更新できない問題が発生しました。そのため現在は「Full」に切り替えて運用していますが、GCSとのhttps通信で問題は発生していません。
Fullオプションにする場合、
525 エラーを回避するには、Full SSLオプションを有効化する前に、オリジンWebサーバーがHTTPS接続をポート443で許可し、自己署名SSL証明書かCloudflare Origin CA証明書、または認証局から購入した有効な証明書のどれかを提示するように設定します。
とのことなので、Webサーバにも証明書を入れる必要があります。
以上を踏まえて、以降の作業は次の流れで行います。
WebサーバへのSSL証明書導入とWordPressのhttps化設定
↓
CloudFlareの登録と設定
↓
GCSの導入とWordPressとの連携
なお、本サイトはWebサーバにSSL証明書を作成する方法をとっていますが、CloudFlareのCA証明書をサーバに登録する方法でもよさそうです。
その場合は下記の方の記事が参考になると思います。
WebサーバへのSSL証明書導入(Let’sEncrypt)
Let’sEncryptは、無料で使えるSSL証明書です。
前回作成したサーバにLet’sEncryptを使って証明書を作成します。
まずはサーバにSSHで接続しましょう。GCPのCompute Engineのページから、「VMインスタンス」に遷移し、接続の「SSH」をクリックします。
しばらく待つとターミナル画面が表示されます。
下のコマンドでnginxを停止します。
sudo /opt/bitnami/ctlscript.sh stop nginx
次に、下のコマンドで証明書を作成します。
- Let’sEncryptは証明書作成時にメールアドレスが必要なので適宜用意してください。
- サブドメインがない場合は最後の「-d」以降は不要です。
sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m EMAIL-ADDRESS -d YOURDOMAIN -d www.YOURDOMAIN
何か聞かれたら「y」でOKです。
「Congratulations」と出たら成功。
nginxを起動します。
sudo /opt/bitnami/ctlscript.sh start nginx
次に、httpでアクセスされた場合に自動的にhttpsで接続するようにconfファイルを修正します。
sudo vim /opt/bitnami/nginx/conf/bitnami/bitnami.conf
httpのアクセスを設定する箇所で次の行を追加し、httpsにリダイレクトするように設定します。
(次の記事でCloudFlareでの常時SSL通信の設定を紹介しています。こちらの方法でも問題ないと思います。)
return 301 https://$host$request_uri;
設定を再読み込みします。
sudo nginx -s reload
これで証明書の発行とリダイレクトの設定は完了です。
httpでアクセスし、httpsにリダイレクトされることを確認してみてください。
WordPressのURLをhttpsに変更
WordPressでは、サイトのアドレスがデフォルトで下のように設定されています。
(WordPressの管理画面から「設定」>「一般」で確認できます。管理画面のURLは、デフォルトで「http://<ドメイン名>/wp-admin」です。)
これをhttps://~に変更します。
変更しないと記事投稿時にエラーになるらしい。
上記の画面だとグレーアウトして修正できないのでサーバ内のファイルを修正します。
先ほどと同じ手順でターミナルを開き、次のコマンドを入力します。
sudo vim /opt/bitnami/apps/wordpress/htdocs/wp-config.php
アドレスを設定している行を次のように変更します。
変更前
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');
変更後
define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] . '/');
上記を変更したら設定ファイルを再読み込みします。
sudo nginx -s reload
管理画面を更新してアドレスがhttps://~になっていることを確認してください。
おまけ:Bitnamiバナー削除
サイトの右下を見てみるとBitnamiのバナーが出ていると思います。これは設定で削除できるので消しちゃいます。
SSHに接続し、ターミナルを起動したら、次のコマンドを実行してください。
sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
これでページを更新したらバナーが消えているはずです。
今回は以上です。
次回はCloudFlareの登録と設定を行います。
コメント