Chrome v63で.devドメインがHTTPSを強制される。

Google Chrome

Google Chromeには複数のバージョンがあります。

https://www.chromium.org/getting-involved/dev-channel

Stable channel
Beta channel
Dev channel
Canary build

現在は4つとあとコアのChromiumですかね。

上3つはアイコンの色が同じでわかりにくいのですがCanaryは黄色、Chromiumは水色をしていてわかりやすくなっていたりします。

これらはすべて同時にインストールができてそれぞれ試すことができるので最新のバージョンや安定したバージョンがそれぞれ使うことができます。

ことの始まり

Chrome 安定版をWebブラウジング用

Chrome Canaryで開発環境のサイトをPreviewするために使っていました。

Chromeでユーザ分けたらいいだけの話だけど、Canaryしかないデベロッパーツールの項目があったりしてそれ使ってみたいなっていうのもあったと思います。

9月末にCanary v63になり.devのものが『このサイトにアクセスできません』と表示されるようになりました。

最初はケアレスミスかと思いましたが、他ブラウザでは全く問題なかったためChromeの問題と気が付きアンインストールなどを試しましたが全く効果がなかったのを今でも覚えています。

当時の安定版が61だったのですぐに対応が求められるものではなかったため、Canaryをそっと閉じてスルーしていました。

12月に入り安定版にもv63が来たとのことで本格的に対応が必要になってきたためシェア目的で記事書いています。

なぜこんなことになったのか。

2015年にGoogleが.devや.appなどのドメインを購入したということらしいです。

2017年12月現在ではそのドメインは一般的に使用されていないようですが、今後利用される可能性があるとしています。

その影響でChromeではv63からHTTPSを強制するようになってるみたいです。

うん。よくわからない。笑

どんな場合に問題になるか

複数のブロジェクトを作成し、同時並行で進める場合

Githubで公開されているプロジェクトを一時的に利用する場合

その他localhostだけでは足りない場合

複数のブロジェクトを作成し、同時並行で進める場合

私個人としては、

homesteadやLaradockで複数のプロジェクトを作成

LaravelとExpressでBackendプロジェクト作成->Frontendでそれぞれテスト

その際にNginx側でフォルダとドメイン設定を行います。

sodo vi /etc/hosts

1	sodo vi /etc/hosts

でドメイン追加を行い各プロジェクトで存在しないドメインを勝手に作って開発をするってことがよくあります。

ex.

http://homestead.dev

http://laradock.app

Githubで公開されているプロジェクトを一時的に利用する場合

コードがわからなかった場合、類似のプロジェクトを探してきてどんな動きをするか確認することが私の場合よくあります。その際に簡易的に開発ドメインを割り当てたりします。

解決法

参照リンクによると複数の解決法があるみたいです。

Laravel Valetのようなプロキシみたいなものを導入する。
自己署名証明書を設定する。
gTLDで使われていないドメインに変更する。
Google ChromeからFirefoxなどの他ブラウザに変更する。

Laravel Valetのようなプロキシみたいなものを導入する。

Laravel Valetは、Macが起動するときにNginxを常にバックグラウンドで実行するように設定します。

DnsMasqを使用して、Laravel Valetはドメイン上のすべての要求を、ローカルマシンにインストールされているサイトを指すようにプロキシされるツール。

macOSのみサポート

Laravel.com

PHP / MySQLだけを必要とし、完全に仮想化された開発環境を必要としない開発者には最適。

とあったので少し触ってアンインストールしました。