お名前.com、WordPress、CloudFlare、GCPを使ってHTTPS対応Webサイトを公開するまで。

前提

お名前.com、WordPress、CloudFlare、GCPあたりが今回のキーワードでいろんな記事を参考にさせてもらったので、備忘メモとして残しておく。

ドメイン取得

ドメイン取得する必要があるが、自分はお名前.comで取得している。「お名前.com」でggると、「whois情報公開代行」について注意喚起する記事が大量にHitするが、2021年2月現在は「whois情報公開代行」はデフォルトで有効になっていた。
そのことに触れてある記事も見つけることができた。
https://netdejiyujin.com/onamaecomwhoisauto/

GCPでWordpress立ち上げ

この記事をめちゃくちゃ参考にさせていただきました。
https://qiita.com/ulwlu/items/dbb0db5cf7099b7a7cc4

選択したコンテナは記事に従い、「wordpress with nginx and ssl certified by bitnami」とした。

「[3/5]クラウドストレージとの自動連携」の部分は未実施。なぜなら画像のURLがCloud StorageのURLになってしまい、サイトのドメインとは違うものになってしまうから。そこを合わせる仕組みもきっとあるが、そこは重要ではないのでいったん本工程はスキップ。VMのディスク容量が逼迫してきたら、再度導入検討したい。

CloudFlareでCDNおよびDNSの設定

https://qiita.com/ulwlu/items/dbb0db5cf7099b7a7cc4
同じくこの記事を参考にCloudFlareをFREEプランで登録し、DNSのAレコードを書き換えた。なお書き換え前は、お名前.comのDNSサーバに該当ドメインが登録されており、「このドメインはお名前.comで取得されました」的なページのIPアドレスで解決されるようになっている。
続いてCloudFlare上で表示されているネームサーバーの名前を、お名前.comの設定画面（DNS設定的なもの）にて登録する。これによってレジストラは引き続きお名前.comだが、当該ドメインを管理するネームサーバはCloudFlareのものになる。お名前.comで登録後、30分程度DNSおよびCloudFlareのポータルへの反映には時間がかかるようだ。

その後、CloudFlareの「お客様の SSL/TLS 暗号化モード フル」の設定を「フル」にし、「SSL/TLS 推奨機能（ベータ版）」を「オン」にした。これも登録後30分程度は反映まで時間がかかるとのこと。なおこれらの設定値の名前は2021年2月現在のものであり、今後も設定名などが変わる可能性はある。

2021.11.23追記
CloudFlareはUniversal証明書を使っているが、これの場合は更新はCloudFlare側で自動でやってくれそうである。
https://www.infoq.com/jp/news/2014/10/cloudflare-universal-ssl/

WordPress側の設定

晴れてドメイン取得し、そのドメインでWordpressログイン、記事を書こうとすると下記のエラーに見舞われた。

• 記事の作成画面で「更新に失敗しました。 現在オフラインのようです。」と表示され、記事の保存ができなくなる。
• 記事に画像を貼り付けようとすると、「n.headers is undefined」というエラーが表示され、画像が投稿できない。

ドメインでHTTPS接続した状態でWordpressログインすると上記エラーが表示されるが、IPアドレス直打ちでHTTP接続だと上記エラーは発生しない。いろいろとggった結果、下記サイトに対処法が記載あった。多分これがなかったら解決できなかったです、大変ありがたいです。
https://h-memo.com/publishing-error-in-wordpress/

WordPressの[設定] > [一般]のWordPress アドレス (URL)とサイトアドレス (URL)がhttpになっているのがダメだったらしい。私の環境だとこの画面での変更はできなかったので、
VM上で/opt/bitnami/apps/wordpress/htdocs/wp-config.phpの設定を書き換えるとよいとのこと。GCPコンソールから直接SSH接続し、nanoエディタで書き換えを行う。上記サイト曰く、なぜかnanoエディタ以外ではうまく変更できなかったとのこと。

wp-config.php

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');

の'http://'の部分を'https://'にするだけである。
ちなみにnanoエディタはCtrl + xで保存である。保存有無を訊かれたらYで回答し、その後名前を変えるか訊かれたらとりあえずEnterうっとけばOKらしい。

あとはnginxを再起動、
sudo /opt/bitnami/ctlscript.sh restart nginx
これで上記エラーも解消できた。