Exposing the ESP32 web server to internet

It is generally not recommended to access IoT web servers, like those hosted on ESP32, from the internet without proper security measures. These devices can be vulnerable to attacks such as unauthorized access, being co-opted into botnets or cause other kind of damages depending on the device(i would not take the risk). Additionally, using an ESP32 as a web hosting server is not practical due to challenges like exposing ports, handling traffic loads, and potential security risks. That said, it can be a great learning experience if you want to try it out or showcase it to your friends.

Portforwarding in Router

One option is to set up port forwarding on your router, mapping an external IP and port (e.g., public IP 202.xx.xx.10) to the ESP32's private IP and port (e.g., 192.168.56.101). However, most home networks use dynamic public IP addresses assigned by the ISP, which can change over time. This can make the setup unreliable and may not work in some cases. To ensure consistent access, you may need to configure a static public IP address, which usually involves contacting your ISP and may come with additional costs.

You can also use services like No-IP along with port forwarding and you can use a dynamic IP address. If your router supports it, you can configure DDNS or No-IP directly in the router settings. You can find more details on No-IP's official site here. However, keep in mind that this approach might not work with some ISPs that block open ports on dynamic IP addresses.

Tunneling

In the Tunneling option, you don't need a static IP address, but you will need to use an external service that provides tunneling. To make this work, you must install a client on your PC or Raspberry Pi (not the Pico) and run the client to establish the tunnel (Not fun, i know). You can't run this client on the ESP32. Once the tunnel is set up, you can access the server using the URL generated by the provider.

You can use services like ngrok or Cloudflare Tunnel. To get started with ngrok, you can check out the official guide here. For Cloudflare Tunnel, the official guide is available here.

ngrok example

For example, when using ngrok, I first signed up on their portal and obtained an authentication token. After that, I ran the client on my computer and added the token using the command ngrok config add-authtoken MY_AUTH_TOKEN.

To establish the tunnel, I ran the following command: ngrok http 192.168.0.101:80. Here, 192.168.0.101 is the IP address of the ESP32. The client then generated a public URL under the ngrok domain. I was able to access this URL from a different network(e.g: phone network) to confirm that the tunnel was working correctly.