【キャプチャ付解説】無料で本格的WordPressブログを構築・運営【3】:WordPressにHTTPSでアクセスできるようにする

WordPress
この記事は約10分で読めます。

GCP, GCS, Cloudflare, mailgunを使って無料で本格的なWordPressブログを構築・運営するための解説記事Step7です。

全体の流れや構成の概要は下記を参照ください。

SSL証明書の準備

WordPressのVMインスタンスにSSHでログインする

WordPressにHTTPSでアクセスできるようにするために、SSL証明書を生成するぞ。

SSL証明書の生成はWordPressのVMインスタンスにSSHでログインして行うが、今回初めてVMインスタンスにログインするので、簡単に解説するぞ。

まずは、GCPのメインメニューから「Compute Engine」→「VMインスタンス」と選択するんじゃ。

すると、下記のようにVMの一覧が表示されるから、WordPressのVMインスタンスの「接続」の欄にある「SSH」をクリックするんじゃ。そして、「ブラウザウィンドウで開く」を選択すれば、VMインスタンスにSSHでログインできるぞ。

IDやパスワードを入力する必要もないんじゃ。

my-blog-vmはキャプチャ用に作成したもので既に削除済みだったかしら。

ほんとだわ、無事ログインできてコンソール画面が別ウィンドウで表示されたわ。

SSL証明書を生成してNginxに適用する

無事SSHでログインできたら下記コマンドを実行してSSL証明書を生成し、Nginxに適用するんじゃ。

コマンドの書式
sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m "<メールアドレス>" -d "<ドメイン名>"
コマンドの例
sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m "[email protected]" -d "norio.io" -d "www.norio.io" -d "blog.norio.io"
コマンドのオプションについて
  • -mでサイト管理者のメールアドレスを指定(個人ブログなら自身のメアドでよいでしょう)
  • -dで証明書を生成するドメイン名を指定。複数指定する場合は「-d <ドメイン名>」を複数指定します。この例ではルートドメイン「norio.io」の他、「www.norio.io」と「blog.norio.io」を指定しています。

Congratulations, the generation and configuration of your SSL certificate finished properly. と出力されれば成功かしら?

そうじゃな。

あと、最後に毎月クーロンジョブで証明書を更新するように設定するか聞かれるから、設定するように「y」で答えるとよいじゃろう。

ちなみに、このシェルスクリプトの使い方は、WordPressのデプロイの解説時に少し触れたように、Bitnamiのバナーから遷移した下記ページにちゃんと書いてあるんじゃ。

生成のコマンド実行した際に、実は下記のエラーになったわ。

2019/12/07 13:43:09 Could not obtain certificates:
         acme: Error -> One or more domains had a problem:
 [blog.norio.io] acme: error: 403 :: urn:ietf:params:acme:error:unauthorized :: Cannot negotiate ALPN protocol "acme-tls/1" for tls-alpn-01 challenge, url: 
 [norio.io] acme: error: 403 :: urn:ietf:params:acme:error:unauthorized :: Cannot negotiate ALPN protocol "acme-tls/1" for tls-alpn-01 challenge, url: 
 [www.norio.io] acme: error: 403 :: urn:ietf:params:acme:error:unauthorized :: Cannot negotiate ALPN protocol "acme-tls/1" for tls-alpn-01 challenge, url:

下記やりとりが参考になるかもしれん。

わしも最初、CloudflareのDNS設定で対象のドメインのAレコードをProxiedに設定しておったんじゃが、その状態では上記のエラーになったんじゃ。

そこで、ProxiedではなくDNS onlyにしたら無事コマンドが成功した。

LetsEncrypt SSL failure on GCP - Cannot negotiate ALPN protocol
Keywords: WordPress + NGINX + SSL - Google Cloud Platform - Technical issue - Secure Connections (SSL/HTTPS) bnsupport ID: cd546561-d522-68a6-d649-7a0adf3d5a22 ...

Your domains www.dejavuguides.com and dejavuguides.com are completely managed by Cloudflare, not just the DNS configuration, Cloudflare is also proxying the web accesses to improve performance.

That means the SSL certificate for those domains should be configured in Cloudflare as Edge certificates, not in the WordPress instance, given that the https connections are stablished between the web browsers (clients) and Cloudflare (server).

If you check the Prerequisites to follow https://docs.bitnami.com/google/how-to/generate-install-lets-encrypt-ssl/19, you can see “You have configured the domain name’s DNS record to point to the public IP address of your Bitnami application instance.”. For the domains above, that’s not happening, the domain names’ DNS records point to Cloudfrlare.

SSL証明書が定期的に自動更新されるようになったことを確認する

