{"id":1337,"date":"2024-06-12T10:00:13","date_gmt":"2024-06-12T10:00:13","guid":{"rendered":"http:\/\/suimy.me\/?p=1337"},"modified":"2024-06-19T17:07:56","modified_gmt":"2024-06-19T17:07:56","slug":"how-to-run-localhost-with-https","status":"publish","type":"post","link":"http:\/\/suimy.me\/index.php\/2024\/06\/12\/how-to-run-localhost-with-https\/","title":{"rendered":"How to Run Localhost with HTTPS"},"content":{"rendered":"

SSL<\/a> (Secure Socket Layer) encrypts data transactions between a browser and server, enhancing the security of your website. While using HTTP for localhost is usually enough for development, sometimes you need to test it in HTTPS. For example, you may need to test a service worker, set secure cookies which need the site to load over HTTPS, or test third-party API that typically requires HTTPS such as an Auth or Payment type of APIs.<\/p>\n

Testing your site with SSL during development ensures all elements, including URLs and resources like CSS and JavaScript, function properly under HTTPS. This helps mirror the production environment more accurately, helping in smoother transitions when going live.<\/p>\n

In this article, we\u2019ll guide you through the process of enabling HTTPS on your localhost, ensuring you\u2019re prepared for any secure testing needs.<\/p>\n

Ready to get started? Let\u2019s go!<\/p>\n

Getting Started with mkcert<\/code><\/h4>\n

mkcert<\/code> simplifies the process of installing SSL certificates for localhost. Unlike the traditional methods that are often complex, mkcert<\/code> offers a straightforward approach. It sets up a locally trusted development certificate by automatically installing and trusting a local Certificate Authority (CA) on your system. This tool is compatible with macOS, Linux, and Windows, covering a wide range of development environments.<\/p>\n

If you\u2019re on macOS or Linux, you\u2019ll first need to install Homebrew<\/a>. Windows users should install Chocolatey<\/a>. With these tools in place, you can easily install mkcert<\/code> by running the following commands:<\/p>\n

\r\n\/\/ For macOS or Linux\r\nbrew install mkcert && brew install nss # \"nss\" is needed for Firefox support\r\n\r\n\/\/ For Windows\r\nchoco install mkcert\r\n<\/pre>\n
Installing SSL Certs<\/h4>\n
Begin by executing the command below to create a Certificate Authority (CA) that will sign your certificates:<\/p>\n
\r\nmkcert -install\r\n<\/pre>\n
It\u2019s important to keep the rootCA-key.pem<\/em> file secure and never share it. If compromised, an attacker could potentially intercept your secure connections to any site. Please handle this file with caution!<\/strong><\/p>\n
Following the creation of the CA, generate a certificate for the localhost<\/code> hostname using this command:<\/p>\n
\r\nmkcert localhost\r\n<\/pre>\n
This tool is also versatile enough to produce certificates for other hostnames or even local IP addresses, such as 127.0.0.1<\/code>. <\/p>\n
For instance:<\/p>\n
\r\nmkcert hongkiat.local www.hongkiat.local 127.0.0.1\r\n<\/pre>\n
Running an HTTP Server<\/h4>\n
With your SSL certificates ready, you can now launch your local server using HTTPS. For those utilizing Node.js, the http-server<\/a> package offers a straightforward method to start a server. You need to specify the paths to your certificate and key files. <\/p>\n
For instance, here\u2019s how to run a localhost server on port 8080<\/strong>:<\/p>\n
\r\nhttp-server -S -C localhost.pem -K localhost-key.pem -p 8080\r\n<\/pre>\n
Once running, your localhost can be accessed via HTTPS at https:\/\/localhost:8080<\/code>.<\/p>\n
 \"Localhost\"Localhost<\/span><\/span> <\/figure>\n
Running with Docker and Nginx<\/h5>\n
If Docker and Nginx are part of your setup, the following server configuration allows you to run HTTPS:<\/p>\n
\r\nserver {\r\n    listen 443 ssl;\r\n    server_name localhost;\r\n\r\n    ssl_certificate \/path\/to\/localhost.pem;\r\n    ssl_certificate_key \/path\/to\/localhost-key.pem;\r\n\r\n    location \/ {\r\n        root \/var\/www\/html;\r\n    }\r\n}\r\n<\/pre>\n
Link the necessary certificates and configuration files to your Docker container through a Docker Compose configuration file, as shown below:<\/p>\n
\r\nservices:\r\n    nginx: \r\n        image: nginx:latest \r\n        ports: \r\n        - \"8081:443\"\r\n        volumes: \r\n        - .\/localhost-key.pem:\/etc\/nginx\/certs\/localhost-key.pem\r\n        - .\/localhost.pem:\/etc\/nginx\/certs\/localhost.pem\r\n        - .\/nginx.conf:\/etc\/nginx\/conf.d\/default.conf\r\n        - .\/index.html:\/var\/www\/html\/index.html\r\n<\/pre>\n
Uninstall mkcert<\/code><\/h4>\n
If you decide to stop using HTTPS for local development or if you\u2019re switching to another method for handling SSL certificates, you might want to uninstall mkcert<\/code>.<\/p>\n
To remove mkcert<\/code> from your system, execute the following command:<\/p>\n
\r\nmkcert -uninstall\r\n<\/pre>\n
This command deletes the root CA from both your system and browser. You should also remove the root certificate file and any certificates pairs you\u2019ve generated:<\/p>\n
\r\nrm -r \"$(mkcert -CAROOT)\"\r\n<\/pre>\n
Conclusion<\/h4>\n
Implementing HTTPS on your local server is crucial for properly testing features such as service workers, secure cookies, and third-party APIs that require a secure connection. mkcert<\/code> provides an efficient way to generate and manage SSL certificates across various platforms and browsers, streamlining the process for developers.<\/p>\n
The post How to Run Localhost with HTTPS<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
SSL (Secure Socket Layer) encrypts data transactions between a browser and server, enhancing the security of your website. While using […]<\/p>\n","protected":false},"author":1,"featured_media":1339,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/1337"}],"collection":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/comments?post=1337"}],"version-history":[{"count":2,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/1337\/revisions"}],"predecessor-version":[{"id":1340,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/posts\/1337\/revisions\/1340"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media\/1339"}],"wp:attachment":[{"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/media?parent=1337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/categories?post=1337"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/suimy.me\/index.php\/wp-json\/wp\/v2\/tags?post=1337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}