Ngrok Mac Brew

| 30-04-2021
[RAND-1-100] Comments



If you’ve ever faced any limitations with ngrok, then it’s pretty easy to roll a custom solution. ngrok works, but if you find yourself needing multiple https domains for local development, you will have to upgrade to a paid plan, and the cost could add up pretty quickly. For me, this didn’t make financial sense since I had access to free cloud VMs.

In this tutorial, I will show you how to build a ngrok alternative using Inlets as an exit server and Caddy as a reverse proxy for HTTPS traffic. We will then map a subdomain we own to the Droplet’s public IP address for ease of access.

Setup the VM

Click here to create an Ubuntu Droplet on digital ocean, feel free to configure as required.

  1. VS Code is available on Windows, Mac, and also in your browser after you finish reading! We can install ngrok using homebrew or manually: Homebrew: brew cask install ngrok.
  2. Jul 17, 2020 VS Code is available on Windows, Mac, and also in your browser after you finish reading! We can install ngrok using homebrew or manually: Homebrew: brew cask install ngrok.
2020

Brew cask install ngrok Once you’ve installed ngrok, you will need to install your authtoken. To find YOURTOKEN, go to your ngrok dashboard. The parameter -bind-tls=true will force Ngrok only to give you an HTTPS version. Since Angular apps often appear on port 4200, this parameter -host-header='localhost:80' 4200 creates a port forward which essentially masks the port. Ngrok is a cool service for creating public URLs of the local sites. This service comes handy when we want to share our local work to remote customers. Sometimes the developer needs this for the testing local site in different devices. Following are the steps to install ngrok in Mac.

You may set up your VM using any cloud provider of your choice, I choose to use DigitalOcean.

Kramer ks 400 guitar. 💡 GCP offers a $300 credit for first-time users

Map a subdomain to your Ubuntu instance

In your DNS host, create an A record pointing to your Droplets public IP address. Love sad song hd video download.

Your DNS host must support the ACME protocol since Caddy uses Let’s Encrypt for automatically provisioning SSL/TLS certificate.

If your DNS host does not support the ACME protocol, for example, GoDaddy, you can delegate your domain to a free DNS provider that does. Netlify offers free DNS management Topaz glow 2 serial key.

Setup Inlets and Caddy

SSH or password login into the Ubuntu Droplet we created.

  1. Install Inlets
  1. Install Caddy

Ngrok Mac Brew 2020

Exposing your local web server

  1. On your Droplet, start an inlet exit server

The token 123 is used here to keep things simple, you should use something more secure

  1. On your computer with the HTTP port you would like to expose, install inlets

If you are on a mac, install with Homebrew

  1. Start the web service you would like to expose, in my case, a rails app running on port 4000
  1. Expose the process to the the inlets exit server by starting an inlet client

Both the inlets client and server must have the same token

  1. Go to http://subdomain.example.com, you should be able to access your local web service. Notice we currently don’t have HTTPS
Mac

Enabling HTTPS

  1. On your Droplet, stop the inlets exit server and make it listen on a different port other than 80.

Caddy needs port 80 to handle web traffic

  1. Start Caddy as a reverse proxy, routing HTTPS traffic to your inlets exit server
  1. On your computer running the inlets client, stop the inlet client and start it up to allow for secure tunnelling using websocket
  1. Go to https://subdomain.example.com, you should be able to access your local web traffic via HTTPS.

Caddy took care of obtaining an SSL certificate on our behalf and will renew it when it gets expired, basically it’s certbot+nginx on steriod.

Ngrok Mac Brew Recipe

Automate with systemd

  1. Create this serivce unit file for inlets and place in /etc/systemd/system/inlets.service

Ngrok Brew Osx

Brew
  1. And for Caddy, place in /etc/systemd/system/caddy.service
  1. Stop the Caddy and inlets process and use systemctl to start them as a service.

Ngrok Mac Brew Recipe

  1. Now you can start, stop, restart or check the status of both services on your server using the usual systemctl status, start, stop, restart followed by the service name