最近ロリポップからエックスサーバーに乗り換えて、せっかくなのでこのサイトをhttps化することにしました。
今回はエックスサーバーで、実際このサイトをhttps化した時の手順を順番に紹介していきます。
Webサイトの立ち上げ時や、httpで運用していたサイトをhttps化しようと思っている方に役に立つよう今回の記事を作成しました。
この記事を読むことで、実際エックスサーバーでhttps化する時に必要なことや事前の準備などを知ることができますので、ぜひ最後まで読んでみてください。
https化する前の準備
自分のサイトをhttps化する前にまずは現在可動しているサイトのデータベースのバックアップを取得して、元に戻せるようにしておきましょう。
データベースのバックアップを取るには、エックスサーバーのトップページからサーバーパネルを選んでログインします。
サーバーパネルのログイン画面に行くと次のようなページが表示されると思います。
まずはログインして管理画面のトップページに移動します。
移動したらページの中にある、「MySQL設定」をクリックしてバックアップを取りたいデータベースユーザーを確認します。
データベースユーザーの確認ができたら、トップページに戻って「phpmyadmin」をクリックします。
クリックするとユーザー名とパスワードとかを求められるので、先程確認したユーザー名とパスワードを入力してログインします。
ログインすると、データベースが表示されます。
データベースが表示されたあとは、タブのところに「エクスポート」をクリックしましょう。
エクスポートをクリックした後は詳細のところにチェックを入れます。
チェックを入れた下のほうにスクロールして、作成するクエリの最大長クエリの長さを50000から5000000に増やします。
増やせたら「実行」をクリックして、データベースのバックアップを取ります。
https化
データベースのバックアップが取れたら、次はエックスサーバーでURLのhttps化の設定を行っていきます。
エックスサーバートップページに戻って、SSL設定をクリックします。
SSL化をクリックすると下記の画像のようにURLの一覧が表示されます。
その中からSSL化したいURLを選んで、「選択する」ボタンをクリックします。
クリックしたら、ドメインをSSL化するための設定画面が表示されます。
タブの中から、「独自SSL設定の追加」をクリックします。
クリックしたあとは、右下にある「独自SSL設定を追加する」というボタンをクリックして、SSL設定を行います。
途中に、「CSR情報(SSL証明書申請情報)を入力する」というチェックボックスがありますが、ここは何もチェックを入れなくて大丈夫です。
追加をクリックして、成功すると次のように表示されます。
ちなみに、https化をすぐにhttps化したURLにアクセスすると次のように表示されます。
https化には時間がかかるので、しばらく待ちましょう。
しばらくすると設定が反映されて、httpsで自分のサイトにアクセスできるようになります。
実際に設定反映後アクセスしてみました。
すると、次のように表示されます。
ただ画像にもある通り、URLの部分に黄色い三角のマークが表示されています。
実は、これはhttpsの中にhttpのコンテンツが混じっているため、まだサイトは完全に安全というわけではありませんというマークなんです。
なので、次からこの黄色いマークを取るためのセットアップを行っていきます。
https化に伴うURLの変更
https化が完了したら、次はWordPressのリンクの設定をしていきます。
http化をする前にコンテンツなどを詰めていた場合は、画像のリンクなどがhttpのままなので、ここをhttpからhttpsに書き換える必要があります。
まずは、WordPressの管理画面にアクセスしてサイトのアドレスをhttpからhttpsに変更しましょう。
次は、記事などの内部コンテンツのURLをhttpからhttpsに変更していきます。
コンテンツのURLを変換ために、Velvet Blues Update URLsというプラグインを使います。
プラグインをインストールするために、プラグインー＞新規追加からVelvet Blues Update URLsと検索窓に入力して検索します。
出てきたら、「今すぐインストール」をクリックして有効化します。
有効化したあとは、WordPress管理画面のツールからUpdate URLsをクリックして設定画面を表示します。
設定画面を開いたら下記のように設定するようにしましょう。
準備ができたら、「Update URL Now」というボタンをクリックします。
ボタンをクリックして成功したら、トップページに行ってサイトがhttps化されているかチェックしましょう。
トップページにアクセスすると、まだ黄色のままでした。。。
原因を見るために、右クリックー＞要素の検証ー＞コンソールの順でチェックすると、プロフィールで使っている画像がhttpのままだと言われました。
ここはWordPressのウィジェットのカスタムHTMLで手書きで入れているところなので、書き直します。
すると、ちゃんと今度は緑色のマークが出ました。
ちなみに、URL書き換える系のプラグインはSearch Regexというプラグインなどもあります。
ただ、WordPressの公式のリファレンスに記載されていたので、僕はVelvet Blues Update URLsというプラグインを使いました。
要はURLを変換できればいいので、単純に使いやすいプラグインを選択して使えば良いと思います。
htaccessの記述変更
https化の設定ができたところで今度は、htaccessファイルを記述していきます。
htaccessとは、エックスサーバーなどの設定ファイルのことを指します。
現状はhttp形式のURLとhttps形式のURL両方にアクセスできる状態になっています。
これを常にhttpsで表示するように設定する必要があるんです。
その設定をするためのファイルがhtaccessファイルになります。
まずはhtaccessファイルを編集しましょう。
htaccessファイルはWordPressのソースコードのトップの部分に存在しています。
WordPressのソースコードにアクセスするために、FTPソフトを使ってアクセスしましょう。
FTPとは、ファイルを転送するために使われる仕組みのことです。
htaccessファイルを発見したら、メモ帳などをつかってファイルを開いて編集するようにします。
おそらくデフォルトは下記のような表示になっていると思います。
|
1 2 3 4 5 6 7 8 9 10 11 |
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress |
それを次のように編集しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress |
編集が正しくできていれば、今表示しているページのURLにhttpでアクセスしてみます。
すると、httpsにURLが書き換わると思います。
これでhtaccessの設定は完了です。
Googleアナリティクスの設定
次にGoogleアナリティクスの設定を行います。
GoogleアナリティクスとはGoogleから出ているWebサイトの解析ツールになります。
GoogleアナリティクスのデフォルトURLをhttpのものから、httpsのものに変更しましょう。
まずはGoogleアナリティクスのTOPページにアクセスします。
アクセスができたら、ページの左下にある「管理」をクリックしましょう。
クリックできたら、次は「プロパティ設定」をクリックします。
最後にセレクトボックスの「http」を「https」に変更しましょう。
変更したら、ページの一番下にある「保存」ボタンをクリックして保存します。
サーチコンソール登録
Googleアナリティクスの設定が終わったら、次はサーチコンソールの設定をしましょう。
GoogleアナリティクスがWebサイトの解析ツールだったのに対して、サーチコンソールは検索エンジンの解析ツールになります。
これを使うことで、今自分のサイトがどんなキーワードで、何ページ目に表示されているかがわかります。
まずはサーチコンソールのトップページにアクセスして、「プロパティを追加」をクリックしましょう。
すると登録画面が表示されます。
ここでは、httpsの形式とwwwがついた形式両方を登録しましょう。
それぞれ追加をクリックするとサイトの所有権も確認されます。
サイトの所有権も一緒に確認していきます。
これで、サーチコンソールの設定も完了です。
まとめ
今回はエックスサーバーでhttps化する手順を紹介しました。
https化するとひとえに言ってもやることはたくさんあります。
これが大規模なサイトになると最初のデータのバックアップを取るところでもだいぶ苦戦を強いられると思います。
現状Googleはサイトのhttps化を進めていて、ほとんどのブラウザがhttps化されていないページは「このサイトは安全ではありません。」といった表示がされます。
ただ、https化をするとしばらくはアクセスが減ったりする可能性があるので、https化はWebサイト作成の段階で早めに行っておく必要があります。
