Découvrez comment implémenter HTTPS local dans votre flux de travail de développement avec des outils comme Mkcert et des guides étape par étape pour Express.js et Next.js.
Lors du développement d'applications web, certains scénarios exigent HTTPS, même dans un environnement local. Que vous intégriez des API tierces sécurisées, testiez des fonctionnalités uniquement HTTPS comme les service workers et HTTP/2, ou répliquiez les conditions de production pour assurer un déploiement sans faille, HTTPS devient crucial. De plus, certaines API des navigateurs—telles que la géolocalisation, les notifications push, et la gestion des identifiants—nécessitent un contexte sécurisé pour fonctionner efficacement.
Par exemple, Logto OSS nécessite HTTPS par défaut sauf pour localhost, dans de tels cas, apprendre à configurer HTTPS pour le développement local peut vous faire gagner du temps. Cet article vous guidera à travers la configuration de HTTPS pour le développement local, en présentant des outils comme Mkcert pour simplifier le processus.
localhost et les fonctionnalités uniquement HTTPSlocalhost est un domaine spécial qui peut gérer de nombreuses fonctionnalités uniquement HTTPS comme les service workers, les cookies sécurisés, HTTP/2 et d'autres API de navigateur peuvent fonctionner correctement sur http://localhost:xxxx, donc vous n'avez pas toujours besoin de HTTPS local, essayez d'abord localhost !
Précédemment introduits dans cet article, les tunnels Cloudflare peuvent facilement exposer votre service local à Internet avec HTTPS prêt à l'emploi.
Les 2 options ne peuvent pas résoudre votre problème ? Alors configurons le HTTPS local. Dans les étapes suivantes, nous supposons que le nom de domaine local est example.com.
Avant de commencer, assurez-vous que le domaine cible résout vers votre machine locale, cela peut être fait en mettant à jour le fichier hosts. Ouvrez /etc/hosts sur Linux/macOS ou C:\Windows\System32\drivers\etc\hosts sur Windows, et ajoutez les lignes suivantes :
La première chose concernant HTTPS est une certification. En production, cela peut être fait par des outils tels que "Let's encrypt" ou acheter des certificats auprès de vos fournisseurs de services. Mais en développement local, nous pouvons générer des certificats directement.
Mkcert est un outil simple sans configuration pour créer des certificats de développement localement fiables avec tous les noms que vous souhaitez.
Tout d'abord, suivez le guide officiel pour installer mkcert, en supposant que vous utilisez macOS :
Pour Windows et Linux, consultez ce lien.
Maintenant que mkcert est prêt à être utilisé, exécutez cette commande pour générer une CA locale et stocker le certificat racine dans votre magasin de confiance système. Pour en savoir plus sur « CA » et les certificats, consultez la documentation de Cloudflare.
Ensuite, générez un certificat SSL local
Cela crée les fichiers example.com.pem et example.com-key.pem dans votre répertoire.
Avec les fichiers de certificat prêts, vous pouvez maintenant activer HTTPS dans votre application. Contrairement à l'environnement de production où un proxy inversé comme Nginx gère le HTTPS, en développement local, nous pouvons le configurer directement dans les applications web. Prenons Express comme exemple.
Créez un serveur Express simple avec le code suivant :
Exécutez l'application et visitez https://example.com pour voir votre application Express sécurisée en action.
Logto OSS nécessite HTTPS par défaut, sauf pour localhost. Si vous souhaitez exécuter Logto localement avec un autre domaine, vous devrez configurer HTTPS local.
mkcert pour générer deux fichiers .pem et placez-les dans un répertoire.HTTPS_CERT_PATH et HTTPS_KEY_PATH pour activer HTTPS via Node, consultez ce lien pour en savoir plus.Configurer HTTPS pour le développement local n'est pas aussi compliqué qu'il n'y paraît. Avec l'aide d'outils comme Mkcert, générer des certificats locaux de confiance devient un processus rapide et facile. Alors que localhost gère souvent de nombreuses fonctionnalités uniquement HTTPS, il y a des moments où vous avez besoin d'un support complet HTTPS, et ce guide vous y aide. Que vous testiez des API, travailliez avec Logto OSS, ou répliquiez simplement les conditions de production, suivre ces étapes garantira que vous êtes prêt pour un développement sécurisé et sans faille.