18/10/2019 WordPress

サイトをSSL化しました（サーバー引っ越し～SSL化までの流れ）

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

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

敗因

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

運営状況

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

サーバーの引っ越し

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

WordPress（ワードプレス）簡単引っ越し / はじめに / マニュアル - レンタルサー...

https://lolipop.jp/manual/startup/wordpress-migrator/

WordPress（ワードプレス）簡単引っ越しを利用して、他サーバーからロリポップ！レンタルサーバーにWordPress（ワードプレス）を移行する手順をご説明したマニュアルページです。

ロリポップ！レンタルサーバー

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

準備

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

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

手順に従って作業

他サーバーからの移行方法 / はじめに / マニュアル - レンタルサーバーならロリポ...

https://lolipop.jp/manual/startup/iten/

ロリポップ！レンタルサーバーに他サーバーから移行する手順をご説明したマニュアルページです。

ロリポップ！レンタルサーバー

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

FFFTPのエラー

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

FFFTPで頻繁に起きるファイル転送エラーを回避する方法 | WordPress引っ越しマニュ...

~~https://server-moving.kotohajime.info/solve-transfer-error/~~

FFFTPで大量のファイルを転送していると必ず止まるという現象が起きていました。これは非常に作業効率を落としますので、回避方法を調査しました。その全てをここで説明しています。

server-moving.kotohajime.info

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

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

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

SSL化

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

WordPressサイトをhttpからhttpsにSSL化する方法【対応手順を丁寧に説明】

https://creive.me/archives/11553/

「WordPressサイトをhttps化したいけどどうやったらいいの？」 WEBサイトやブログの運営を行っている上で最近何かと話題になっているhttps化、皆さんはすでに実装済でしょうか？ https

creive【クリーブ】

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

リダイレクト設定

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

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

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

Chromeでhttpからhttpsへ強制リダイレクトされる場合の対処法

https://i-think-it.net/chrome-http-https-force-redirect-approache/

ども。あいしんくいっと（@ithinkitnet）です。 Let’s EncryptのSSL/TLS証明書を使ってWordPressの全面SSL化を行ったのですが、訳あって戻すことにしました。 Nginxの設 ...

あいしんくいっと

HTTPS入門　リダイレクトとHSTS：SSL/TLS サーバ証明書 |DigiCert（デジサート）正...

https://rms.ne.jp/Introduction_to_https/redirect_and_hsts.html#hsts

HTTPS 入門リダイレクトとHSTS

rms.ne.jp

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

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

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

WordPressの常時SSL化では、.htaccessの順序に注意！ | Cherry Pie Web

https://www.cherrypieweb.com/weblog/technical/20181129001742.php

WordPressサイトを常時SSL化する際、.htaccessによるリダイレクトができなくなってしまいました。

Cherry Pie Web

<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

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