Изучите, как реализовать локальный HTTPS в вашем рабочем процессе разработки с помощью таких инструментов, как Mkcert, и пошаговые руководства для Express.js и Next.js.
При разработке веб-приложений в определенных сценариях требуется HTTPS, даже в локальной среде. Если вы интегрируетесь с надежными сторонними API, тестируете функции, работающие только через HTTPS, такие как сервисные работники и HTTP/2, или воссоздаете условия производства, чтобы обеспечить беспроблемное развертывание, HTTPS становится крайне необходимым. Кроме того, некоторые API браузера—например, геолокация, push-уведомления и управление учетными данными—требуют защищенного контекста для эффективной работы.
Например, Logto OSS требует HTTPS по умолчанию, кроме localhost, в таких случаях изучение настройки HTTPS для локальной разработки может сэкономить ваше время. В этой статье мы расскажем вам, как настроить HTTPS для локальной разработки, представив такие инструменты, как Mkcert, которые упростят процесс.
localhost и функций, работающих только через HTTPSlocalhost — это специальный домен, который может обрабатывать множество функций, работающих только через HTTPS, таких как сервисные работники, защищенные куки, HTTP/2 и другие API браузера могут нормально работать в http://localhost:xxxx, поэтому вам может не всегда требоваться локальный HTTPS, попробуйте сначала localhost!
Ранее представленные в этой статье, туннели Cloudflare легко могут выставить вашу локальную службу в Интернет с готовым HTTPS.
2 упомянутых варианта не решили вашу проблему? Тогда давайте настроим локальный HTTPS. В следующих шагах мы предполагаем, что локальное доменное имя — это example.com.
Прежде чем начать, убедитесь, что целевой домен разрешается на ваш локальный компьютер, это можно сделать, обновив файл hosts. Откройте /etc/hosts на Linux/macOS или C:\Windows\System32\drivers\etc\hosts на Windows, и добавьте следующие строки:
Первое, что связано с HTTPS, это сертификат. В производственной среде это можно сделать с помощью таких инструментов, как "Let's encrypt" или купить сертификаты у ваших поставщиков услуг. Но в локальной разработке мы можем напрямую создавать сертификаты.
Mkcert — это простой инструмент с нулевой конфигурацией для создания локально доверенных сертификатов разработки с любыми именами, которые вам нужны.
Сначала выполните инструкции официального руководства, чтобы установить mkcert, предполагая, что вы используете macOS:
Для Windows и Linux ознакомьтесь с этой ссылкой.
Теперь, когда mkcert готов к использованию, выполните эту команду, чтобы создать локальный CA и сохранить корневой сертификат в хранилище доверия вашей системы. Чтобы узнать больше о "CA" и сертификатах, ознакомьтесь с документацией от Cloudflare.
Затем создайте локальный SSL-сертификат
Это создаст файлы example.com.pem и example.com-key.pem в вашем каталоге.
С готовыми файлами сертификатов вы теперь можете включить HTTPS в вашем приложении. В отличие от производственной среды, где такой обратный прокси-сервер, как Nginx, обрабатывает HTTPS, в локальной разработке мы можем настроить его непосредственно в веб-приложении. Давайте возьмём Express в качестве примера.
Создайте простой сервер Express с следующим кодом:
Запустите приложение и посетите https://example.com, чтобы увидеть вашу защищенную Express программу в действии.
Logto OSS требует HTTPS по умолчанию, кроме localhost, если вы хотите запустить Logto локально с другим доменом, вам нужно будет настроить локальный HTTPS.
mkcert, чтобы создать два файла .pem и поместите их в каталог.HTTPS_CERT_PATH и HTTPS_KEY_PATH, чтобы включить HTTPS через Node, проверьте эту ссылку, чтобы узнать больше.Настройка HTTPS для локальной разработки не так сложна, как кажется. С помощью таких инструментов, как Mkcert, создание локально доверенных сертификатов становится быстрым и простым процессом. Хотя localhost часто обрабатывает множество функций, работающих только через HTTPS, бывают случаи, когда вам нужна полная поддержка HTTPS, и это руководство поможет вам в этом. Независимо от того, тестируете ли вы API, работаете с Logto OSS или просто воссоздаете производственные условия, следуя этим шагам, вы будете готовы к безопасной и бесшовной разработке.