ローカルのdevサイトで有効なhttpsを有効にするためにmkcertのマジックを使用する

以下のチュートリアルをスキップし、自分のために掘るしたいですか?チェックアウトrepo そして、READMEの指示と一緒に従ってください.

ローカルHTTPSはひどいです

あなたがウェブ開発者であるならば、あなたはあなたのアプリケーションを構築するために地方のdevサイトを使用したと非常にありそうです.好きなものexample.test or mycoolsite.devlocal , 正しい?私は基本的なコンテンツサイトを回転させるとき、私は実際にhttpsでそれを包むことに注意を払っていない.しかし、より複雑なアプリケーション、特に登録とログインを必要とするそれらに掘削を始めるとき、HTTPSは役に立つでしょう、そして、時々、あなたのフロントエンドに従い、時々必要です.
Google Chrome(そして、最も現代のブラウザー)は、暗号化されていないHTTPサイトに対して大きなスタンスを取った.これはdevのサイトと開発用のtldsを使用するものが含まれます.test and .devlocal . 通常、あなたはあなたのアドレスバーの左隅に小さな感嘆符または何らかの種類の通知を見るでしょう、しかし、認証が遊びに来るとき、その変化.あなたは、不安定なウェブサイトで情報を提出することについてのより大きな通知さえ見ます、そして、その行動を実行することからさえブロックされるかもしれません.
潜在的解決策は「我々のサイトのHTTPSを可能にするためにローカル自己署名証明書を作成しましょう」.我々が行くならばsearching for tutorials どのようにそれを達成するには、文字通りのすべての主要なオペレーティングシステムのオプションの膨大な量です.コマンドラインからこのようなことをしている場合、一般的なコンセンサスはOpenSSLのようなツールを使用しています.次に、NGNXやApacheの設定ファイルでHTTPSを有効にし、:443 ポートと、そのファイルをSSL証明書として参照します.
これは一種の仕事だった.私のローカルのdevのアプリでは、いつでも私はhttps:// バージョンは、私は巨大な“このサイトは不安定です”フルスクリーンポップアップ表示されます.最初は、それはそんなに私を悩まなかった.私はちょうど「不安定なサイト」ボタンをクリックすることができました.アドレスバーの大きな赤い安全なHTTPSバッジで、それはまだ仕事をしました.

それからMacOSの新しいバージョンの問題が起こりました、そこで、あなたはChromeのポップアップに関して「不安定なサイトを続けます」ボタンを見さえしませんでした.実際にそれを表示するには、する必要がありますthis awful process あなたのデスクトップにSSL証明書を保存して、keychainアクセスでそれを開けて、手動でそれのために信頼を設定すること.そして、それさえちょうどバイパスボタンを作ったが、あなたのサイトのアドレスバーにその大きな不安定なバッジをまだ示しています.
より良い方法がある必要があります.

ウォークスMKCert

私は正直にどこで初めて遭遇したのか覚えていないmkcert . それはredditポスト、Twitterのスレッド、またはランダムなスタックオーバーの答えにされている可能性がありますが、私はとてもうれしいです.
そうですね.mkcertは二つのことを行うコマンドラインツールです.

それはあなたのマシンにローカル証明書権限を生成します.

それはその権威に対して自己署名SSL証明書を作成します.

これは、ブラウザがその生成されたCERTSの1つを使用する開発サイトをロードするときはいつでもhttps , ダミー検証サービスに対する証明書がマシンにインストールされていることを確認します.したがって、それが合法的であると思ってあなたのブラウザを偽造.
それは魔法です!✨

セットアップ

実際のユーティリティのインストールはとても簡単で、パッケージはWindows、MacOS、Linuxプラットフォームで利用できます.私はそれぞれの簡単な概要を通過しますが、より詳細な手順については、私はチェックアウトをお勧めしますREADME オフィシャルについて
始めましょう!
MacOSを使うHomebrew :

brew install mkcert
brew install nss # only if you use Firefox

Windows用Chocolatey :

choco install mkcert

Linux用Linuxbrew :

brew install mkcert

💥 バム!今すぐあなたのシステムにインストールされ、お使いの端末で使用する準備が整いました.

証明書の作成と使用

これが初めてmkcertを使っているなら、インストールフラグで実行する必要があります.これは一度だけ行われる必要があり、以前に話したローカル認証局を作成します.
端末を開き、実行します.

mkcert -install

すべてが成功した場合は、次のように表示されます.

Created a new local CA at "/Users/andrew/Library/Application Support/mkcert" 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊

権限をインストールしたので、実際の証明書を作成できます.お客様のプロジェクトのディレクトリに最初に移動することを勧めますmkcerts または同様の何か.
では、コマンドを実行するだけのことです.

mkcert example.test

置換example.test あなたのサイトを表示するために使用しているどんなローカルドメインででも.
また、IPアドレス、またはワイルドカードのサブドメインを使用することもできます.一つのサイト上の複数の異なるドメインに対する1つの証明書が欲しい場合は、同じ呼び出しで一緒に連鎖します.

mkcert example.test "*.example.test" 127.0.0.1

そして、すべてがうまくいくならば、あなたは、そのコマンドを実行したディレクトリに2つの新しいファイルを持つべきです.example.test.pem and example.test-key.pem . それらを使用しましょう!
我々がしなければならないすべては、彼らに我々のApacheまたはNGinx Configファイルにアクセス可能にして、我々がLetの暗号化または他の権威から実際の証明書をするように、彼らを利用します.
NGNXでは、準備されたSSLブロックと並んでいます.

server {
    listen  443 ssl;
    server_name  example.test;
    root  /Users/andrew/Sites/example.test/public;
    ssl_certificate     /Users/andrew/Sites/example.test/mkcerts/example.test.pem;
    ssl_certificate_key /Users/andrew/Sites/example.test/mkcerts/example.test-key.pem;
}

とApacheで

<VirtualHost 127.0.0.1:443>
ServerAdmin webmaster@example.test
DocumentRoot /Users/andrew/Sites/example.test/public
ServerName example.test
SSLEngine on
SSLCertificateFile /Users/andrew/Sites/example.test/mkcerts/example.test.pem
SSLCertificateKeyFile /Users/andrew/Sites/example.test/mkcerts/example.test-key.pem
</VirtualHost> 

すべてのそれを行うには、Webサーバープロセスを再起動し、あなたの例のサイトに移動しますhttps:// 選択のあなたのブラウザーで.次に、アドレスバーに素晴らしい緑の安全なバッジを提示する必要があります!✅

それはすべての人々です

うまくいけば、この記事を通過して、Mkcert自身を試してみた後に、あなたはあなたの開発ウェブサイトでHTTPSを可能にするために自己署名SSL証明書を作成して、使用するより簡単な方法に変わりました.
何かについての質問がある場合は、懸念や問題は、mkcert、または単に一般的なWeb開発のトピックについてのチャットを開始すると、コメントや私の上に私に手を伸ばす自由を開始します.