Laravel NewsでChrome 63 now forces .dev domains to HTTPSと記事が出てましたね。
以前Qiitaでもこの記事を以前取り上げたのですが、更新したのでこちらでも記事にしときます。
Qiitaではトラブルシューティングメインだったのでこっちでは背景とかストーリーをメインで解説します。
解決法が知りたい方はこちらQiitaが見やすいです。笑
https://qiita.com/lara_bell/items/f7f3c5189530090229ed
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側でフォルダとドメイン設定を行います。
|
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だけを必要とし、完全に仮想化された開発環境を必要としない開発者には最適。
とあったので少し触ってアンインストールしました。
自己署名証明書を設定する。
通称オレオレSSL証明書と言われるもの。
使ったことないので今回はスルー。
gTLDで使われていないドメインに変更する。
下記ドメインに変更する
.test
.example
.invalid
.localhost
このドメインは1999年にRFC 2606でテスト用で使ってみてと推奨されているドメインらしいです。
調べるまでこんなのあるなんて知らなかったですよ。笑
https://tools.ietf.org/html/rfc2606
Google ChromeからFirefoxなどの他ブラウザに変更する。
.devや.appはChrome固有の問題になるため他のブラウザだと普通に起動します。
FirefoxやSafariでは問題なく使えます。
しかし、個人的にはGoogle Chromeのデベロッパーツールがとても使いやすく使い慣れているというのもあって他のブラウザにすぐに乗り換えなんてのは考えられないですね。
まとめ
今回は慣例的に使われる.devや.appドメインがChromeで簡単には使えなくなりましたという話でした。
Macを再起動したらChromeがアップデートしてて繋がらなくなったそこのあなた
大丈夫です。私も同じようにビビりました。笑
私も今日気がついてBlogのネタにしようと思い立ったわけです。笑
ドメインを変更したらまた開発できるので大丈夫です！
参照リンク
https://iyware.com/dont-use-dev-for-development/
https://ma.ttias.be/chrome-force-dev-domains-https-via-preloaded-hsts/
https://laravel-news.com/chrome-63-now-forces-dev-domains-https
コメントを残す