さくらサーバでWPの自サイトを常時SSL化した手順と方法

2017.01.16 (Mon)

小崎孝雄

WEB制作

さくらサーバで常時SSL化:作業方法と流れ

以前の記事の続きです。

証明書を取得済の前提で、実際のSSL化の修正における、下記の作業について説明いたします。

  1. Webサイトの修正

    SSLのURLでページを表示しても、画像やJSを非SSLのパス(URL)で読み込んでいると、セキュリティエラーが表示されます。それが表示されないようサイトの修正を行います。

  2. URLの統一

    SSLを導入することで「http://~」「https://~」の両方で表示可能になります。SEOの観点から、「wwwのありなし」を含め、URLのパターンを統一する必要があります。

前提と使用サーバの環境

  • さくらインターネットのサーバでWP(ワードプレス)を使用して構築している
  • 独自ドメインのSSL証明書を取得・インストール済
  • 「https://www.brain-solution.net~」で統一したい

作業方法と手順

【手順1】さくらのサーバコントロールパネルでSSL用にドメイン設定を追加

下記キャプチャは設定完了時のものです。
もともと「1」のみでしたが、URLの統一の為にちょっと特殊な事(さくらサーバの場合)をしました。

ドメイン一覧

「1」のドメインで「マルチドメインとして使用する」設定にしていたのを、「wwwを付与せずにマルチドメインとして使用する」に変更

初期の設定

サブドメイン「www」付きのマルチドメインで「2」を追加。
「マルチドメインとして使用する」にチェックを入れます。
もともと「1」に入れていたSSL証明書と同じものを「2」にも設定します。

追加ドメイン

【手順2】ファイルやDBのバックアップ

これから先の作業は、失敗すると大変なことになるので、先にバックアップをとっておきます。

  1. phpMyadminからDBをエクスポート
  2. サーバ上の最新ファイルをローカルPCへダウンロード

【手順3】ファイルの修正

【目的】画像やjavascript、css等を「http」での読込をしないようにしたい。

手順「2」でダウンロードした最新ファイルのテーマを作業用に複製し、修正していきます。

まずは「http://」始まりの自サイトのドメインを検索・修正

「http://www.brain-solution.net」でWPのテーマをキーワード検索し、「/」始まりのパス(または、WPのテンプレートタグ)に変更します。

検索・置換には下記のソフトが便利です。

Devasをダウンロード

「リンク」「画像参照パス」「js」「OGPタグ」等、使用箇所は様々な為、一括置換するとまずい時もあります。
箇所によっては「/」始まりのパスではなく「https://www.brain-solution.net~」の指定にする必要があります。

次に「http://」始まりのパスを検索・修正

念のため「http://」でWPのテーマをキーワード検索し、修正モレが無いか確認します。

おそらく、外部jsや外部cssがヒットするかと思います。これらを確認・修正していきます。

外部ファイルがSSL対応していれば、下記のように「//」始まりのURL記述にする方法もあります。

<script src=”//html5shim.googlecode.com/svn/trunk/html5.js” type=”text/javascript”></script>
<script src=”//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js” type=”text/javascript”></script>

※まだサーバへアップはしません

【手順4】URLの統一

【目的】「http://(wwwありなし)」「https://(www無し)」を全て「https://www~」で統一・リダイレクト

wp-config.phpの編集

手順「2」でダウンロードした最新ファイルを作業用に複製し、修正していきます。

「2」の最新のwp-config.phpファイルの最上部(php ~ /php 内)に下記を追記します。

if( isset($_SERVER[‘HTTP_X_SAKURA_FORWARDED_FOR’]) ) {
$_SERVER[‘HTTPS’] = ‘on’;
$_ENV[‘HTTPS’] = ‘on’;
$_SERVER[‘HTTP_HOST’] = ‘www.brain-solution.net’;
$_SERVER[‘SERVER_NAME’] = ‘www.brain-solution.net’;
$_ENV[‘HTTP_HOST’] = ‘www.brain-solution.net’;
$_ENV[‘SERVER_NAME’] = ‘www.brain-solution.net’;
}

