Polski
  • https
  • tls
  • nginx
  • express
  • proxy

Obsługa lokalnego rozwoju HTTPS

Odkryj, jak wdrożyć lokalny HTTPS w swoim procesie tworzenia aplikacji za pomocą narzędzi takich jak Mkcert i przewodników krok po kroku dla Express.js i Next.js.

Sijie
Sijie
Developer

Podczas tworzenia aplikacji internetowych, pewne scenariusze wymagają HTTPS, nawet w lokalnym środowisku. Niezależnie od tego, czy integrujesz się z bezpiecznymi zewnętrznymi interfejsami API, testując funkcje dostępne tylko przez HTTPS, takie jak pracownicy usługowi i HTTP/2, czy powielając warunki produkcyjne, aby zapewnić płynną implementację, HTTPS staje się kluczowy. Dodatkowo, pewne interfejsy API przeglądarki—takie jak geolokacja, powiadomienia push i zarządzanie danymi uwierzytelniającymi—wymagają bezpiecznego kontekstu do efektywnego działania.

Na przykład, Logto OSS wymaga domyślnie HTTPS z wyjątkiem localhost, w takich przypadkach, nauka ustawiania HTTPS dla lokalnego rozwoju może zaoszczędzić Twój czas. Ten artykuł poprowadzi Cię przez proces konfiguracji HTTPS do lokalnego rozwoju, wprowadzając narzędzia takie jak Mkcert, aby uprościć proces.

Rola localhost i funkcje dostępne tylko przez HTTPS

localhost to specjalna domena, która potrafi obsługiwać wiele funkcji dostępnych tylko przez HTTPS, takich jak pracownicy usługowi, bezpieczne ciasteczka, HTTP/2 i inne interfejsy API przeglądarki mogą dobrze działać pod http://localhost:xxxx, więc nie zawsze potrzebujesz lokalnego HTTPS, spróbuj najpierw localhost!

Wypróbuj tunele Cloudflare

Wcześniej omówione w tym artykule, tunele Cloudflare mogą łatwo udostępnić Twoją lokalną usługę w Internecie z gotowym HTTPS.

Konfiguracja lokalnego HTTPS

Czy te 2 opcje nie rozwiązały Twojego problemu? Zatem skonfigurujmy lokalny HTTPS. W poniższych krokach zakładamy, że lokalna nazwa domeny to example.com.

Krok 1: aktualizacja pliku hosts

Zanim zaczniemy upewnij się, że docelowa domena rozwiązuje się na Twój lokalny komputer, można to zrobić poprzez aktualizację pliku hosts. Otwórz /etc/hosts na Linux/macOS lub C:\Windows\System32\drivers\etc\hosts na Windows i dodaj następujące linie:

Krok 2: generowanie certyfikatów

Pierwsza rzecz o HTTPS to certyfikat. W produkcji, może to być zrobione za pomocą narzędzi jak "Let's encrypt" lub kupując certyfikaty od dostawców usług. Ale w lokalnym rozwoju, możemy generować certyfikaty bezpośrednio.

Mkcert to proste narzędzie bez konfiguracji, które tworzy certyfikaty deweloperskie zaufane lokalnie, z dowolnymi nazwami, które chcesz.

Najpierw, postępuj zgodnie z oficjalnym przewodnikiem, aby zainstalować mkcert, zakładając, że używasz macOS:

Dla Windows i Linux, sprawdź ten link.

Teraz, gdy mkcert jest gotowy do użycia, uruchom tę komendę, aby wygenerować lokalne CA i przechowywać główny certyfikat w Twoim zaufanym magazynie systemowym. Aby dowiedzieć się więcej o "CA" i certyfikatach, sprawdź dokumentację od Cloudflare.

Następnie, wygeneruj lokalny certyfikat SSL

To utworzy pliki example.com.pem i example.com-key.pem w Twoim katalogu.

Krok 3: konfiguracja HTTPS w twojej aplikacji

Z gotowymi plikami certyfikatów, możesz teraz włączyć HTTPS w swojej aplikacji. W przeciwieństwie do środowiska produkcyjnego, gdzie odwrotne proxy jak Nginx obsługuje HTTPS, w lokalnym rozwoju możemy skonfigurować to bezpośrednio w aplikacjach internetowych. Weźmy jako przykład Express.

Stwórz prosty serwer Express za pomocą następującego kodu:

Uruchom aplikację i odwiedź https://example.com, aby zobaczyć swoją bezpieczną aplikację Express w akcji.

Włącz HTTPS dla Logto OSS

Logto OSS wymaga domyślnie HTTPS, z wyjątkiem localhost, jeśli chcesz uruchomić Logto lokalnie z inną domeną, musisz skonfigurować lokalny HTTPS.

  1. Skonfiguruj Logto: Postępuj zgodnie z linkiem, aby skonfigurować Logto na swoim lokalnym komputerze: https://docs.logto.io/docs/get-started/.
  2. Przygotuj certyfikaty: Użyj mkcert, aby wygenerować dwa pliki .pem i umieść je w katalogu.
  3. Ustaw zmienne środowiskowe: Podaj zarówno HTTPS_CERT_PATH, jak i HTTPS_KEY_PATH, aby włączyć HTTPS przez Node, sprawdź ten link aby dowiedzieć się więcej.

Podsumowanie

Konfiguracja HTTPS dla lokalnego rozwoju nie jest tak skomplikowana, jak mogłoby się wydawać. Z pomocą narzędzi takich jak Mkcert, generowanie zaufanych lokalnych certyfikatów staje się szybkim i łatwym procesem. Chociaż localhost często obsługuje wiele funkcji dostępnych tylko przez HTTPS, są chwile, kiedy potrzebujesz pełnego wsparcia HTTPS, i ten przewodnik pomoże Ci to osiągnąć. Niezależnie od tego, czy testujesz API, pracujesz z Logto OSS, czy po prostu powielasz warunki produkcyjne, podążanie za tymi krokami zapewni Ci gotowość na bezpieczny, bezproblemowy rozwój.