無料SSL Let's EncryptでWordPressサイトをSSL化する

lets encrypt logo

はじめに

Google ChromeがSSL(https://<ドイメイン名>)に対応していないサイトを表示するときに、アドレスバーの左横に「保護されていない通信」などというように注釈が付くようになってしまいました。個人の趣味のブログなどならいず知らず、会社のホームページなどでこれが出るのはちょっといい気分ではないですね。そこで、今回は、Cent OS 7 - Apache 2.4 - WordPress - Cocoon  の環境でバーチャルホストによって複数のドメインを管理しているサーバで、特定のサイトのみをSSL化する手順を公開します。

no ssl site address-bar

準備

サーバー側

今回は、サーバは CentOS 7で、Apache 2.4 を使っています。ですので、当然のことながら、Apacheの設定を変更する必要があるので、SSHクライアントなどを使ってサーバにシェルアクセスできることが前提となります。筆者はputtyを使ってサーバにログインしています。

クライアント側

パソコン側では、最低限WordPressを管理できるウェブブラウザとSSHなどでサーバへシェルアクセスできるputtyなどを用意します。

Let's Encrypt

Let's Encryptはユーザー登録などはなにも必要ありませんが、念の為、Let's Encryptのホームページを示しておきます。
https://letsencrypt.org/ja/

SSL導入手順

0.EPELを導入しておく

EPELが入っていない環境でcertbotを使うと、以下のようなエラーメッセージが出ます。

これを防ぐためには yum の epelパッケージを有効にする必要があります。

1.certbotをインストールする

certbotというコマンドを導入します。これでLet's EncryptのSSLを構築します。

2.HTTPS用のポートを開放する

次に、ファイヤーウォールのHTTPSのポート(443)を開放します。このやり方にはいくつかありますが、以下のようになっていればOKです。

具体的なポート開放のやりかたは、ここを参照してください。

3.certbotを使ってssl証明書を導入する

次は、いよいよcertbotコマンドを使って、SSL証明書を導入します。コマンドの書式は以下のような感じです。

certbot certonly --webroot -w <ドキュメントルート> -m <メールアドレス> -d <ドメイン名>

筆者のサイト「www.spankyjpn.com」でのコマンドは以下のような感じになりました。

4.httpd.confの編集

certbotコマンドが成功すると、/etc/letsencrypt/live/ の下に、ドメイン名のフォルダが出来て、その中に必要な証明書のファイルが作成されます。この情報をapacheのhttpd.confに設定します。
まずは、/etc/httpd/conf/httpd.conf の中のオリジナルのVirtualHost *:80の設定を全部コピペしておきます。
そしてVirtualHost *:443のエントリを作成します。

オリジナルの<VirtualHost *:80>との違いは、

  • 1行目
    VirtualHostの80が443になる。
  • 3行目
    ポート番号が443になる
  • 5・6行目
    ログを出力ファイルをssl用に分ける。オリジナルのほうのログファイル名の末尾に「-ssl」を付けただけです。
  • 14~20行目まで
    ssl用に新しく追加した行です。17・18・19・20行はおまじないのようなものなので、そのままコピーして使ってください。
  • 14・15・16行目
    SSLの設定ファイルを設定する。www.spankyjpn.comをご自分のドメイン名に変更するだけです。

5.apache を再起動する

Webサーバを再起動します。
まずは設定ファイルの整合性を確かめます。

問題なければ、次に、apacheを再起動します。

動作テスト

ブラウザで、ドメイン名の先頭に「https://」を付けて、サイトを開いて見て下さい。wordpressのサイトの場合、まだ完全にSSL化されてアドレスバーの左横に鍵のマークが出ないと思います。今は未だWebサーバが起動しないとか、SSLが全然できていないなど致命的な不具合が無いことを確認できて目的のサイトがまずはhttpsで表示されればOKです。アドレスの横に鍵マークが付かない件に対応するには、後述の「WordPress更改手順」を参照してください。

SSL証明書の自動更新

有効期限の確認

certbot で作った証明書の期限は「certbot renew」コマンドで簡単に確認できます。このコマンドを投入すると、以下のような表示が出ます。下記の例では、www.spankyjpn.comの証明書は2020年の1月13日まで有効ということになります。期限の30日前から更新ができるようで、この30日の期間内に「certbot renew」コマンドを投入すると、証明書が更新されます。

自動更新の設定

さて、ここまでくればサーバ側のシェルでの作業はほぼ終わりです。注意しなければならないのは、Let's EncryptのSSL証明書は90日間の有効期限だということです。90日間というのは微妙な期間で、結構更新作業を忘れます・・・。そこで、crontabにジョブを設定して、SSLの証明書を自動的に更新するように設定して、更新忘れをなくします。
 設定自体は、crontabコマンドで行います。「crontab -e」でエディタを起動します。作業はルートユーザーで行います。

WordPress更改手順

基本の設定

WordPressでテンプレートにcocoonを使っている環境を例に設定を行っていきます。まずは、WordPressの管理画面にログインしてください。次に、「設定」⇨「一般」と選択します。この画面にある「WordPressアドレス(URL)」と、「サイトアドレス(URL)」の「http://」を「https://」に変更します。

wordpress setting screen

自分で埋め込んだ画像ファイルなどのURLの変更

よく忘れがちなのは、メニューウイジェットなどへ自分で埋め込んだ画像のURLがhttp://のままになっていたりすると、ブラウザのアドレス欄に鍵マークが付きませんので、忘れずに更新してください。

メディア内の画像のURLを変更

メディアとして埋め込まれている画像のURLをすべて変更します。手作業だとかなり大変なので、ここれは便利なプラグインを紹介します。
「プラグイン」⇨「新規追加」と選択して、「プラグインの検索」に、「Search Regex」と入力して下さい。すると、以下のようなプラグインが見つかるはずですので、インストール⇨有効化してください。

search regex

プラグインがインストールできたら、「ツール」⇨「Search Regex」と選択して、Search Regexの画面を開いてください。画面内の「Search Pattern」に、「http://」と入れて、「Search」ボタンを押下します。すると、http://を使っているURLがたくさん表示されると思います。ここで確認して大丈夫そうであれば、「Replace pattern」に「https://」(⇐必ずhttpsを使う)もしくは「//」(httpでアクセスされたらhttpを、httpsでアクセスされたらhttpsを使う)を入力して、「Replace&Save」ボタンを押下します。

search regex main screen

Cocoonの設定変更

Cocoonには、2箇所ほど画像が勝手に埋め込まれてしまう部分がありますので、これも変更しておきます。
まず1つ目は、「Cocoon設定」⇨「OGP」の中にある「ホームイメージ」というものです。この項目の「画像のアップロード」というところの「http://」を変えて下さい。一度画像を保存してメディアにアップロードしてから再度画像を選択し直すとhttpsになります。

cocoonのもう1つの埋め込み画像ですが、これは「AMP」という設定項目のなかにあります。「AMPロゴ」という部分のURLをhttpsに変更します。これも前述のOGPと同じで、すでに表示されている画像を保存してメディアにアップロードし、そのメディアの画像を選択すればhttpsになります。

最後に

GoogleがSSLに対応していないサイトのスコアを下げてから、うちもSSLを導入しないといけないと思いつつ、いろいろなサイトでSSL証明書の値段を見てはため息をついていましたが、あるマーケティングの講習会でLet's Encryptの存在を知り、早速試したところ、いとも簡単に無料でSSL証明書が発行できてしまって感動したので、その情熱が冷めないうちにブログにまとめました。多分、自動更新のタイミングになった際に、crontabの設定情報を再度ブラシアップしなければならないかもしれませんので、そのときはまたこの記事をアップデートしたいと思います。

このカテゴリのページリンク