ブログをHTTPS化しました

2016/04/30

前々からやりたかったのですが、この度ブログをHTTPS化しました。

グリーンの鍵マークが付いた。カッチョイイ（笑）。
hetaremac_ssl

今までもだいぶ敷居が低くなってきたとはいえ年間1万数千円程度していた各種SSLサービスも、ここ1年くらいで年間1500円くらいのコストで設定できるようなサービスが出てきた。
Googleもサイトのセキュア化を奨励し始めたので、それに乗っかったというわけ。
あと、個人的な興味でHTTPS化をする作業を一度してみたかったというのもある。特に個人情報をやり取りしているわけではないけど。
SEO的な効果も見込めるみたいだけど（例えば同じキーワードでヒットした場合HTTPSの方が上に来るらしい、とか）、自分で検証のもめんどくさいので、それは二の次。

構成はこんな感じ

さくらのレンタルサーバスタンダード
さくらインターネットで取得した独自ドメイン（マルチドメイン）
SSL証明書：ラピッドSSL
https://ssl.sakura.ad.jp/

年間1,500円です。安い。その代わり古いブラウザやらOSには対応してません。まあコーポレートサイトでもないしもう考慮はしないでいいよね、ってことで。

細かい手順については以下のサイトが参考になります。

リダイレクトループなんかの話は自分も感覚的にしか理解していないので、文章による説明は正直上記サイトを見た方が早いです（笑）。

個人的に要注意点だと思ったのは以下のようなところ。サーバ仕様（さくらインターネット独自SSL《SNI SSL》の仕様）や、独自ドメイン取得時の設定により手順が違うので参考までに。

独自ドメインがwww.が付与されたマルチドメインで使用している場合
（さくらサーバコンパネの「マルチドメインとして使用する（推奨）」にチェックが入っている。）
→SSL証明書取得時にコモンネームを「www.付き」で登録する。
（普段ずっとwww.無しで使っていたので、最初間違えそうになった）
301リダイレクトについて、まずルート直下の「.htaccess」にも301リダイレクトの記述を書いて、「https://」→「https://」にリダイレクトさせる。
次に「wp-config.php」にさくらインターネット用コードを書いてあげる。最初トップ下階層のcssやjsが「https://」のままでが混在コンテンツになってしまったが、これを書いたら直った。
無事リダイレクトループを回避できたら、人力でないと変わらない混在コンテンツを片付けてやる。混在コンテンツ撃退にはWordPressプラグイン「Search Regex」を使うと捗る。

以下、書き方例。

//.htaccessに記述
&lt;IfModule mod_rewrite.c&gt;
RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://hetaremac.com/$1 [R=301,L]
&lt;/IfModule&gt;

// wp-config.phpに記述
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
$_SERVER['HTTP_HOST'] = 'hetaremac.com';
$_SERVER['SERVER_NAME'] = 'hetaremac.com';
$_ENV['HTTP_HOST'] = 'hetaremac.com';
$_ENV['SERVER_NAME'] = 'hetaremac.com';
}

どちらもさくらインターネット特化の「HTTP_X_SAKURA_FORWARDED_FOR」の変数がキモですね。他サーバだと記述が違うみたいです。
「wp-config.php」についてはドメインのところを最初「www.」有りで書いたらリダイレクトループになってしまった。「www.」付きマルチドメインで「www.」無しドメイン運用してる時は「www.」無しでリダイレクトを書くこと。
あとはカエレバのAmazonアフィリエイトで取得している画像が「https://」のままだが、ここはAmazonの方が対応しないとどうしようもないので、そのままにしている。

その他、使っているGoogle AnalyticsやSearch Consoleの設定も、忘れずに変えてやる。