takerokero blog

さくらサーバーとMovableTypeの当サイトを常時SSL化しました。

最近、インターネットのサイトを常時SSL化にするのが流行っているようです。

SSLは、URLが、http://ではなく、https://からはじまるもののこと。 通信が暗号化されるので、これまでは銀行やネットショップなどのサイトで、 個人情報を入力する部分だけに使われていました。 最近は、信用を高める効果などを狙って、サイト全体をSSLにすることが、 企業サイトだけでなく個人のブログでも広がっています。 Googleの検索でも、SSLにしているサイトを上位に表示するのだとか。

このブログのサーバー「さくらインターネット」でも、 10月から無料のSSLサーバー証明書を設定できる機能が追加されたので、 私も流れに乗って常時SSL化してみました。

やったこと

  1. MovableTypeのテンプレートと記事の修正
  2. 「さくらインターネット」でSSL証明書の取得
  3. 外部リソースの修正
  4. もともとあったサイトの不具合修正
  5. GoogleアナリティクスのURLの変更、Googlesearchconsoleへ新規追加・接続変更
  6. HTTPSへのリダイレクト

SSL証明書の取得は、「さくらインターネット」の管理画面でボタンを押すだけでできますが、 それにあわせて既存のブログの修正もしなければならず、これがなかなか大仕事でした。 物理的な量も多かったし、うまく動作しないのを調べたり、 先日の土日の休みと今日の3日がかりで、やり終えました。

SSL化の過程でもともと抱えていたサイトの不具合がわかり、 この修正にも多くの時間を要しました。 でも、これを修正できたことが、今回SSL化をして一番よかったことのような気もします。

以下、作業の簡単な備忘録です。誰かのお役に立てるでしょうか。。

MovableTypeのテンプレートと記事の修正

作業は、http://で記述している部分を相対パスにするか、http:を除いて//にすること。 http://でもhttps://でもアクセスできるようにするためです。 ソースの文字数が減り、軽量化の効果もあるようです。

テンプレートの修正

大体以下の4パターンで修正しました。

<mt:BlogURL />
↓
<mt:BlogRelativeURL />

regrex_replaceの記述は、他のページで紹介されているとおりでは動かず、 いろいろ試してこうしました。

<mt:EntryPermalink />
↓
<mt:EntryPermalink regex_replace="/(http|https)://.+?//","/">

アーカイブリンクは自分のフォルダ構成に合わせて少々強引に。。

<mt:archiveLink />
↓
<mt:BlogRelativeURL />archives/<mt:ArchiveDate format="%Y/%m/" />

単純にreplace。

<link rel="stylesheet" href="<$mt:Link template="styles" type="text/css" />
↓
<$mt:WebsiteURL setvar="WebsiteURL"$>
<link rel="stylesheet" href="<$mt:Link template="styles" replace="$WebsiteURL","/"$>" type="text/css" />

以下のサイトの記事などを参考にしました。
Movable TypeでHTTPS（常時SSL）に移行するときにやること

記事の修正

記事中にサイトのURLを直書きしているのは、<a>タグのhref、<img>タグのsrc。 ほとんどhttp://から書いていたので、はじめる前は途方に暮れましたが、 MovableTypeのツールの検索・置換を使い、一気に修正できました。

以下のサイトを参考にしました。
常時SSL化に必要なHTMLソースコード編集のコツ

「さくらインターネット」でSSL証明書の取得

コントロールパネルで設定ボタンを押すと、10分程度でhttpsでもアクセスできるようになりました。 事前準備が効いて、サイトも大崩れしていませんでした。 修正漏れなどで、サイト内にhttp://が残っていると、 SSLでも「一部安全でないサイト」になるので、これを修正します。

MovebleTypeの設定にある「公開パス」のURLをhttps://に変更

<mt:BlogURL />のURLがhttps://に変わります。

外部リソースの修正

自分のサイトの外部リソースは、Google、Amazon、A8.netのアフィリエイトとRSS表示パーツぐらい。 アフィリエイトのリンクは、ほとんど修正不要でした。 各ページの右下につけていた、自サイトのRSSを表示しているパーツは、 https未対応で表示されなくなってしまいました。 代替のものを探さないといけませんが、おまけで付けていたものなので、一旦放置。

もともとあったサイトの不具合修正

cgiを使用しているところでいろいろ問題がありました。 cgiはメール送信とサイト内検索で使っています。

メール送信は動作もしていなかった

メールは属性の誤りで動作もしていませんでした（汗）。 多分、今年3月にMovableTypeのバージョンアップをしたときからです。 修正はメール送信のcgiの属性を変えるだけでOK。

cgiがドメイン(takerokero.net)上で動作していなかった

メールや検索の実行ボタンを押すと「安全でないサイトにアクセス」と表示されます。 cgiを置いているフォルダが、独自ドメインのフォルダと並列の場所にあるためでした。 検索ボタンを押すとその結果は、独自ドメインではないさくらのサーバーのドメインが表示されます。 カッコ悪い。。2009年にさくらにサーバーを移して以来、ずっとこうでした。

メール送信や検索ボタンを押して「安全でない」では、何のためのSSLだかわからないので、 MovebleTypeの公開パスのフォルダをひとつ上に移動して、 cgiのディレクトリがその下に来るように修正しました。 正確には、一度新しい場所にコピーをして、元の場所のを削除しました。

そのあと「さくらインターネット」のコントロールパネルで、 独自ドメインの参照ディレクトリをサイトの公開パスと同様にひとつ上に変更しました。

幸い大きなトラブルはありませんでしたが、結構こわかったです。

最後に、MovableTypeの「mt-config-cgi」のCGIPathとStaticWebPathの記述を https://～に変更して、SSL化はひととおり完了です。

GoogleアナリティクスのURLの変更、Googlesearchconsoleへ新規追加・接続変更

以下のリンクを参考に行いました。
サイトのHTTPS化で必要となるGoogleサーチコンソールの再登録方法

HTTPSへのリダイレクト

最後は、.htaccessを使って、http://でアクセスしてきたものをhttps://に振り替える処理です。 これもまたハマりました。「さくらインターネット」の案内どおりに記述し、 リダイレクトはできたのですが、 サイトでphpを使ってファイルを読み込んでいる部分がエラー表示されてしまいます。
Warning: readfile("https://takerokero.net/xxx.php"): failed to open stream: Redirection limit reached, aborting in ...

なかなか同じような不具合の記事が見つからず、悩むこと丸一日。 ようやく見つけたのが以下のリンク記事ですが、 肝心の除外の設定方法が難解でわかりません。 除外の記述は、他サイトを参考にし、以下のソースコードを.htaccessに追加し、解決できました。

特定のフォルダ（hoge）をリダイレクトから除外する（4行目）

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{ENV:HTTPS} !on
RewriteCond %{REQUEST_URI} !(^/hoge/)
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

PHPのfile_get_contents(cURL)がリダイレクトループする場合の対応方法

完成

URL横の鍵マークが輝いてみえます。

20171127_01.jpg

関連記事