Enabling HTTPS for your localhost developments using Docker and ngrok 🤘

Did you ever need to expose your localhost urls to the outside world with https? Well there are many ways to do that with http but… I will be focusing my article on using ngrok with docker containers running mac OS X.

Prerequisites

1. Internet access of-course with a browser of your choice
2. Docker installed (I will be using Docker Desktop)
3. Basic understanding of docker usage and one or two commands
4. Firewall turned off (to be on the safe side!!!)

Let’s begin…

What-the-heck is ngrok?

In simple terms, ngrok is a tool for exposing local services to the internet. Of course, there is plenty of other use cases that ngrok is capable of :) I will focus only on getting your development environment HTTPS friendly. You can read more about ngrok over here.

Step 1: I will use nginx as my web server to host a basic html page in my local environment using port 80.

Run sudo docker pull nginx in your terminal

this command will download the official nginx image from DockerHub public repository.

Step 2: Let’s start a new nginx container using the following command

Run sudo docker run --name docker-nginx -p 80:80 nginx

go to your web browser and type http://localhost and you should see Welcome to nginx! (Well if you don’t, make sure nginx service has started)

Step 3: Here comes the interesting part…. We have to install & run ngrok and luckily there is a popular docker image by wernight/docker-ngrok which can be found here. You can go ahead and download the image and let’s see how we can run a new container.

Run docker run — rm -p 4040:4040 -e NGROK_PORT=“host.docker.internal:80” wernight/ngrok

Here we bind ngrok port 4040 to the host machine so that we can run ngrok inspector in the browser to see all incoming requests accessing our docker-nginx container.

Make sure to use NGROK_PORT as an environment variable to be able to connect from our ngrok container to the docker-nginx container which is already running on localhost port 80.

About “host.docker.internal:80”, The host.docker.internal is a special DNS name that resolves to the internal IP address associated with the host machine. I will use port 80 here since nginx is listening to http://localhost. Everything else is self-explanatory :)

Note: If you have a paid ngrok account then you need to pass NGROK_AUTH and NGROK_SUBDOMAIN environment variables. For demonstration purposes, I have used a free account.

Step 4: You’re all set! Open a new tab in your browser and type http://localhost:4040 You should see two ngrok urls given on the page. E.g. http://885dedb0.ngrok.io/ and https://885dedb0.ngrok.io/ (If you have a paid account you will see your subdomain urls). One url with HTTP and the other with HTTPS. Go ahead and open it in a new tab and you should see Welcome to nginx! page.

Figure 1 — Screengrab of my nginx https page using ngrok

In Inspect page should be able to see all incoming traffic to your docker-nginx container. The status page will give you more details about key metrics such as no of requests, connection duration etc.

If you’re afraid of CLI, Don’t worry, you can use Kitematic which comes pre-installed with Docker Desktop. Just open Kitmatic and you have everything you need in there to get started right away.

Well…. That’s all there is :)

“Your comments and suggestions would be greatly appreciated… I will make the necessary changes to address those.

…and by the way, don’t forget to clap and follow me.”