さくらサーバ独特環境用の設定
※ドメインは弊社の例

※まだサーバへアップはしません

.htaccessの編集

手順「2」でダウンロードした最新ファイルを作業用に複製し、修正していきます。

wp用に使用しているhtaccess(無い場合は新規作成)を編集(このサイトの場合は、既存ファイルの最上部へ追記)します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^brain-solution\.net$ [OR,NC]
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://www.brain-solution.net/$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^www\.www\.brain-solution\.net$ [OR,NC]
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://www.brain-solution.net/$1 [R=301,L]
</IfModule>

さくらサーバ独特環境用の設定
※ドメインは弊社の例

※まだサーバへアップはしません

WPの管理画面でURLの設定を変更

WPにログインし、「WordPress アドレス (URL)」と「サイトアドレス (URL)」を下記のよう(例)に変更します。

WordPress アドレス (URL):
http://www.brain-solution.net/wp ⇒変更⇒ https://www.brain-solution.net/wp

サイトアドレス (URL)
http://www.brain-solution.net ⇒変更⇒ https://www.brain-solution.net

※すぐに反映されます

【手順5】修正したファイルをサーバへアップ

アップロードを保留していたファイルをサーバへ反映します。

【手順6】DB(データベース)の修正

次に、DBの中を一括置換します。

「Search Regex」というプラグインもあるようですが、私は「searchreplacedb」というツール(v 2.1.0)を使用しました。
※使用後は必ずファイルを削除してください。

これにより、DB内の「http://www.brain-solution.net(最後はスラ無し)」を「https://www.brain-solution.net(最後はスラ無し)」に一括置換します。

各ツールの使用方法や手順はググってください。すみません。(自己責任でお願いいたします)

※すぐに反映されます

【手順7】表示とリダイレクト確認

これで一旦流れは完了しますが、最後にSSLのエラーが無いか、各ページを確認していきます。
WPだとかなりのページ数がありそうですね。はい。

Chromeのセキュア警告表示

エラーがあるとこんな表示に…(2017年1月時点でのChrome)

SSL切替直後の検索インデックスは、非SSLのままだと思うので、「リダイレクト・SSLへの統一」がきちんと行われているかも確認します。

ちなみに

ソーシャルボタンを使用されていた場合、URLが変更になるのでカウントもリセットされてしまいます。

「SNS Count Cache」というプラグインを使用して、SSL切替前に既存のカウント数をあらかじめキャッシュしておき、切り替え後にそのカウント数を反映する事もできるようです。

詳しくはググってくだs──

手順まとめ

  1. SSL証明書取得
  2. SNSカウントキャッシュ(必要であれば)
  3. 既存のドメイン設定にSSL証明書設置
  4. URL統一用のドメイン設定(手順1)
  5. ファイルとDBのバックアップ(手順2)
  6. ファイル内のパス修正(手順3)
  7. URL統一用のファイルの修正とWPのURL設定変更(手順4)
  8. ファイルをアップロード(手順5)
  9. DB内のサイトURLを一括置換(手順6)
  10. サイトの表示確認(SSLエラーチェック&リダイレクトチェック)・最終修正(手順7)
  11. SNSカウントをSSL用に切替え・反映(必要であれば)

SSL導入サービス

更新をチェック

Facebookでフォローする

関連記事
この記事を書いた人

小崎孝雄 役員 ( 専務取締役 )

腹回りが気になる今日この頃。Web制作全般~Wordpressの構築を中心に奮闘中。
趣味は、音楽鑑賞・ドラム・映画鑑賞・スノーボード・ひとりたび・猫。

小崎孝雄 役員 ( 専務取締役 )

腹回りが気になる今日この頃。Web制作全般~Wordpressの構築を中心に奮闘中。
趣味は、音楽鑑賞・ドラム・映画鑑賞・スノーボード・ひとりたび・猫。

バックナンバー
  
コメント

コメントを残す

更新をチェック

ブレインネットプレス カテゴリー

▲ページTOPへ