エックスサーバーのSSL化全手順 - Webエンジニアポータル

過去の取引を振り返っても、圧倒的に利用者の多いエックスサーバーのSSL化について、わずか4ステップで常時SSL化する方法についてご紹介します。

ワードプレスなどのDBを使うCMSを使っているか、いないかでも若干やり方が変わってくるのですが、今回はワードプレスでも静的HTMLでも対応できるような内容にしております。

準備するもの

サーバーパネルログイン情報
Search-Replace-DB-master
HTTPS Checker
WEBブラウザ（Chromeで説明）
ソースコードエディタ（VSCodeで説明）

前提条件

無料でやる場合はサイトのページ数は500ページ以内であること。
独自ドメインを所有していて、既にエックスサーバーとのDNS紐付けが完了している。
無料証明書（Let’s Encrypt）に限る。

ステップ(1) 証明書のインストール

エックスサーバーのサーバーパネルにて、Let’s Encryptをインストール。

インストールしたいドメインの「選択する」をクリック（サンプルは既にインストール済）

「追加する」をクリックすると30分～1時間ほどでサイトがhttpsで閲覧できるようになります。実は時間が掛かるのはここだけです。

ステップ(2) データベースの書き換え（http→https置換）

httpsで見れる事を確認した上で、Search-Replace-DB-masterをワードプレス直下にアップロードします。

アップロードしたディレクトリ直下にアクセスすると、こういった画面が開きます。

ワードプレス直下にアップロードすることで、自動的にデータベースの接続情報が入力されます。されない場合は自分で「name」「user」「pass」「host」「port」を入力する必要があります。たいていはCMSのconfigファイル等にデータベースの接続情報は記載されているかと思います。（ワードプレスだったらwp-config.php）

そして「replace」にhttp://ドメイン.comを、「with」にhttps://ドメイン.comを入力して、「dry run」をクリック。この時点ではまだデータベースは書き変わりません。まずはテストの置換を走らせたまでです。

内容に間違いがなさそうであれば「live run」をクリックすると、データベースのサイト内URLがhttpからhttpsへ置換されます。
試しにサイトをhttpsで表示してみて問題ないか確認してみましょう。

この時点でレイアウトが大きく崩れていたり、動いていたはずのJavaScriptスライドなどが動かなくなっていたらF12キーを押してデベロッパーツールを起動してみましょう。

このようにMixed Contentと表示されている場合は混在コンテンツと呼ばれ、鍵マークが正常に表示されません。自身のドメインでない場合は、そのドメインがhttpsで表示されることを確認した上で、Search-Replace-DB-masterにて対象のドメインをステップ2と同じ手順で置換してみましょう。

それでもうまくいかない場合

その場合はテーマファイルに原因がある可能性が高いです。
適応しているテーマファイルを開いて、デベロッパーツールで表示されたドメインがhttpで読み込まれてないか全検索で確認してみましょう。

VSCodeにてCtrl+Shift+Fキーを押すと開いてるフォルダを全検索できます

このVSCodeの方法は静的HTMLでも使えるので、ワードプレスなどのCMSを使っていないサイトはこの方法で対応できます。

ステップ(3) HTTPS Checkerで最終確認

以前の記事で紹介したHTTPS Checkerを使えば、自分のサイトにMixed Contentが無いかを全ページ自動的に確認してくれますので、詳しい使い方は記事を見て頂ければと思います。

なお、無料版は500ページまでしかチェックしてくれませんので、それ以上存在する場合は有料版を使われることも検討してください。

特に古いアフィリエイトタグなどを貼られている場合は引っ掛かりやすいので、このタイミングで全てhttpsに置換してあげましょう。アフィリエイトによっては、そのままhttpをhttpsに直すだけでは表示されないこともあるので、各ASPのマニュアルをご参照ください。

ステップ(4) .htaccessによる301リダイレクト設定

これが最終ステップになります。
サイトがhttpsで問題なく閲覧できることを確認したら、.htaccessファイル（apacheのディレクトリ単位設定）を少し書き換えることで301リダイレクトができます。これをしないと、検索エンジンから重複コンテンツとみなされSEOの評価が下がってしまうこともあるので、早めに設定しましょう。

基本的にはワードプレスがインストールされているディレクトリに既に.htaccessファイルが存在するので、そちらを一旦ダウンロードしてソースコードで開きます。

一番上に、以下の記述をしましょう。（コピペでOK）

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

エックスサーバーの場合はこれでOKです。
サーバーによっては、

RewriteEngine on
RewriteCond %{ENV:HTTPS} !^on$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

こう書いたり。

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)?$ https://www.hogehoge.com/$1 [L,R]

こう書いたりしないと動かないこともあります。

以上が、エックスサーバーのSSL化全手順になります。
シンプルな構成の場合この手順で問題なくSSL化ができますが、キャッシュ系プラグインを入れていたり、httpsに対応していないプラグインを入れていたりする場合はうまくいかない場合もあります。
SSL化でうまくいかないほとんどの理由はMixed Contentによるものが多いので、まずはデベロッパーツールで確認することをおすすめします。

ご自身で解決できない場合は、ご相談頂ければ対応することも可能です。