< pocket

さくらのサーバーでWordPressをSSL(https://)対応した時の手順10

さくらのサーバーでWordPressをSSL(https://)対応した時の手順10

先日、重い腰を上げてついにサイトをSSL(https:// )に対応しました。やってみれば一つ一つの作業は難しくないのですが手順がなかなか複雑だったので、今回は備忘録として一連の流れや注意点を書き残しておこうと思います。

※ちなみに、今回はさくらインターネットのサーバー(スタンダードプラン)で「ラピッドSSL」を設定した時の流れです。他のサーバーではこの手順は当てはまりません。

もくじ

  1. CSRの作成
  2. SSLの申し込み
  3. 認証ファイルをダウンロード&fileauth.txtとしてアップロード
  4. 中間CA証明書をインストール
  5. 証明書をインストール
  6. SSL設定を有効にする
  7. サイトが「https://」でも表示できるか確認
  8. さくらの「常時SSL化プラグイン」を有効化
  9. SSLエラー対応
  10. SSL対応したらやっておきたいその他の作業

今年10月からChromeでHTTP ページのフォームに「保護されていません」という警告が表示される

8月中旬に、Search Consoleから「Chrome のセキュリティ警告を示します」という件名のメールが届きました。

どうやら、今年10月からChrome(バージョン 62)でテキストフォームに入力すると、「保護されていません」という警告が表示されてしまうとのことです。

Search Consoleからのメール

「テキストフォーム」とは、ブログでいうところの「お問い合わせ」や「コメント」、「サイト内検索」にあたるフォームが該当します。

さらに、メールには「長期的には、HTTP で配信されるすべてのページを『保護されていません』と明示することを計画しており、この新しい警告はその一環です。」とあるので、サイトをSSL(https:// )対応することは避けられない流れです。

というわけで、10月を目前に、今まで先延ばしにしていたSSL(https:// )対応を実行することにしました。

1.CSRの作成

まずは、コントロールパネルから「公開鍵」と「秘密鍵」を作成し、それを元に「CSR」の作成を行います。

「CSR」とはサーバー証明書を発行するために必要なもので、それは「公開鍵」と「秘密鍵」というふたつの情報をもとに作成されます。詳しくはさくらのサポート情報局の情報を引用します。

CSR(Certificate Signing Request)とは、SSLサーバ証明書を発行するための証明書署名要求のことです。
CSRには公開鍵の情報と、組織名や所在地等の情報(Distinguished Name=識別名)が含まれており、認証局は提出されたCSRにサーバ認証機関の署名を行い、サーバ証明書として発行します。

CSRの作成 – さくらのサポート情報

というわけで、まずはさくらのサーバコントロールパネルへログインしましょう。

コントロールパネルのサイドバー(下のほう)にある「ドメイン設定」をクリックすると、自分の管理しているドメイン一覧が表示されます。SSL対応したいドメインの証明書欄の「登録」をクリックします。

サーバコントロールパネル(さくらサーバー)

「秘密鍵を生成する」をクリック。

CSRの作成(さくらサーバー)

ここで、証明書認証局へ申請する情報を入力します。入力する項目は「ドメイン」「会社名」「 国コード」「都道府県」「 市町村」の5つです。ちなみに、「会社名」の部分はブログ名で構わないようです。

入力できたら「CSRの作成」をクリック。

CSRの作成(さくらサーバー)

すると、作成したCSRが表示されるので、ここでテキストエリア内のCSRをコピーし、テキストエディタに貼り付けておきましょう。

そして、「ラピッドSSL(有料サービス)のお申し込みへ進む」ボタンをクリック。

CSRの作成(さくらサーバー)

「サーバー証明書のお申し込み」をクリック。

CSRの作成(さくらサーバー)

2.SSLの申し込み

オンラインサインアップ」のページにログインしましょう。

ログインすると、申し込み画面が表示されるので、ここで「新規取得」を選択し、プランを選びます。私は「ラピッドSSL」を選びました。

SSLの申し込み(さくらサーバー)

支払い情報などを入力し、約款に同意すると、「CSR(証明書情報)の内容確認」ページに遷移するので、ここで先程コピーしておいたCSRをペーストし、「→」をクリックします。

CSRの情報が表示されるので、正しいことを確認して申し込み内容を確認しましょう。

SSLの申し込み(さくらサーバー)

申し込みが完了すると以下の画面が表示され、「お申込受付完了のお知らせ」というメールが届きます。これでサーバー証明書の申し込みができました。

SSLの申し込み(さくらサーバー)

3.認証ファイルをダウンロード&fileauth.txtとしてアップロード

申し込みをしてから少し待つと「SSLサーバ証明書 認証ファイルのアップロードについて」というメールが届くと思います。だいたい数十分など時間は人によってマチマチらしいのですが、私は2時間ほどかかりました。

メールが届いたら、会員メニューにログインしましょう。

グローバルナビの「契約情報」をクリックし、「契約サービスの確認」を選択すると、自分が契約しているサービスの一覧が表示されます。

認証ファイルをダウンロード&fileauth.txtとしてアップロード(さくらサーバー)

契約しているSSLサービスの右側にある「サーバ証明書」をクリック。

認証ファイルをダウンロード&fileauth.txtとしてアップロード(さくらサーバー)

「認証ファイルDL」をクリックし、認証ファイル(fileauth.txt)をダウンロードし、どこかに保存しましょう。

認証ファイルをダウンロード&fileauth.txtとしてアップロード(さくらサーバー)

保存した認証ファイルを、以下の場所にアップロードします。

認証ファイルのアップロード先

http://申請したFQDN/.well-known/pki-validation/fileauth.txt
または
https://申請したFQDN/.well-known/pki-validation/fileauth.txt

【ラピッドSSL】オンラインサインアップからの申込手順 – さくらのサポート情報

「/.well-known/pki-validation/」のフォルダは自分で作ります。
つまり、FTPソフトなどを使って初期フォルダ(/home/アカウント名/www)に「.well-known」というフォルダを作成し、その中に「pki-validation」というフォルダを作成し、その中にfileauth.txtをアップロードするということですね。

FTPの詳しい設定や構造は以下のページをご参照ください。
ホームページの公開 – さくらのサポート情報

ちなみに、この認証ファイルは30日以内にアップロードしなければならないので、この作業は早めにやってしまいましょう!

4.中間CA証明書をインストール

認証ファイルをアップロードすると、今度は「ジオトラスト SSLサーバ証明書発行のお知らせ」というメールが届きます。ちゃんとできたかヒヤヒヤしましたが、今回は30分ほどでメールが到着しました。

メールが届いたら、メールに記載されている内容に従って認証局のサイトから中間CA証明書をコピーし、エディタに貼り付けて任意のファイル名で保存してください。

※SSLのプランが「ジオトラスト ラピッドSSL」の場合、コピー元URLは以下となります。
中間CA証明書(ラピッドSSL用)ダウンロード(SHA-2)|SSLサーバ証明書 ジオトラスト

中間CA証明書が用意できたら、サーバコントロールパネルへログインしましょう。「ドメイン設定」をクリックし、インストールするドメイン名の右側にある「登録」をクリックします。

サーバコントロールパネル(さくらサーバー)

「中間証明書のインストール」をクリック。

中間CA証明書をインストール(さくらサーバー)

先ほどエディタで保存しておいた中間CA証明書をペーストし、「送信」をクリックします。これで中間CA証明書のインストールが完了。

中間CA証明書をインストール(さくらサーバー)

5.証明書をインストール

中間CA証明書のインストールが終わったら、次はSSLサーバ証明書です。

会員メニューにログインし、認証ファイルをダウンロードした時と同じ手順で「契約情報」→「契約サービスの確認」と進みます。契約しているSSLサービスの右側にある「サーバ証明書」をクリック。

証明書をインストール(さくらサーバー)

「サーバ証明書DL」をクリックし、SSLサーバ証明書 (.crt)をダウンロードしましょう。

証明書をインストール(さくらサーバー)

SSLサーバ証明書が用意できたら、再びサーバコントロールパネルへログイン。「ドメイン設定」→「登録」をクリックします。

サーバコントロールパネル(さくらサーバー)

「 証明書のインストール」をクリック。

証明書をインストール(さくらサーバー)

ダウンロードしたSSLサーバ証明書 (.crt)をテキストエディタで開き、コピーしてテキストエリアに貼り付け、「送信」をクリック。

証明書をインストール(さくらサーバー)

インストールが完了すると、「SNISSLが利用可能です」と表示されるので、「ドメイン設定」からSSL設定を有効にしましょう。

証明書をインストール(さくらサーバー)

6.SSL設定を有効にする

サーバコントロールパネルで、「ドメイン設定」→「変更」をクリックします。先ほどの流れからたどり着いた場合はそのままで。

SSL設定を有効にする(さくらサーバー)

ここは利用しているプランやSSLの種別によって選択項目が違うらしいので、詳しくはサポートページを参照してください。
【ラピッドSSL】オンラインサインアップからの申込手順 – さくらのサポート情報

さくらのレンタルサーバ スタンダード・プレミアム・ビジネスの場合は「SNI SSLを利用する」を選択し「送信」をクリック。

SSL設定を有効にする(さくらサーバー)

「ドメイン詳細設定 – 完了」と表示されます。これで、SSLの設定が終わりました!

SSL設定を有効にする(さくらサーバー)

7.サイトが「https://」でも表示できるか確認

さっそく自分のサイトが「https://」で見れるかどうか確認してみましょう!どうやら、トップページは問題ないようです。

サイトが「https://」でも表示できるか確認

サイトが「https://」でも表示できるか確認

ですが、下層ページのスタイルシートが外れて表示が崩れていることが判明!ここから、Wordpressの細かい設定をしていきましょう。

サイトが「https://」でも表示できるか確認

8.さくらの「常時SSL化プラグイン」を有効化

SSL対応した直後は、先ほどの下層ページのcssが外れて表示が崩れる以外にも様々な事象が起きます。

いずれも、慌てず「.htaccess」を修正したり管理画面からひとつずつ設定していけば解決できますが、さくらのレンタルサーバでWordpressのSSL対応をするなら、さくらの「常時SSL化プラグイン」をインストールする方法が簡単です。

※こちらはさくらのレンタルサーバ、マネージドサーバ上でのみ動作するもので、さくらのVPS、クラウド、他社レンタルサーバでの動作はしません。

まず、WordPressの管理画面へログイン後、「プラグイン」→「新規追加」を選択し、キーワード検索に「さくらのレンタルサーバ 簡単SSL化プラグイン」と入力しましょう。

「SAKURA RS WP SSL」が表示されたら、有効化します。

さくらの常時SSL化プラグインを有効化

SSL対応の設定は以下の3つの項目にチェックするだけです。これだけで、以下のようなSSL対応に必要な面倒な作業を全てプラグインが行ってくれます!

  • .htaccessを編集し、httpでのリクエストをすべてhttpsにリダイレクトする
  • WordPressのサイト設定を変更し、管理画面のサイトのURLをhttpsに切り替える
  • 投稿内の画像URLや投稿URLをhttpsに置換してくれる

有効化すると、いったん管理画面からログアウトされますが、再度ログインし、サイトを表示すると、https:// でもきちんとサイトが表示されているはずです。

SSLの種類などによってチェック項目が違うこともあるため、プラグインの詳しい説明や使い方はこちらからどうぞ。
【WordPress】常時SSL化プラグインの使い方 – さくらのサポート情報

常時SSL化プラグインの注意点

とっても便利なさくらの常時SSL化プラグインですが、いくつか注意点があります。

PHPのバージョンが古いとプラグインが有効化できない

さくらの常時SSL化プラグインを有効化する際に以下のような画面になったら、使っているPHPバージョンが古い可能性があります。コントロールパネルからPHPのバージョンを新しいものに切り替えましょう。

さくらの常時SSL化プラグインのエラー

サーバコントロールパネルで、「アプリケーション設定」から「PHPのバージョン選択」をクリックすると、現在使っているPHPのバージョンが表示されます。

常時SSL化プラグインはPHPバージョン5.6、7.1で動作するので、該当するバージョンを選択しましょう。よくわからない場合は、「(推奨)」と記載されてあるバージョンを選択するのが確実でしょう。

※ただし、この作業を行うと、他の部分に影響を及ぼす可能性があるので、十分注意して行ってください。

PHPのバージョン切り替え(さくらサーバー)

「変更」をクリック後、バージョンが切り替われば完了です。

PHPのバージョン切り替え(さくらサーバー)

PHPのバージョン切り替え後、プラグインがちゃんと有効化できたらOKです。サイトの表示や、他のプラグインなどに影響や異常がないかもチェックしましょう!

さくらの常時SSL化プラグインを有効化

プラグインをいったん停止すると設定が初期化される

常時SSL化プラグインを停止すると、設定がすべて初期化されてしまいます。そのため、有効化するだけでなく、再度プラグインの設定をし直さなければなりません。

3つの項目にチェックを入れるだけなのでそこまでの手間ではありませんが、Wordpressの更新時などに少し面倒かもしれませんね。

その他のトラブルについては以下のページに詳しく記載されています。
【WordPress】常時SSL化プラグイン トラブルシューティング – さくらのサポート情報

9. SSLエラー対応

URLバーの表示が以下のようにグレーの文字だった場合は、何かしらのエラーが出ています。落ち着いてひとつひとつの原因を探っていきましょう。

SSLエラー対応

エラーはChromeのデベロッパーツールを開き、「Console」タブで確認するとエラーの一覧が見れて便利ですよ。

SSLエラー対応(Chromeデベロッパーツール)

左側に鍵マークがつき、緑色の文字で「保護された通信」と表示されれば、SSLのエラーは出ていない証拠です。

SSLエラー対応

10.SSL対応したらやっておきたいその他の作業

サイトがSSL対応できてひと安心…と思いきや、それだけではないんです。Google系のサービスの設定変更も一緒に済ませてしまいましょう。

Google Search Consoleの設定

「https://」のプロパティを追加

Search Consoleに現在登録されているのはSSL対応する前のURLなので、新規に「https://」のプロパティを追加する必要があります。

Search Consoleにログインし、「プロパティを追加」をクリックします。

SSL(https:// )対応後のGoogle Search Consoleの設定

「https:// 」から始まるURLを入力し、追加をクリック。

すると、「(サイトURL)の所有権を確認します。」という画面が表示されます。画面内の指示通りにHTML確認ファイルをサーバーにアップロードし、「私はロボットではありません」にチェックして「確認」をクリック。

SSL(https:// )対応後のGoogle Search Consoleの設定

「(サイトURL)の所有権が確認されました。」と表示されればOKです。

SSL(https:// )対応後のGoogle Search Consoleの設定

XML サイトマップを送信

新規にプロパティを追加しただけでは検索エンジンにサイトがインデックスされないので、XMLサイトマップを送信しましょう。

サイドバーの「クロール」から「サイトマップ」をクリック。

画面右上の「サイトマップの追加/テスト」をクリックすると、入力欄が表示されるので、サイトマップのファイル名(sitemap.xml )を入力して「送信」。

SSL(https:// )対応後のGoogle Search Consoleの設定

「アイテムを送信しました。」とメッセージが出ればOKです。「ページを更新する。」をクリックすると、今回登録したサイトマップが表示されますよ。

SSL(https:// )対応後のGoogle Search Consoleの設定

「 Fetch as Google 」でクロールを依頼

サイトマップの送信までで一通りの作業は完了ですが、なるべく早くクローラーにインデックスしてほしい場合は、 「 Fetch as Google 」を使いましょう。

サイドバーの「クロール」から「 Fetch as Google 」をクリック。

SSL(https:// )対応後のGoogle Search Consoleの設定

クロールを依頼したいプロパティの URL をクリックし、PCを選択した状態で「取得」をクリックします。テキストボックスには何も入れずOKです。

SSL(https:// )対応後のGoogle Search Consoleの設定

下部に結果一覧が表示されるので、「インデックス登録をリクエスト」をクリックします。ステータスが「完了」になれば、PC版のクロールの依頼が完了です。

SSL(https:// )対応後のGoogle Search Consoleの設定

モバイル版もある場合は、「PC」を「モバイル:スマートフォン」にして先ほどの要領で「取得」をクリックすればOKです。

この時、私の場合はモバイル版についてはステータスが「一時的にアクセスできません」となり、若干焦りましたが、おそらくプロパティを追加したばかりだったので色々とまだ準備ができてなかったのかもしれません。

そのまま放っておいても数日経ったらインデックスが開始されるようになったらしいので、問題なかったのだと思います。

Google Analyticsの設定

Analyticsは再度プロパティを追加する必要はありませんが、設定からURLを「http:// 」から「https:// 」に変更する必要があります。

まず、左下の歯車アイコンをクリックして設定画面を開き、「プロパティ設定」をクリックしましょう。

SSL(https:// )対応後のGoogle Analyticsの設定

「 デフォルトのURL 」を「 https:// 」に変更し、「保存」をクリック。

SSL(https:// )対応後のGoogle Analyticsの設定

同じ要領で、設定画面の一覧ページに戻り、今度は「ビュー設定」をクリック。

SSL(https:// )対応後のGoogle Analyticsの設定

「ウェブサイトの URL 」を「 https:// 」に変更し、「保存」をクリック。これで、Analyticsの設定は完了です。簡単ですね!

SSL(https:// )対応後のGoogle Analyticsの設定

Google Search ConsoleとGoogle Analyticsの関連付け

必須というわけではないけれど、忘れがちなのはこの作業ではないでしょうか。Analyticsで検索クエリなどのデータを見たい時は、「Search Console」と連携している必要があります。

管理画面から「プロパティ設定」を開き、下のほうにある「Search Consoleを調整」をクリック。

Google Search ConsoleとGoogle Analyticsの関連付け

すでにSearch Consoleと関連付けされている場合は、URLが記載されているので、その右側の「編集」をクリックします。

Google Search ConsoleとGoogle Analyticsの関連付け

Search Consoleのページに飛ぶので、「リンクされているサイト:(URL)」の横の「削除」をクリックし、関連付けを解除します。

Google Search ConsoleとGoogle Analyticsの関連付け

その後、Analyticsの管理画面に戻り、「Search Console の設定」からもう一度「編集」をクリックすると、再びSearch Consoleのページに飛びます。

今度は「https://」のURLが選べるようになっているので、ラジオボタンにチェックをつけた後「保存」をクリックします。

Google Search ConsoleとGoogle Analyticsの関連付け

これで、AnalyticsとSearch Console関連付けできるようになりました!

さいごに

SSL(https://)対応は緊張して精神力を使った面もあり、個人的には「かなり面倒だった」というのが正直な感想ですが、一度やってしまえば「保護された通信」と出るので安心感があるし、何より気が楽です。はてブなどのシェア数が消えてしまうのは少し寂しかったですけどね。

まだ中にはエラーが残っているページもあると思いますが、徐々に対応していこうと思っています。

最後になりましたが、SSL対応をしたことで、ブログのURLが「https://designcolor-web.com/」になったので、お気に入りやブックマークなどに登録していただいている方がいたら、変更していただければと思います。また、何か不具合等があった場合は教えていただけると助かります!

以上、彩でした!

この記事をシェアする!

コメント

0件のコメント

コメント

もし何かコメントをいただければ幸いです。また、ご指摘等も大歓迎です。
よろしくお願いします。(※Eメールアドレスは公開されません)

トラックバック

トップに戻る