WordPress

サイトをSSL化しました(サーバー引っ越し~SSL化までの流れ)

https://じゃないとそろそろ不便っぽい

何やらグーグルさんの規約も変わってきていたり
せっかくブログやってるならGoogle AdSense導入したいわーだったりで
サイトのSSL化に踏み切りました(そんな大げさな……)
大したことはやっていないんですが、
ど素人ならではのハマりポイントもあったので、記録を兼ねて記事にしてみますね🐫

敗因

因みに先に大失敗ポイントを書いておきます
手順を読みながら作業すれば間違いないと思うんですが
🐫は先走る傾向がありますので
「ネームサーバーの設定って浸透するのに時間かかるんでしょ?先にやっとくやっとく!」
という失敗を犯しましたので、一時的にサイトが表示されなくなるという結果に。
皆様、引っ越しを行う時はデータの移行が済んでからネームサーバーの設定をしましょうね!!

運営状況

らくだ🐫のサイト → WordPressにて運営中
<変更前>
ドメイン → お名前.com
サーバー → XFREE
<変更後>
ドメイン → お名前.com
サーバー → ロリポップ!
なるべく安価・手軽にSSL化をしたいと考えた結果、こんな感じになりました。

サーバーの引っ越し

ロリポップの方にWordPressの引っ越しを簡単にやる方法があったのだけど
バージョンが合わないので諦めました


なので手動で引っ越しをします

準備

  • WordPressのバックアップ
  • ロリポップ!の契約

因みにバックアップは不安があったので
プラグインでバックアップ&FTPで本体・サーバーからDBをそれぞれバックアップと
出来そうな手段の全てでバックアップを取りました

手順に従って作業


上でも書きましたが注意していただきたいのは3番の独自ドメイン設定
ネームサーバーの設定は最後に行います!
データの移行が済む前にネームサーバーを書き換えてしまうと
呼び出すデータがない→表示されないとなって残念な感じです

FFFTPのエラー

ロリポップのサイト上にもFTPサービスがあったのだけど
フォルダごとのアップロードに対応していなかったのでソフトを使用
FFFTPを使っていたのだけどなぜかアップロードがちょこちょこ止まる
&アップロードできませんでしたなメッセージが。


こちらのサイトを参考に、一時的に暗号化なしで接続することでエラー回避
無事アップロードできました

表示出来たりできなかったり

アップロードを待つ間
先に変更しちゃったネームサーバーが浸透(?)したようで一時的にサイトが表示されなくなりましたが
アップロードが終わった所で無事表示できるようになりました!
これはロリポップ!のサーバーからデータが読まれてるって事で一安心かな?と思った矢先
androidなスマホのTwitterアプリの内部ブラウザから開こうとすると
サーバーで用意されているまだ何も用意されてないよって感じのページが現れました。
仮に用意されているindex.htmlみたいなヤツ。
これはどういう事なんだろうとTwitterで「見れるっぽい?見れないっぽい?」などと呟いていたんですが
「みえてるよー」とリプいただいて安心したり
自分でもそのうち問題なくアクセスできるようになりました。良かった良かった。

SSL化

SSL化に関しては手続きはサイトから出来るし
その他に必要な情報も調べてあったので安心して挑みました。
勿論罠はあるw
因みに参考にしたページはこちら


とても丁寧に説明して下さっているので
書かれている通りに作業を進めればOK、のはずなんですが
らくだ🐫なので詰まったりするよね✨

リダイレクト設定

httpから始まるURLでリクエストがあった時もhttpsで始まるURLにリダイレクトされる様に設定する訳です
.htaccessにコードを追加する方法が一番最初に説明されてるんだけど
これってどこに追加すればいいのだ?となりまして
良くわからなかったのでワードプレスのプラグインを使って設定したのだけど
リダイレクトがリダイレクトを呼びまくる様で(リダイレクトループと言うのかな?)
ページが表示されなくなってしまいました。
困ったので一旦プラグインからの設定を解除。
リダイレクトされないようにしました。

リダイレクトされてないはずなのに表示されるhttpsのページ

更に謎な事に
自分の環境からはhttpから始まるURLでリクエストしてもhttpsのページが表示されちゃうんですね。
cookie&履歴の削除をしても変わらず
これってリダイレクトされてる状態って事?と悩みました
で、見つけたのがこのあたり



どうやら一度httpsで表示したことがあるページは、強制的にhttpsのページにリダイレクトされてしまうと言う事のようです。
やはりリダイレクトの設定はしなければならない様子。

WordPress使用時のリダイレクトの書き方

プラグインのエラーなのか自分の設定が悪いのかわかりませんが
プラグインからの設定ではうまくリダイレクトできなかったので
.htaccessにコードを記述してリダイレクトさせることにしました。
で、どこにコードを追加したらいいの?となったわけですが
WordPressの場合、.htaccessを開いたら一番上に追加しないとうまく作動しないようです。

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

これで無事、リダイレクトの設定が出来ました✨
そしてリダイレクト処理が正常に行われているかの確認も。

アナリティクスとサーチコンソールの設定

これでオッケーと思ったところでふと思いつきました。
Googleのアナリティクスとサーチコンソールの設定もしないとじゃない?
と言う訳でこちらを見ながら設定変更


サーチコンソールに関してはシステムの変更があったようなのでこちらを参考に

この際ドメインプロパティを設定しようとして四苦八苦したのだけどそれはまた別のお話www
以上、無事サーバーの引っ越しとサイトのSSL化が終了しました

まとめとか感想

ざっくりですが運用サーバーの引っ越しとSSL化の流れを書きました
やっぱり作業しながら書かないと駆け足になるし何をしてたか忘れますねぇ。
今後は自分の為にも記録を付けながらやっていきたいと思います。