Работа с локальной разработкой HTTPS

При разработке веб-приложений в определенных сценариях требуется HTTPS, даже в локальной среде. Если вы интегрируетесь с надежными сторонними API, тестируете функции, работающие только через HTTPS, такие как сервисные работники и HTTP/2, или воссоздаете условия производства, чтобы обеспечить беспроблемное развертывание, HTTPS становится крайне необходимым. Кроме того, некоторые API браузера—например, геолокация, push-уведомления и управление учетными данными—требуют защищенного контекста для эффективной работы.

Например, Logto OSS требует HTTPS по умолчанию, кроме localhost, в таких случаях изучение настройки HTTPS для локальной разработки может сэкономить ваше время. В этой статье мы расскажем вам, как настроить HTTPS для локальной разработки, представив такие инструменты, как Mkcert, которые упростят процесс.

Роль localhost и функций, работающих только через HTTPS#

localhost — это специальный домен, который может обрабатывать множество функций, работающих только через HTTPS, таких как сервисные работники, защищенные куки, HTTP/2 и другие API браузера могут нормально работать в http://localhost:xxxx, поэтому вам может не всегда требоваться локальный HTTPS, попробуйте сначала localhost!

Попробуйте туннели Cloudflare#

Ранее представленные в этой статье, туннели Cloudflare легко могут выставить вашу локальную службу в Интернет с готовым HTTPS.

Настройка локального HTTPS#

2 упомянутых варианта не решили вашу проблему? Тогда давайте настроим локальный HTTPS. В следующих шагах мы предполагаем, что локальное доменное имя — это example.com.

Шаг 1: обновление файла hosts#

Прежде чем начать, убедитесь, что целевой домен разрешается на ваш локальный компьютер, это можно сделать, обновив файл hosts. Откройте /etc/hosts на Linux/macOS или C:\Windows\System32\drivers\etc\hosts на Windows, и добавьте следующие строки:

Шаг 2: создание сертификатов#

Первое, что связано с HTTPS, это сертификат. В производственной среде это можно сделать с помощью таких инструментов, как "Let's encrypt" или купить сертификаты у ваших поставщиков услуг. Но в локальной разработке мы можем напрямую создавать сертификаты.

Mkcert — это простой инструмент с нулевой конфигурацией для создания локально доверенных сертификатов разработки с любыми именами, которые вам нужны.

Сначала выполните инструкции официального руководства, чтобы установить mkcert, предполагая, что вы используете macOS:

Для Windows и Linux ознакомьтесь с этой ссылкой.

Теперь, когда mkcert готов к использованию, выполните эту команду, чтобы создать локальный CA и сохранить корневой сертификат в хранилище доверия вашей системы. Чтобы узнать больше о "CA" и сертификатах, ознакомьтесь с документацией от Cloudflare.

Затем создайте локальный SSL-сертификат

Это создаст файлы example.com.pem и example.com-key.pem в вашем каталоге.

Шаг 3: настройка HTTPS в вашем приложении#

С готовыми файлами сертификатов вы теперь можете включить HTTPS в вашем приложении. В отличие от производственной среды, где такой обратный прокси-сервер, как Nginx, обрабатывает HTTPS, в локальной разработке мы можем настроить его непосредственно в веб-приложении. Давайте возьмём Express в качестве примера.

Создайте простой сервер Express с следующим кодом:

Запустите приложение и посетите https://example.com, чтобы увидеть вашу защищенную Express программу в действии.

Включите HTTPS для Logto OSS#

Logto OSS требует HTTPS по умолчанию, кроме localhost, если вы хотите запустить Logto локально с другим доменом, вам нужно будет настроить локальный HTTPS.

1. Настройка Logto: Следуйте ссылке, чтобы настроить Logto на вашем локальном компьютере: https://docs.logto.io/docs/get-started/.
2. Подготовьте сертификаты: Используйте mkcert, чтобы создать два файла .pem и поместите их в каталог.
3. Установите переменные окружения: Укажите оба пути HTTPS_CERT_PATH и HTTPS_KEY_PATH, чтобы включить HTTPS через Node, проверьте эту ссылку, чтобы узнать больше.

Резюме#

Настройка HTTPS для локальной разработки не так сложна, как кажется. С помощью таких инструментов, как Mkcert, создание локально доверенных сертификатов становится быстрым и простым процессом. Хотя localhost часто обрабатывает множество функций, работающих только через HTTPS, бывают случаи, когда вам нужна полная поддержка HTTPS, и это руководство поможет вам в этом. Независимо от того, тестируете ли вы API, работаете с Logto OSS или просто воссоздаете производственные условия, следуя этим шагам, вы будете готовы к безопасной и бесшовной разработке.