情弱のぼくがブログのSSL(https)化でつまずいたこと・解決策まとめ


Ads by Google

どうも、元国家公務員・ニートブロガーの kobo です。

本日 kobo blog の SSL(https)化の作業を行い、5時間の格闘ののち無事完了しました。死ぬほど疲れました。ぼくはプログラミング知識皆無なので、わけもわからずコードを切り貼りしまくっていました。正直めちゃめちゃ遠回りしたと思います(笑)

難航した理由としては、ググってもググってもこなれた解説しか出てこないことが挙げられます。ネット上で情報提供をしているブロガー(プログラマー)は「基本」が分かっているから、説明を省きまくりなんです。すごく不親切。ぼくなんかは右も左もわからないから「コードを追記して」とか言われても、どこにペーストして良いのかもわからない。説明文を読むための説明文が欲しいと強く感じたわけです。。

だから、この記事ではぼくと同様「何を言っているのかちんぷんかんぷん」と絶望している超初心者のために、ぼくがつまずいたポイントと解決策をまとめておきます(自分の備忘録にもなりますし)。

 

この記事を書いている人
相原 ユーキ| TABI LABO編集・ライター。 前職は国家公務員。 大学ではAUSで1年間留学。 TOEIC985、英検1級、簿記2級、国家総合職合格。

 

 

SSL(https)化のメリット

  1. セキュリティ強化
  2. google 検索における検索順位の上昇(SEO強化)
  3. web サイトの高速化

① セキュリティ強化に関して:https://www.symantec.com/ja/jp/ssl-certificates/

② SEO 強化に関して:https://webmaster-ja.googleblog.com/2014/08/https-as-ranking-signal.html

③ Web サイトの高速化に関して:https://hyper-text.org/archives/2015/01/full_time_ssl_site_speed.shtml

 

 

ぼくの環境はこんな感じです

  • ブログサービス:wordpress
  • レンタルサーバー:さくらサーバー(スタンダードプラン)
  • URL:www なし

 

 

 

この通りに進めれば猿でもできます

  1. 証明書の取得関係
  2. ブログ(wordpress)側の設定
  3. さくらサーバー上で行う設定

 

01. 証明書の取得関係

基本的には以下のリンク先サイトの説明に従えばオーケー。

https://help.sakura.ad.jp/hc/ja/articles/206054802–独自SSL-導入の流れ-設定手順

https://help.sakura.ad.jp/hc/ja/articles/206056822–ラピッドSSL-サーバコントロールパネルからの申込み-導入手順

 

さくらサーバーのコントールパネル上から『 ラピッドSSL(有料サービス)のお申し込みへ進む 』をクリックして契約するといいですよ。後に発行される「サーバー証明書」を、さくらサーバー上に自動的にインストールしてくれるからひと手間省けます。

 

 

 

 

02. ブログ(wordpress)側の設定

  1. バックアップ
  2. 内部リンクの一斉https化
  3. サイトアドレスのhttps化

 

基本的にはこのブログ記事に従えばオーケー:http://nelog.jp/wordpress-ssl

 

 

03. さくらサーバー上で行う設定

  1. .htaccessファイルの編集
  2. wp-config.phpファイルの編集

 

ここが一番大変でした。 親切に説明してくれているサイトが非常に少なかったので。


Ads by Google

① .htaccessファイルの編集

301リダイレクトという作業を行います。簡単に言うと、http:// へのアクセスをすべて https:// へ流すための設定です。これが厄介で、ぼくは4時間ぐらいかかりました(笑)

301リダイレクトの方法じたい、ググったらたくさん出てきますが、さくらサーバー(スタンダードプラン)を契約していたぼくは何度やってもエラーが出てしまいました。「多くのリダイヤルが発生しています」みたいなエラーメッセージが出るんですよね。

こんな状況を解決してくれたサイトを紹介します。

SSL強制による無限リダイレクトが発生した場合の対処法

 

以下、この手順において重要な部分を補足しながら紹介します。

さくらサーバーのファイルマネージャーから、.htaccess というファイルを頑張って探しましょう。一番上の階層の「wp」というフォルダの中に入っていると思います。

で、これを編集するのですが、一応バックアップを取っておきましょう。ダウンロードしてデスクトップにでも置いておくといいです。

さて、早速 .htaccess にコードを打ち込んでいきます。ちなみにぼくは、さくらのファイルマネージャー上で .htaccess を右クリック > 編集 して、ブラウザ上で編集しました。

RewriteEngine On
RewriteCond %{ENV:HTTPS} !^on$
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteCond %{REMOTE_ADDR} !=サーバーのIPアドレス
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

この5行のコードを、真ん中より少し下にある「# BEGIN WordPress」の直前にペーストしましょう。

4行目のお尻には、あなたのサーバーのIPアドレスをそのまま貼り付けてください。IPアドレスは、

さくらサーバーのコントロールパネル > サーバー情報の表示 > サーバに関する情報

で調べられます。「IPアドレス」欄の上段の数字(11桁)です。

 

ペーストしたら、保存をクリック。自分のウェブサイトを覗いてみてください。トップページはきちんと表示されましたか?エラーメッセージが表示されなければ大丈夫です。

 

② wp-config.phpファイルの編集

「よしできた!」と思って記事ページを開いてみると、css記述が崩れていたりしませんか?ぼくの場合サイトロゴが超巨大に拡大されていて、レイアウトもめちゃくちゃでした。

どうやら、.htaccess ファイル上での 301リダイレクト設定は、トップページには反映されるけど個別の記事ページには反映されないようです。

ここで見つけたのがこのサイト。

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

 

先ほど同様、補足していきます。

まずはさくらサーバーのファイルマネージャーから wp-config.php というファイルを探しましょう。さきほどの .htaccess と同様「wp」フォルダに入っているはずです。

このファイルに、以下のコードをペーストします。

if( isset($_SERVER[‘HTTP_X_SAKURA_FORWARDED_FOR’]) ) {
$_SERVER[‘HTTPS’] = ‘on’;
$_ENV[‘HTTPS’] = ‘on’;
$_SERVER[‘HTTP_HOST’] = ‘●●●’;
$_SERVER[‘SERVER_NAME’] = ‘●●●’;
$_ENV[‘HTTP_HOST’] = ‘●●●’;
$_ENV[‘SERVER_NAME’] = ‘●●●’;
}

 

●●● は、自分のサイトURLの「ダブルスラッシュの後から最後までの部分」です(https://●●●/)。

ぼくの場合 https://koboblog.net なので、koboblog.net と記述します。

4行とも同様に。

 

挿入箇所は、「// ** MySQL 設定 – こちらの情報はホスティング先から入手してください。 ** //」という記述の直前

こちらも保存して終了。記事ページがきちんと表示されていますか?

 

 

さいごに

ぼくはこんな感じで一通り完了しました。この記事がきっかけでトラブル(こう着状態)が解決すれば幸いです。

バックアップは必ず行ってください。

 

当記事の指示通りコードの書き換え等を行った際に生じたいかなる不具合に関しても、当サイトでは責任を負いかねるのでご了承ください。

 


Ads by Google