🚔

【GCP】LB + Wordpressで作成されたWebサイトのSSL化

2021/06/17に公開

Google Cloud

前提

Compute Engine -> Cloud SQLの構成であること
Wordpressの管理画面にログインでき、HTTPで運用していること。
自ドメインを取得していること（取得方法のリンクあり。）

流れ

プラグインのインストール
インスタンスグループの設定
Cloud Load Balancingの設定
Cloud DNSの設定
ネームサーバの変更
パーマリンク設定

1. プラグインのインストール

Wordpressの管理画面にログイン。
左ペインの「プラグイン」＞「新規追加」を選択。
”SSL Insecure Content Fixer”を検索し、インストール。
左ペインの「インストール済みプラグイン」を選択。
「SSL Insecure Content Fixer」を有効化。
左ペインの「設定」＞「SSL Insecure Content」を選択。
「HTTPS detection」の「HTTP_X_FORWARDED_PROTO」を有効化。

「変更を保存」をクリックして、本過程は終了。

なぜプラグインが必要か。

リダイレクトループと混在コンテンツエラーを防ぐためです。
【GCP/Wordpress】WebサイトをSSL化したら表示されなくなった

2. インスタンスグループの設定

GCPのコンソール画面にログイン。
Compute Engine ＞「インスタンスグループ」＞「インスタンスグループを作成」を選択。
「新しい非マネージドインスタンスグループ」を選択。
以下のパラメータに従って設定。（記載されていないものは任意）

項目	パラメータ
ロケーション	既存インスタンス（※）のロケーション
ゾーン	既存インスタンスのゾーン
ネットワーク	既存インスタンスのVPC
サブネットワーク	既存インスタンスのサブネット
VMインスタンス	既存インスタンスを選択。
※ 1.でプラグインをインストールしたインスタンスのこと。

「作成」をクリックして、本過程は終了。

3. Cloud Load Balancingの設定

※ドメイン取得されていない方は下記リンク辺りが参考になるかと。
freenomで無料ドメインを取得する

GCPのコンソール画面にログイン。
「ネットワークサービス」＞「Cloud Load Balancing」と進み、
「HTTP(S)負荷分散」の「構成を開始」をクリック。
「インターネットから自分のVMへ」をクリック。
「バックエンド構成」＞「バックエンドサービスを作成」を選択。
以下のパラメータに従って設定。（※記載されていないものは任意）
設定後、「作成」をクリック。

項目（1層）	項目（2層）	パラメータ
バックエンドタイプ	-	インスタンスグループ
プロトコル	-	HTTP
名前付きポート	-	http
新しいバックエンド	インスタンスグループ	1.で作成したインスタンスグループ
	ポート番号	80

「ホストとパスのルール」はデフォルトのままで大丈夫。
「フロントエンドの構成」をクリック。
以下のパラメータに従って設定。（※記載されていないものは任意）

項目	パラメータ
プロトコル	HTTPS
IPバージョン	IPv4
ポート	443
証明書	新しい証明書の作成

「新しい証明書の作成」ウィンドウが開かれるので、
こちらも以下のパラメータに従って設定。（※記載されていないものは任意）
設定後、「作成」をクリック。

項目	パラメータ
作成モード	Google管理の証明書を作成する
ドメイン	取得した自ドメイン

作成されたLBのグローバルIPをメモっておき、本過程は終了。

4. Cloud DNSの設定

GCPのコンソール画面にログイン。
「ネットワークサービス」＞「Cloud DNS」＞「DNSゾーンの作成」を選択。
以下のパラメータに従って設定。（※記載されていないものは任意）
設定後、「作成」をクリック。

項目	パラメータ
ゾーンのタイプ	公開
DNS名	取得した自ドメイン

作成したゾーンをクリックして、「レコードセットを追加」をクリック。
以下のパラメータに従って設定。（※記載されていないものは任意）
設定後、「作成」をクリック。

項目	パラメータ
DNS名	空欄
リソースレコードのタイプ	A
IPv4 アドレス	3.でメモっといたLBのグローバルIP

本過程は以上。

5. ネームサーバの変更

GCPのコンソール画面にログイン。
4.で作成したゾーンをクリック。
NSレコードに記載されているドメインをまるっとコピー。

取得したドメインサービスで設定されているネームサーバを変更。

（※以下はFreenomの場合）

Freenomにログイン。
上部の「Services」＞「My Domains」を選択。
「Manage Domain」を選択。
「Management Tools」＞「Nameservers」を選択。
「Use custom nameservers」を選択し、コピーしたドメインを貼り付け。
最後に「Change Nameservers」をクリック。

本過程は終了。

#ターニングポイント

ここまで終わったら、30分 - 1時間待機！

証明書の関連付けとDNS設定反映に時間がかかります。

待機後、以下を確認。
正常確認取れ次第、次のステップへ。

DNS設定の確認
cman.jpを開く。
「ホスト名を指定」欄に自ドメインを入力し、dig実行（nslookupでも可。好みの問題）。
Aレコードに、LBのグローバルIPが反映されていることを確認。

※出来ていなかったら
⇒ ネームサーバ変更できているか確認。
　 NSレコードに、5.で登録したネームサーバが反映されていない場合、再度5.を設定。
⇒ Cloud DNSの設定を確認。
　登録しているドメイン・IPに誤りはないか。
　ゾーンは公開になっているか。

証明書の確認
GCPのコンソール画面にログイン。
「ネットワークサービス」＞「Cloud Load Balancing」と進み、
作成したLB ＞作成した証明書をクリック。
「ステータス」が ”Active”、「ドメインステータス」に☑と入っているか確認。

※出来ていなかったら
⇒ 証明書作成過程で誤りはなかったか、確認。
　ここは作り直しOK。
⇒ 公式のトラブルシューティング

6. パーマリンク設定

※Wordpressの管理画面からでも可能ですが、
　正確性を取って今回はDBを設定する手段を取りました。

インスタンスからCLoud SQLへログイン。
下記コマンドを実行。

SELECT * FROM wp_options WHERE option_name IN ('home','siteurl');

実行結果が、以下のように「http://..」で始まっていることを確認。
下記コマンドを実行。「...」のところは自ドメインを記載。

UPDATE wp_options SET option_value = 'https://...' where option_name IN ('home','siteurl');

再度下記コマンドを実行し、実行結果が「https://...」になっていることを確認。

SELECT * FROM wp_options WHERE option_name IN ('home','siteurl');