はじめに
当記事はさくらサーバーに設置した WordPress サイトの https 化の how to 記事にするつもりでした。しかし途中で大混乱 → まったく余裕がなくなり、最終的にはグダグダな内容になってしまいました。せめて私がつまづいたポイントなど参考になれば幸いです。
ではスタート。
エックスサーバーの SSL 認証無料化に伴い、普段チェックしているブログでも https 化の波が押し寄せてきています。しかしそのほとんどがエックスサーバー。私愛用のさくらサーバーで事例をわかりやすく公開しているサイトが少ない。ということで自分でやってみることにしました。
さくらサーバー上のワードプレスサイトの https 化（SSL 認証）
まずはプランの選択と契約
さくらインターネットでの SSL 認証は下記 4 つのプランに分かれています。当ブログでは別段強固なセキュリティは必要としていませんので、右から 2 つ目の最安の「ラピッド SSL 」で進めます。
「オンラインからお申し込み」をクリックして先に進みます。
ここから先はログインした状態で進みます。
ここで初めてさくらの会員になる人はいないでしょうから、右のメニューから進んでログインします。
さてここから本格的に申し込みとなります。まずはプランの選択から。最初に選択したのはなんだったのよという気もしますが、ここで決定となります。
今回はトライアルということもあるので、「ラピッド SSL 」の 1 年契約を選択しました。1 年で 1,620円 （税込）ですので失敗しても痛くないぜ。
次いで支払い方法を選択します。支払方法はクレジットカード／銀行振込／請求書の3つから選択できます。
私はクレジットカードを選択しました。
チェックを入れるとこのように展開されます。間違いのないようにしっかり確認しながら入力します。
あとは約款の確認を行い、「同意する」にチェックを入れます。
チェックを入れたら「 CSR の入力へ進む」をクリックです。
なお途中に「クーポンコード」の入力欄があります。キャンペーンコード入れたら若干割引になるなどの特典なんでしょうけど、軽く探しても見当たらなかったのでこちらはスルーします。根性で探したいという方はご自由に。
CSR の取得
さて次の画面に遷移すると、「 CSR を貼り付けろ」と指示されます。CSR とはサイトの証明書情報のことですが、もちろんこれまでそんな情報を取得したことはありません。ここで初めて取得することになります。
取得方法はサポートサイトを見れば一目瞭然なので、省略しながら進めます。
この画面は閉じずにそのままの状態にしておき、次はコントロールパネルを操作します。
まずはコントロールパネルへログインして・・・
この画面からサイト独自の CSR を作成します。
ドメイン入力
CSR を取得したいサイトのドメインを入力します。今回は当ブログが対象なので、”pinonon.com” です。なお “www” は入れてません。
会社名、国コード、都道府県、市町村
WHOIS で公開されている情報と同じものを入力します。私の場合は代理公開しているので上記のようになります。自分の情報は下記より参照できます。
正しい情報を入力し終えたら、「 CSR の作成」ボタンをクリックします。
当サイトの CSR ができあがりました。呪文のようです。
できあがった CSR はすぐに使いますので、この画面は閉じずにそのままで。あるいはメモ帳に全文コピーしておきます。
取得した CSR をコピペして終わり
そして先程の画面に戻ります。「 CSR を貼り付けろ」と書かれていた部分に、できたてホヤホヤの CSR を全文コピーして貼り付けます。”BEGIN” から “END” まで全文です。
コピペしたら真ん中の矢印をクリック。すると先程コントロールパネルで入力した情報が表示されます。間違いないことを確認したら、「確認画面へ進む」をクリック。
ついに最終確認画面となります。引き返すならここが最後。
間違いないようなら「この内容で申し込む」をクリック。すると申し込みが完了となります。
登録メールアドレス宛に申込内容の確認メールが届いているので、念のため確認しておきましょう。
認証ファイルのアップロード作業
ここから 10 分 ～ 15 分ほど待つと、さくらから別のメールが配信されます。「 SSL サーバ証明書 認証ファイルのアップロードについて」というタイトルです。
お申込みいただきましたSSLサーバ証明書の申請が完了いたしましたので、お知らせいたします。
（中略）
引き続き、認証局より申請いただいたドメインの使用権の確認がございますので、以下の手順をご確認の上、認証ファイルのアップロードをお願いいたします。
Google のサーチコンソールにサイトを登録する際に、HTML ファイルをサーバにアップして所有権の確認をしますよね。同じような作業となります。
まずはさくらインターネットの会員メニューにログインし、契約情報タブを選択。
そこから「契約サービスの確認」をクリックします。すると下の方にこのようなものが表示されているはずです。さきほど契約したばかりのラピッド SSL です。
現在のステータスはまだ「準備中」となっています。ではこちらを動かしていきましょう。
「サーバ証明書」ボタンをクリックして次に進みます。
「認証ファイル DL 」ボタンをクリックします。すると認証用ファイルがダウンロードされますので、ローカルに保存します。
さて次はこのファイルをサーバーにアップします。アップする場所はメールに記載されています。
- http://<申請時に指定したFQDN(コモンネーム)>/<認証用ファイル>
- https://<申請時に指定したFQDN(コモンネーム)>/<認証用ファイル>
なおアップしても Google のように即時認証とはいきません。のんびりウンコでもしてきましょう。
5分ほど経つとこのようになっています。ようやく SSL が利用可能になりました。
ようやく SSL 利用可能に
さて次は再びコントロールパネルへログインします。ドメイン設定メニューから
今回 https 化するドメインの「変更」をクリックし、ドメイン詳細設定画面に移ります。少しスクロールすると4番に「 SSL の利用をお選びください」という項目があります。
「共有 SSL、SNI SSL を利用しない」にチェックが入っていますので、「 SNI SSL を利用する」に変更チェックを入れます。んでそのまま「送信」ボタンをクリック。
やったね！SSL 欄が新たに表示され、「利用中」と表示されるようになりました。
即時反映されるわけではない = DNS 浸透に時間がかかる
さっそく https://pinonon.com にアクセス！
あれ？（Firefox）
あれ？？（Google Chrome）
全然ダメやんけ！金返せ！
ところが焦っていろいろ調べてみたところ、これは「DNS 浸透」に伴うエラーだそうです。初めて独自ドメインを取った時、勇んでベタ打ちしたらエラーしか表示されなかった経験ないですか？それと同じようなものだそうです。
こればっかりは焦って F5 更新連打してもしょうがない。ここらでご飯でも食べてきましょう。
ここから先で数時間つまづいた
以上、ここまでは順調に進んでいるように見えております。しかし以下、ここから 4 時間程度での私の心の叫びです。
DNS 浸透は時間がかかるのね～？ → 4 時間経ってもエラーってどゆこと？中間証明書ってなんじゃい。
え？秘密鍵？
はぁ、ようやく https で表示されるようになった。
あれ、ちょっと！全然リダイレクトされないんですけど。
なんでトップページ以外は CSS 読み込んでくれないのよ。
あら真っ白！OMG
あーん、「’」が抜けてたー！
なんだよー .htaccess の記述位置かよ。
などなど・・・疲れた。本当に疲れた。
本当は私と同じような、あまり知識のないさくらサーバーユーザーのため、しっかり順を追った形で記事として残しておきたかったのですが。それどころじゃなかったというのが正直なところ。アップアップでしたわ。
とはいえ幸い要所はスクリーンショットを撮っていたので、私が大きくつまづいたポイントをピックアップして追記しておきます。
（追記）つまづきポイント①：証明書の取得すっ飛ばし
https 化は諦めようと思っていたら光明が
本当に訳がわからなくなり、最悪 http に戻すかとも考えていました。そんな時、さくらインターネットから来たメールをふと読み返したところ・・・
お使いの機器へ中間 CA 証明書のインストールが必要となります。
中間証明書？なんか聞いたことあるな。あ、コントロールパネルで CSR を取得するときにそんな文字が見えたような。ここですね。
ということで少し光が見えてきました。
中間証明書の取得とインストール
メール記載の URL から、指示通りに中間 CA 証明書を取得します。特に作業は必要なく、アクセスすればこのようにすでに証明書が発行された状態になっているはずです。
長ったらしい証明書部分をすべて選択して、メモ帳にでもコピーしておきます。この画面はこれにて終了。
次にコントロールパネルにログインしてドメイン設定へ。
該当するドメイン名から SSL 証明書の「更新」を選択します。すると「CSR の表示」画面に移りますので、そこで「中間証明書のインストール」をクリック。
次の画面で、先ほどコピーしておいた中間証明書を全文貼り付けます。”BEGIN” から “END” まで全部です。
そしたら送信。
秘密鍵の作成
ここまで来たら最後の証明書インストールなのですが、その前に「秘密鍵」なるものを作っておく必要があります。
もしかしたら「作成」ボタンはなく、「バックアップ」ボタンしかないかもしれません（スクショ撮るの忘れちゃいました）。いずれにせよ、秘密鍵なるものを作成する必要があります。
指示通りに進むと最終的にはこのような画面になるはずです。任意のパスワードを入力して秘密鍵を作成・バックアップを取ります。
証明書インストールと有効化で完了
ここまで来ればもう終わったも同然。「証明書のインストール」を行います。スクショはないですが特に迷うことはなかったと思います。
証明書のインストールが終わると最後の確認画面に遷移します。すべて確認し、問題がなければ「新しい設定を有効化する」をクリックします。
できた。泣いた。ようやくさくらサーバーでの独自 SSL の使用が可能になりました。
やったねー。
つまづきポイント②：トップページ以外に CSS が反映されない
この後はプラグイン “Search Regex” を使ってサイト内の URL を一斉置換。各 php ファイルについても念のためひとつひとつ確認。よし完成！
しかしこの後なにげなく個別記事をクリックすると・・・あら？あらら？デザイン崩れまくり。そう、どうやら CSS が反映されていないようです。ノーウ。
いったん飛ばします。
つまづきポイント③：トップページ以外 http のまま
こちらは想定内で、”.htaccess” ファイルにリダイレクト設定の記述を追記すれば終わりと思っていました。しかし何も起きない状態となり、またつまづきました。
結論としては「記述位置を間違えていた」ことが原因でした orz リダイレクトに関する記述は「先頭に追加」する必要があったのですが、うっかり2段目に記載してしまっていたのです。凡ミス。
またさくらサーバー固有の問題もあり、”.htaccess” ファイルの設定変更だけではダメなようです。勝手に元の http ファイルを読みに行ってしまうんだとか。なので “wp-config.php” にも追記をする必要があります。
最終的には下記文言を追記することですべてがうまく表示されるようになりました。
.htaccess の先頭に追記
|
|
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$ RewriteRule ^(.*)$ https://pinonon.com/$1 [R=301,L] </IfModule> |
https://pinonon.com 部分は当サイトの例ですのでご注意。
wp-config.php の先頭にも追記
|
|
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) { $_SERVER['HTTPS'] = 'on'; $_ENV['HTTPS'] = 'on'; $_SERVER['HTTP_HOST'] = 'pinonon.com'; $_SERVER['SERVER_NAME'] = 'pinonon.com'; $_ENV['HTTP_HOST'] = 'pinonon.com'; $_ENV['SERVER_NAME'] = 'pinonon.com'; } |
pinonon.com 部分は当サイトの例です。
参考にさせていただいたサイト
以下、今回の https 化で特に参考にさせていただいたサイトを順にご紹介。本当にありがとうございました。皆さんがいなければ心ポッキリでしたわ。
流れとテクニカルな部分は、下記の2つのサイトに大きく助けられました。
また全体のメンテナンスについては定番のエローラさんのとこで確認。
なお冷静に振り返ると、さくらのサポートサイトにもずいぶん助けられました。さすが公式。おかげさまで、今後手持ちの別サイトを https 化するときは、ひとりでできると思います。
あー疲れた！
では再見。
