Lightsail HTTPS CloudFrontを使って簡単HTTPS化!

Lightsail https化

Lightsail HTTPS CloudFrontを使って簡単HTTPS化!

HTTPSはウェブで情報を安全にやりとりする仕組みです。

HTTPS化はセキュリティーの観点で今や必須となっているので、ぜひ設定しましょう。

アマゾンLightsailのHTTPS化はWEBで探しても情報が少なく分かりにくいため、 初心者でも分かるように、今回まるっとまとめましたので、参考にしてください。

HTTPS化にはCroudFrontを使う方法と、ロードバランサを使う方法の2つがありますが、ロードバランサを使う場合、18ドル程度料金が追加されてしまいます。

CroudFrontを使うと追加料金がほとんどかからないため(1ドル程度)、今回はCroudFrontを用いる方法をご紹介します。

(固定費は下げたいですよね^^)

具体的なステップは下記のようになります。

最後にログインできない、うまくいかない表示されないなどの対処方法も記載しておきます。

アマゾンLightsail のHTTPS化のためのステップ

1.Amazon Certificate Managerで証明書を発行

2.wp-config.php修正

3.Amazon CroudFrontの構築

4.LightsailでDNSの設定

5.プラグイン”SSL Insecure Content Fixer”と”Really Simple SS”Lのインストールと設定

Amazon Certificate Managerで証明書を発行

まずはじめに証明書をAmazon Certificate Managerで発行します。

具体的な発行方法は、下記を参考にしてください。

wp-config.php修正

Lishtsailを開き、インスタンスの赤枠をクリックします。

下記のようなエディタが立ち上がります。

書き込み権限を得るため、下記のように実行します。

cd /opt/bitnami/apps/wordpress/htdocs/

下記のように入力します。

ls -l wp-config.php

おそらく-rw-rと出るはずです。この場合、書き込み権限がオフになっています。

書き込み権限をオンにするため、下記を入力します。

chmod g+w wp-config.php

これで書き込み権限が得られたはずです。

もう一度下記を入力し、-rw-rwとなればOKです。

ls -l wp-config.php

書き込み権限が得られたところで、下記を入力します。

sudo vi /opt/bitnami/apps/wordpress/htdocs/wp-config.php

i を押すとインサートとなり、下記のように修正を行います。

