1. ホーム > 
  2. 事例・レポート > 
  3. さくらのSSLでWebサイトをhttps化する手順

さくらのSSLでWebサイトをhttps化する手順

さくらのレンタルサーバ、さくらのSSL(ラピッドSSL)を使って、Webサイトのhttps化をする手順をご紹介。301リダイレクトの設定やhttps化における注意点などを解説。

  • 2016/8/1
  • 2016/8/1

さくらのSSLを使ってlbleveryをhttps化しました。

ラピッドSSLを使ってhttps化したので、即時発行・3年で3,456円と値段も格安でした。
設定も難しくありませんでしたが、httpからhttpsへのリダイレクトを設定する部分には少し手間取ってしまいました。

今回は、さくらインターネットの管理画面での設定と、httpsのURLへリダイレクトするときの手順を解説します。

さくらインターネットを使っている方が、これからWebサイトをhttps化するときの参考になれば幸いです。

サーバーコントロールパネルで準備

まずはさくらインターネットのサーバーコントロールパネルにログインして、ラピッドSSLの申し込みをする準備(CSRの作成)を行います。

CSRとは、SSL証明書を発行するための署名要求(Certificate Signing Request)のことです。

  1. ドメイン設定をクリックして、ドメインの一覧を表示し、https化するドメインのSSL証明書の「登録」をクリックします。
  2. 「秘密鍵を生成する」ボタンをクリックします。
  3. 会社名や国コードなどの必要事項を入力して「CSRの作成」ボタンをクリックします。今回は個人で運営しているWebサイトなので、会社名にはドメイン名を入力しました。
  4. 入力した情報を元にCSRが作成されますので、「ラピッドSSLのお申し込みへ進む」ボタンをクリックします。
  5. もう一度「サーバ証明書のお申し込み」のボタンをクリックします。

ラピッドSSLでSSL証明書の申し込み

SSL証明書の申し込みをします。

  1. プランを選びます。ラピッドSSLのSSL証明書は、最大で3年間まで申し込むことができます。2年で324円、3年だと1,404円も安くなりますので、特別な理由がない限りは3年で申し込みをした方がお得です。
  2. 決済を済ませると会員メニュー > 契約情報にラピッドSSLの項目が表示されます。申し込んだ直後は「状態」が準備中になっています。
  3. 決済してから20分〜30分程度で「状態」が利用中に変わります。この状態になったら、ドメインの設定を始められます。

ドメインの設定でhttpsの利用を開始

会員メニューのラピッドSSLの状態が利用中に変わったら、ドメインの設定を変更します。

  1. サーバーコントロールパネルにログインして、ドメイン設定から対象のドメインの「変更」ボタンをクリックします。
  2. 「4.SSLの利用をお選びください」でSNI SSLを利用するのラジオボタンをクリックして選択します。
  3. 「送信」ボタンをクリックすれば、ドメインの設定は完了です。
  4. httpsでアクセスできるようになっているか確認します。

画像やリンクJavaScript部分の書き換え

Webサイトをhttps化した時には、ページ中に記述されているimgタグ(画像)やリンク先の指定、JavaScriptの部分をhttpsで呼び出すように修正する必要があります。

HTMLページを1ページずつ作成しているWebサイトの場合、コツコツと修正していく必要がありますが、WordPressを使用しているブログの場合、「Search Regex」というプラグインを使えば、一気に書き換えをすることができます。

「Search Regex」は、記事中の特定の文字列を一気に置換してくれる便利なプラグイン。
記事のタイトルやコメントの置換などにも対応しています。

Search RegexでWordPressの記事を書き換え

今回は記事中にあるimgタグ、リンクタグでhttp://から始まる絶対パスになっている部分を書き換えました。

  1. Search Regex プラグインをインストールして、有効にします。
  2. Search Regexの設定画面がツールにあります。
  3. 今回は、すべての記事を対象に置換をしますので、SourceはPost contentを選択。Limit to:はNo Limitを選択します。
  4. Search patternには記事内で検索する文字列、Replace patternには置換する文字列を入力。今回はSearch patternに「/」、Replace patternには「/」を入力します。
  5. 「Replace&Save」ボタンをクリックすると置換作業が開始されます。「Search」ボタンをクリックすると、Search patternに入力した文字が使われている該当箇所が一覧で表示されますので、事前に確認しておくのもいいかなと思います。

今回特に問題は起きませんでしたが、置換作業を行う前に念のためWordPressのデータベースをバックアップしておいたほうがいいかなと思います。

jQueryの読み込みなどリソースの修正

私のサイトではjQueryのファイルは、GoogleがCDNで用意しているファイルを読み込んで使っています。
そのため、このjQueryの読み込み部分もhttpsで読み込んでおく必要があります。




今回この部分を気づかずにしばらく悩んでしまいました…。
httpsでページを表示した時にエラーが起きる場合、ソースコードを確認してhttpで読み込んでいるリソースがないかどうか確認しましょう。

