開発用の.devドメインが表示できなくなった件とその対応方法

開発用で使用している.devドメインがchromeとFirefoxでうまく表示できなくなったので、その際に対応した方法をメモしておきます。
今回対応したのは、XAMPPでバーチャルホストの設定をしたWordPressの環境になります。

背景

WordPressのローカルでの開発に.devドメインを使用することが多いのですが、昨年末あたりからchromeで表示されなくなりました。
.devドメインをHTTPSに強制的に変更してしまうようになったことが原因のようです。

その当時調べてみたところの対応策としては、別ドメインに変更する、ブラウザを変更するなどがありました。
ただWordPress環境のドメインの変更は少し手間なので、新規で環境を作る場合は.testドメインで作成、既存環境での作業は別ブラウザ(Firefox)で作業をする、という形で対応しました。

これで一時的には問題なかったのですが、少し前からFirefoxでも.devドメインをHTTPSに強制的に変更してしまうようになったようです。
IEでは表示できるようですが開発には使いにくいので、既存のWordPress環境のドメインを変更する方法を試してみます。
　

対応方法

最初にも記述しましたが、今回の対象はXAMPPでバーチャルホストの設定をしたWordPressの環境になりますのでご注意下さい。

XAMPPの設定変更

まずはXAMPPのバーチャルホストの設定を変更します。
下記2ファイルのドメインを書き換えてください。

C:\xampp\apache\conf\httpd.conf
C:\Windows\System32\drivers\etc\hosts

例えばhoge.devで開発していた場合、hoge.testに書き換えます。
参考:XAMPPでバーチャルホストの設定をする
　

データベースのバックアップ

次に現状のデータベースのバックアップを取ります。
XAMPPを起動して、phpMyAdminにログインします。
該当のデータベースのエクスポートを選んで、以下の項目にチェックを入れます。

• Export method: > 詳細 – 可能なオプションをすべて表示
• 生成オプション > DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER コマンドを追加する

phpMyAdminのバージョンにもよるかと思いますので、詳しくはWordPress公式のデータベースのバックアップなどをご確認ください。
　

データベースのドメイン書き換え

データベースのバックアップ作業が完了したら、次はデータベースのドメインの書き換えを行います。
書き換えにはSearch Replace DBを使いますが、ダウンロードや使い方については以前投稿したWordPressのサーバーを移行するに記載していますので、そちらをご確認ください。

Search Replace DBをダウンロード後、WordPressのルートに設置してアクセスします。
置換前を「http://hoge.dev」置換後を「http://hoge.test」のようにして、dry runで試してみます。
問題なさそうならlive runでドメイン置換作業を実行してください。

ドメイン書き換え完了後、変更後のhttp://hoge.testにアクセスして正しく表示されたらドメイン変更作業は完了です。
　

現在進行中の案件など使用頻度の高いものはドメイン変更した方がよさそうですが、開発済でほぼ使うことのないものや、IEで少し確認するだけでよい軽微なものなどはわざわざドメイン変更しなくてよいかもしれません。
　

【参考サイト】

• Chrome & Firefox now force .dev domains to HTTPS via preloaded HSTS
• Google Chromeで.devなどの開発DomainがHTTPSに変更される。 – Qiita