define(‘WP_SITEURL’, ‘https://’ . $_SERVER[‘HTTP_HOST’] . ‘/’);
define(‘WP_HOME’, ‘https://’ . $_SERVER[‘HTTP_HOST’] . ‘/’);

if (strpos($_SERVER[‘HTTP_CLOUDFRONT_FORWARDED_PROTO’], ‘https’) !== false) {
$_SERVER[‘HTTPS’] = ‘on’;
}

入力する場所も下記の図に示しますので同じ場所に入力してください。

入力し終わったら、ESC を押し、 :wq! Enterキーで保存します。

最後に、exit  Enterキー で接続を切ります。

Amazon Croudfrontの構築

英語表記ですが、記載されたように設定するだけなので簡単です。

AWS マネジメントコンソールを開きます。

真ん中にあるCloudFrontをクリックします。

Criate Distributionをクリックします。

Get Startedをクリックします。

Origin Domain Nameにwp.example.comのようなサイト名を入力します。

wp.を頭に付けることが重要です。

Origin IDはクリックするだけで自動的に入力されます。

下記のように設定を行います。

Rediredted HTTP to HTTPSを選択

GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEを選択

Object CashingでCustomizeを選択

MinimumTTL, Maximun TTL, Default TTLを0, 300, 300に設定します。

Forward CookiesをALL

Query String Forwarding and CachingでForward all, cache based on allを選択

Alternate Domain Namesにwww.example.comを記入します。

Custom SSL Certificateで先に作成した証明書を選択します。

クリックすると、証明書が表示されます。

以下のように設定します。

以下のように設定後、右下のCreate Distributionをクリックします。

上記設定後、CloudFrontの作成は30分程度掛かりますので、気長に待ちましょう。

Statusがin ProgressからDeployedになれば完了です。

作成完了後、赤枠の部分をクリックし、一部修正を行います。

Behaviorsのタブをクリックし、左の四角にチェックを入れ、Editをクリックします。

Cache Based on Selected Request HeadersでWhitelistを選択し、その下でCloudFront-Forwarded ProtoとHostを追加します。

さらに管理画面の/wp-admin/*や*.phpがキャッシュされるとうまく動作しないので、Create Behaviorから下記のように追加作成を行います。

/wp-admin/*や*.php では MinimumTTL, Maximum TTL, Default TTLを0, 0, 0に設定します。

下記のように設定します。 *.phpもPath Pattern以外は同じ設定になります。

MinimumTTL, Maximum TTL, Default TTLを0, 0, 0に設定します。

Forward CookiesをALL

Query String Forwarding and CachingでForward all, cache based on allを選択

Forward Cookiesと Query String Forwarding and Caching2つの設定はログインするために重要です!。

忘れずに設定してください。

以上でCloudFrontの設定は完了です。

LightsailでDNSの設定

DNSの設定を行います。

CloudFrontで赤枠をクリックします。

下記の赤枠を次のLightsailのDNS設定で使用するため、コピーします。

AmazonのLightsailを開き、ネットワーキングをクリックします。

赤枠のDNSゾーンをクリックします。

下記のようにレコードセットを設定します。

はじめに、Aのレコードのwwwをwpに変更します。

次にレコードの追加でCNAMEのレコードを一つ追加し、サブドメインとマップ先を設定します。

サブドメインはwww.example.comを入力し、マップ先には先ほどコピーした****.cloudfront.netをペーストします。

プラグイン”SSL Insecure Content Fixer”と”Really Simple SSL”のインストールと設定

もう少しで完了です。がんばりましょう。

プラグイン”SSL Insecure Content Fixer”と”Really Simple SS”Lのインストールと設定を行います。

プラグインの新規追加からインストールを行い、有効化を行います。

Really Simple SSL有効化で、下記のように表示されるので、”はい、SSLを有効化します。”をクリックします。

SSL Insecure Content Fixerで設定変更を行います。

設定から SSL Insecure Content Fixer を選択します。

下の方に下記が表示されます。

HTTP_CLOUDFRONT_FORWARDED_PROTOを選択し、変更を保存します。

LightsailのHTTP化の手順は以上になります。

http://www.example.com (自分のサイト名)と入力し、表示されれば完了です。

もし、うまく表示されない方は下記を参照ください。

感触としてCloudFrontを使ったhttps化直後は、なかなかサイト表示されなかったりと不安定でしたが、3時間ほど経つとだいぶサイトの表示が安定したと思います。

うまくいかない時の対処

HTTPSにならず、サイト名が “wp.サイト名” の表示になってしまう。

Chromeブラウザを使用している場合、キャッシュが古いまま残っていて、表示がHTTPのままで、サイト名が”wp.サイト名”になってしまう場合があります。

(一方でInternet Explorerではhttp://www.サイト名のように正しくサイトが表示される。)

この場合、Chromeの設定を一度クリアすることをお勧めします。

私もこの方法で、サイトが正しく表示されるようになりました。

下記に手順を示します。

Chromeブラウザの右上にある縦に並んだ3つの点をクリックします。

設定の下にあるリセットとクリーンアップをクリックします。

設定を元の既定値に戻しますをクリックします。

設定のリセットを押します。

ログインできない。

上記のようなエラーが出て、ログインできない場合は下記のアドレスからログインが可能です。

http://wp.example.com/wp-admin

この接続ではプライバシーが保護されませんと表示されます。

下にある詳細設定をクリックし、”wp.example.comにアクセス”をクリックすることでログインできます。

Forward CookiesとQuery String Forwarding and Caching2つ設定はログインするために重要です!。

ログインできない場合は、この2つの設定をもう一度見直してください。

ビジュアルエディタとテキストエディタが表示されない。

下記のプラグインをインストール、有効化で表示させることが可能です。

Enable Visual Mode in CloudFront

まとめ

クラウドフロントの構築は骨が折れるのですが、世界各国の多くのエッジサーバーにデータを置いておくことができるためエンドユーザーに高速にデータを届けることができるメリットがあります。

日本では現在、東京と大阪に設置されています。

ぜひ構築してみてください。

グーグルアドセンスの合格のためにはクラウドフロントで注意点があります。

詳細は下記にまとめていますので参考にしてください。