また、GoogleAnalyticsのトラッキングコードや、Google Adsenseの広告コードなども、古いコードを使っている場合は、httpsでの読み込みに対応した最新のコードに書き換えておきましょう。

httpsのURLへ301リダイレクトを設定

httpsでページにアクセスできることを確認し、読み込むリソースの修正も終わったら、httpのURLからhttpsのURLへ301リダイレクトを行います。

リダイレクトする前に、httpsのURLでページが正しく表示されるかどうか、JavaScriptが正しく動作するかをきちんと確認しておきましょう。

さくらのレンタルサーバの環境変数の取扱い

httpsへのリダイレクトの際に、多くのサイトが説明している「mod_rewriteによるURLの書き換え」は、さくらのレンタルサーバの場合、仕様上使えません。

「さくらのレンタルサーバ」にて提供しているウェブサーバ (Apache) は、 80番ポートを使用するものと、443番ポートを使用するものとの 2種類に分けられます。
一般的に、80番ポートは「http://」、443番ポートは「https://」という形式でアクセスされ、 「https://」についてはプロクシとして動作します。
そのため、同じディレクトリへのアクセスであっても、その際に呼び出されるウェブサーバ が異なると、 CGIプログラムやウェブサーバが.htaccessなどのファイルを読み込む際、挙動に違いが生じます。
例えば、HTTPとしてアクセスした場合はお手元のコンピュータが、 HTTPSとしてアクセスした場合はサーバそのものがアクセス元となります。
このため、SSLのみのアクセス許可(HTTPアクセスの制限)や、mod_rewriteによるURLの書き換えはできません。
引用:SSL利用時の注意点|さくらインターネット公式サポートサイト

この仕様のため、ちょっと工夫する必要があるようです。
この点の解決方法、WordPressにおける影響の解決方法は、tabimobaさんが解説してくれているページが参考になります。

さくらのレンタルサーバでhttpsへのリダイレクトを設定

以下、さくらのレンタルサーバでHTTPS(SNI SSL)な独自ドメインのWordpressサイトを構築する際の注意点からの引用です。

Wordpress設置時に追加する(パーマリンク設定時に生成される).htaccessの先頭に、以下の設定を追加します。


RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]

次に、wp-config.phpの先頭に以下の内容を追加します。

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
    $_SERVER['HTTP_HOST'] = 'www.example.com';
    $_SERVER['SERVER_NAME'] = 'www.example.com';
    $_ENV['HTTP_HOST'] = 'www.example.com';
    $_ENV['SERVER_NAME'] = 'www.example.com';
}

引用:さくらのレンタルサーバでHTTPS(SNI SSL)な独自ドメインのWordpressサイトを構築する際の注意点

結局これでうまくリダイレクトができるようになりました!感謝!!

サーチコンソールにhttpsのプロパティを追加

ここまでの作業でWebサイトはhttpsでアクセスできるようになりましたので、最後にサーチコンソールにhttpsのプロパティを追加します。

GoogleはhttpのWebサイトとhttpsのWebサイトは「別のサイト」として認識しますので、httpsでもプロパティを登録しておかないと、検索アナリティクスなどのデータが使えなくなってしまいます。

  1. サーチコンソールにログインして「プロパティを追加」ボタンをクリックし、httpsのアドレスを入力します。
  2. Webサイトの所有権の確認画面になりますが、Google Analyticsのトラッキングコードが入っていれば、そのまま「確認」ボタンをクリックすれば大丈夫です。
  3. 無事に「所有権の確認」が完了です。

プロパティセットの作成

httpsのプロパティを作成しておけば大丈夫ですが、https化前後の検索アナリティクスのデータを一つの画面で確認するために、httpとhttpsのプロパティセットを作成しておきます。

  1. サーチコンソールにログインして「セットを作成」をクリックします。
  2. セット名を入力し、セットに含めるプロパティ(メンバー)を選択します。
  3. 「変更を保存」ボタンをクリックすればセットの作成は完了です。

正直、もっと手間取るかな?と思っていましたが、大きなトラブルもなくhttps化が完了したと思います。(これからトラブルが顕在化するかもしれませんが…)

httpsはランキングシグナルに使われていますが、その影響は限定的です。
ただ、ウェブマスター向け公式ブログで書かれているように、Googleはhttpsのシグナルを強化していくつもりのようです。

HTTPS をランキング シグナルに使用します(Google ウェブマスター向け公式ブログ)

良質なコンテンツを増やすこと、自然な被リンクが集まるようなコンテンツを増やすことというSEOの原則は変化しませんが、どこかのタイミングでhttps化もしておいた方がいいのではないかなと思います。

https化して、アクセスやランキングにどういった影響があったのかは、後日ブログにまとめたいと思います。

「役にたった」と思ったらシェアお願いします