前項のコマンドで証明書の自動更新のクーロンも設定されたはずだから念のため確認しておこう。

下記コマンドで確認じゃ。

sudo crontab -u bitnami -l

生成の時と同じメールアドレスとドメインが指定されていることが確認できるはずじゃ。あとは、コマンドの引数に「renew」も指定されていて、更新感満載じゃな。

なお、このlegoコマンドは生成の時に実行したシェルスクリプトの中でも使われているコマンドじゃ。

CloudflareのSSLに関する設定

WordPressへのAレコードについてProxyモードに変更する

SSL化から少し脱線するが、前章でCloudflareでDNS設定した際に、WordPressに向けたAレコードのモードをDNS onlyにしていたじゃろう。そのままだと、Cloudflareは名前解決にしか使われず、リクエストはWordPressにダイレクトに来てしまい、Cloudflareの恩恵を受けられないんじゃ。

そこで、SSL証明書の生成も済んだことだし、Proxyモードに変更しておくぞ。

もしかして、証明書の更新のとき、DNS onlyに戻さないといけないのかしら。

わからん。

まだ確認できていないから、更新の時期が来たら確認してみる。ひとまず、ここではProxyモードに変更しておく。

CloudflareのDNS設定画面で、WordPressに向けている各Aレコードについて、DNS onlyとなっているアイコンをクリックすることで、Proxieidに切り替わるぞ。

下記のように各AレコードがProxieidになればOKじゃ。

CloudflareのSSLモードをFull(Strict)に変更する

さて、SSL化の作業に戻るぞ。画面上部のメニューの「SSL/TLS」アイコンをクリックじゃ。

下記のSSL/TLS暗号化モードの画面が表示されたわ。

デフォルトでは上のキャプチャのようにFlexibleモードになっとるんじゃ。

ブラウザとCloudflareの間は鍵マークがついていて暗号化されているようだけど、それじゃだめなのかしら。

だめじゃ。

ブラウザから見るとhttpsでアクセスして一見安全に見えるが、Cloudflareとオリジン(WordPress)の間が暗号化されないから、その間の通信が脆弱なままなんじゃ。その間の通信を覗かれたら、WordPressにログインするためのパスワードもバレてしまうじゃろう。

じゃあどうすればいいのよ!!

下記のようにモードをFullに切り替えるんじゃ。せっかく証明書も生成したし、より厳格なFull(Strict)にしておこう。

これでEnd-to-end(ブラウザ-オリジン間)が暗号化されるようになったのね。

全てのリクエストについてHTTPSを強制するようにする

さて、ついでにHTTPでアクセスしても強制的にHTTPSでアクセスさせるようにしておこう。

引き続きCloudflareでの作業じゃ。今度は画面上部のメニューの「Page Rules」アイコンをクリックじゃ。

下記画面が表示されるから、「Create Page Rule」ボタンをクリックじゃ。

で、入力画面が表示されたら下記のように入力じゃ。

入力項目について
  • Ifthe URL matchesの欄は「*ルートドメイン/*」(例:*norio.io/*)のように入力。これで、「norio.io」、「www.norio.io」、「blog.norio.io」の全てのURLがルール適用対象になります。
  • Then the settings areの欄は「Always Use HTTPS」を選択。

保存したら下記のようにPage Rulesの一覧の表示されるようになったわ。

Page Ruleはいつでもオン・オフを切り替えたり、変更、削除ができるぞ。

Cloudflareの無料プランでは設定できるPage Ruleは3つまでです。月額を払ったりすれば、枠数を増やしたりできます。

WordPressのURL設定をドメインに変更する

SSL化できたからやっとWordPressにログインできるかしら。

そうじゃな。

その前にあとひとつだけ。ドメインの設定も済んだし、SSL化も済んだし、WordPressのURL設定をHTTPSかつドメイン名でアクセスするように変更しておこう。

GCPでWordPressのVMインスタンスにSSHでログインして、下記ファイルを編集するんじゃ。

  • 変更するファイル: /opt/bitnami/apps/wordpress/htdocs/wp-config.php
  • 下記の通り、WP_SITEURL定数とWP_HOME定数の値を自身のドメインのURL(HTTPS)に変更
変更前
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');
変更後(blog.norio.ioの部分はご自身のサイトのドメインにしてください
define('WP_SITEURL', 'https://blog.norio.io/');
define('WP_HOME', 'https://blog.norio.io/');

参考までにURL設定について、オフィシャルの説明ページじゃ。

Configure the WordPress with NGINX and SSL domain name

これでhttpsで独自ドメインでWordPressにアクセスできるわね。

次回はWordPressからメールを送信できるようにするぞ。

コメント

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