GCP+WordPressでのブログ環境構築方法

本ブログを解説するにあたって基本的に以下の記事を参考に環境構築をさせていただきました。

その上で、私がこちらの記事を参考に環境構築を進める中で変えたことやハマったこと、追加で行った設定などをまとめましたのでご紹介したいと思います。

変えたこと
1. freenom -> お名前.com
2. GCPに設定するバゲット名をサイト名にした
ハマったこと
1. GCP
  1. クレジットカードが登録できない
2. WordPress
  1. Mixed Content(投稿に失敗/カスタマイズ画面が表示されない)
  2. captchaが表示されない
追加で行った設定
1. GCPの「予算とアラート」を設定
2. WordPressのプラグイン
おわりに

変えたこと

freenom -> お名前.com

上記のサイトでは無料でドメインが取得できるfreenomを使用していましたが。お名前.comに変更しました。
理由としては、将来的にgoogleアドセンスなどを考慮したときに無料のドメインだと審査に通らないという情報や、1年目は無料ですが2年目の更新時に有料でしか更新できないという情報を見たためお名前.comにしました。

Just a moment...

whios情報代行設定

GCPに設定するバゲット名をサイト名にした

GCP(Google Cloud Platform)のバゲット名はできればサイト名にしたほうが良いということでサイト名を設定するように変更しました。
バゲット名にサイト名を設定する場合、GSC(Google Search Console)の設定する必要があります。

GSCにログイン
プロパティタイプ：ドメインの方に取得したドメインを入力
DNSレコードでのドメイン所有権の確認ダイアログのTXTレコードをコピー
お名前.comにログインし「ネームサーバーの設定」→「DNS関連機能の設定」から対象のドメインにチェックを入れて「次へ」
入力→追加
- ホスト名：空でよい
- TYPE：TXT
- VALUE：GSCでコピーしたTXTレコード
※しばらく反映まで待つ必要あり（数十分ほど？まったがもっと時間がかかるケースもある模様)
GSCに戻り「確認」を押して「所有権を確認しました」と言われればOK。
バゲットの作成を完了させる(上記ができてないと設定が完了できない)

ハマったこと

GCP

クレジットカードが登録できない

GCPの登録時、クレジットカードの登録時エラーになり登録できないという状況になりました。
限度額を確認しても問題ないので何故か悩んだのですが、原因は住所が一致していないというものだったようです。クレジットカードだけでなく、クレジットカードの引き落とし先の銀行の住所までGCPに登録した住所と合わせたら登録できました。

WordPress

Mixed Content(投稿に失敗/カスタマイズ画面が表示されない)

環境構築後、WordPressのテーマのカスタマイズや投稿などをしようとすると、「記事を更新使用とすると失敗」「テーマのカスタマイズでプレビューが表示されない」という現象がになっていました。
F12キーでChromeの開発ツールでエラーを確認すると「Mixed Content」が発生していました。

＜対処方法＞

上記サイトでは「Always Use HTTPS」「Automatic HTTPS Rewrites」の設定が記載されているが
SSLの設定がデフォルトでは「Flexible」でこれを「Full」にしないとMixedContentになってしまうようです。
併せて、wp-config.php以下の部分の「http:\/\/」を「https:\/\/」に変更しました。

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

captchaが表示されない

SiteGuardをインストールすると管理ページのログインにCaptcha認証が追加されますが、画像が表示されずログインできない状態になりました。いろいろ試しましたがうまくいかないためSSHで接続し、一度SiteGuardのフォルダを削除(SiteGuardのプラグインアンインストール)。Captcha認証がなくなり管理ページにログインできるようになってるので、再度SiteGuardをインストールし有効化後、「GITEGUARD→画像認証」から「OFF」を選択してCapthca認証を無効化。
別で「Invisible reCaptcha for WordPress」をインストールしました。

参考：https://readmaster.net/think-issue-memo/wordpress-tech/recaptcha-login-image-not-visible/