Expondo um Hub ESP32 na Internet com Cloudflare Tunnel e ntfy.sh

Introdução

Em projetos de IoT baseados em ESP32, é comum precisar de um Hub central — um servidor local responsável por receber dados, exibir dashboards e coordenar a comunicação entre diversos módulos sensores e atuadores. Entretanto, quando esse Hub está atrás de um roteador doméstico, surge uma limitação: como acessá-lo remotamente pela Internet sem depender de IP fixo ou configurações complexas de NAT/port forwarding? Soluções tradicionais como DDNS ou VPNs podem funcionar, mas envolvem custos, dependências externas ou configurações avançadas. Com o Cloudflare Tunnel, e em particular o Quick Tunnel, torna-se possível publicar o servidor local com pouco esforço, sem expor a rede doméstica e sem exigir autenticação prévia com a conta Cloudflare. Cada inicialização gera automaticamente uma URL pública temporária no domínio trycloudflare.com. Para tornar essa arquitetura realmente prática, o projeto acrescenta um segundo componente essencial: o serviço de notificação ntfy.sh, que envia a nova URL pública diretamente ao usuário, sempre que o sistema é reiniciado.

Motivação

A motivação deste trabalho surgiu da necessidade de monitorar e controlar múltiplas estações ESP32 de forma remota, utilizando um Hub central com interface web local (via Nginx e HTML). Nos testes iniciais, verificou-se que o Quick Tunnel atende perfeitamente para uso doméstico, laboratorial e educacional, porém sua principal limitação é a não persistência da URL pública — ela muda a cada reinicialização. A solução foi criar um serviço automatizado (systemd) que:

1. Aguarda o túnel ser criado pelo cloudflared;
2. Extrai a nova URL do log do serviço;
3. Testa a acessibilidade do endpoint local;
4. Envia automaticamente uma notificação ao tópico do ntfy.sh configurado, contendo a nova URL de acesso público.

Pré-requisitos

Antes de iniciar a configuração do túnel e das notificações automáticas, é importante garantir que o ambiente de base esteja pronto e funcional. A seguir, são listados os componentes de hardware e software necessários, bem como as etapas iniciais para acesso remoto via mDNS — um recurso que facilita o uso do Putty a partir de outro computador na mesma rede local.

1. Ambiente Operacional

• Linux (Ubuntu 24.04.02 LTS ou superior) — executando num notebook com 8Gb RAM;
• Raspberry Pi OS 64-bits— executando em Raspberry Pi 4 B com 4Gb RAM.

• O sistema operacional instalado e configurado;
• Acesso à Internet;
• E acesso local via terminal ou SSH.

2. Acesso remoto facilitado via mDNS

ssh dailton@domlinux.local

sudo apt update
sudo apt install avahi-daemon avahi-utils -y
sudo systemctl enable --now avahi-daemon

systemctl status avahi-daemon

sudo hostnamectl set-hostname <hostname>

sudo nano /etc/hosts

127.0.1.1 <hostname>

sudo systemctl restart avahi-daemon

ssh <user>@<hostname>.local

3. Pacotes essenciais

sudo apt install nginx curl systemd net-tools -y

• nginx — servidor web local (Hub ESP32);
• curl — ferramenta de requisições HTTP usada nos testes e notificações;
• systemd — responsável por gerenciar serviços e timers;
• net-tools — utilitários de rede como ss, ifconfig, etc.

4. Configuração no ntfy.sh

Arquitetura do Sistema

A figura a seguir apresenta a arquitetura geral da solução, destacando o papel de cada componente e o fluxo de comunicação entre eles:

Figura 1 - Componentes da Arquitetura o Sistema

• O servidor web Nginx, que hospeda o dashboard do Hub e as interfaces HTML para comunicação com os ESP32;
• O serviço cloudflared, responsável por criar o túnel reverso com o Cloudflare;
• O serviço cf-url-notify, que monitora os logs do túnel e envia a URL pública atual ao ntfy.sh.

[Hub ESP32 - Cloudflare Tunnel]
Nova URL: https://josh-commerce-ann-humidity.trycloudflare.com

1. O Linux/Raspberry Pi inicializa e inicia o serviço cloudflared;
2. O túnel é criado e uma nova URL pública é gerada;
3. O serviço cf-url-notify detecta a nova URL nos logs e testa sua acessibilidade;
4. A URL é enviada ao tópico configurado no ntfy.sh;
5. O usuário recebe a notificação e acessa remotamente o Hub via navegador.

1. Baixe o PuTTY no site oficial: 👉 https://www.putty.org
2. Instale e abra o aplicativo. Na tela principal, informe o host e a porta:
   • Host Name (or IP address): raspberrypi.local (ou o nome mDNS do seu Linux) → caso o mDNS não esteja ativo, use o IP da máquina.
   • Port: 22
   • Connection type: SSH
3. Clique em Open. Na primeira conexão, o PuTTY exibirá um aviso de segurança — confirme com Yes.
4. Faça login:

login as: <seu usuário>
password: ******

Figura 2 - Tela Inicial do Putty

Figura 3 - Tela de Login do Putty

Figura 4 - Tela do Putty Logado

sudo systemctl enable ssh
sudo systemctl start ssh

ssh usuario@meu-linux.local

Host: meu-linux.local
Port: 22

ping raspberrypi.local
ssh usuario@raspberrypi.local

ssh-keygen -t ed25519
ssh-copy-id usuario@meu-linux.local

Configuração do Ambiente de Rede e do Servidor Local

Nesta seção faremos a configuração do Hub para rodar em um Linux ou Raspberry PI fazendo o apontamento para duas aplicações rodando em ESP32's diferentes na mesma rede local. As duas aplicações ficarão disponíveis para o acesso direto  através da Internet sem ter IP público, sem domínio próprio registrado, sem liberação de portas pelo provedor de Internet, sem DNS dinâmico, etc. As duas aplicações já foram publicadas no Blog da Eletrogate. Sugerimos ao leitor dar uma olhada em cada projeto mencionado para melhor entendimento do tutorial aqui apresentado. São elas:

1. Controle Centralizado: ESP-01 com Relé e DHT11 via ESP-NOW usando ESP32 - rodando no IP local 192.168.18.15
2. ESP32 com Notificações via ntfy.sh - rodando no IP local 192.168.18.33

function pathBase() {
  // se a URL tiver /d/algumaCoisa no começo, preserve; senão, vazio
  const m = location.pathname.match(/^\/d\/\d+(?=\/|$)/);
  return m ? m[0] : ''; // ex.: "/d/1" ou ""
}

function inicializaWebSocket() {
  //const proto = location.protocol === 'https:' ? 'wss' : 'ws'; 
  //ws = new WebSocket(`${proto}://${location.host}/ws`);
  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
  const base  = pathBase();               // "/d/1" no túnel, "" na LAN
  ws = new WebSocket(`${proto}://${location.host}${base}/ws`);  
  ws.onmessage = (ev)=>{
    let msg;
    try { msg = JSON.parse(ev.data); } catch(e){ return; }

    if (msg.type === 'snapshot') {
      applySnapshot(msg.nodes);
    } else if (msg.type === 'update') {
      renderCard(msg);
    } else if (msg.type === 'remove') {
      removeCard(msg.mac);          
    }
  };
}

sudo apt update
sudo apt install nginx -y

sudo systemctl status nginx

sudo mkdir -p /var/www/hubesp32
sudo chown -R $USER:$USER /var/www/hubesp32

cat <<'EOF' > /var/www/hubesp32/index.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Hub ESP32 - Teste</title>
</head>
<body>
<h2>Hub ESP32 ativo!</h2>
<p>Este é o painel principal hospedado no Nginx local.</p>
<!-- ESP1 -->
<a class="card" href="/d/1/">Rede ESP-NOW — ESP01</a>
<br><br>
<!-- ESP2 -->
<a class="card" href="/d/2/">Notificações via ntfy.sh — ESP02</a>
</body>
</html>
EOF

cat <<'EOF' > /var/www/hubesp32/index.html
<!doctype html>
<html lang="pt-BR" data-theme="system">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <title>Hub ESP32</title>
  <style>
    /* ---------- Tema (variáveis) ---------- */
    :root{
      --bg:#0b0c10; --card:#11151b; --text:#e6e8eb; --muted:#9aa4b2; --accent:#00d2ff;
      --radius:18px; --shadow:0 8px 24px rgba(0,0,0,.25); --size:18px;
    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#f7f7fb; --card:#ffffff; --text:#262933; --muted:#5d6677; --accent:#0077ff; --shadow:0 8px 24px rgba(0,0,0,.08); }
    }
    /* Força claro/escuro quando usuário escolhe */
    [data-theme="light"]{
      --bg:#f7f7fb; --card:#ffffff; --text:#262933; --muted:#5d6677; --accent:#0077ff; --shadow:0 8px 24px rgba(0,0,0,.08);
    }
    [data-theme="dark"]{
      --bg:#0b0c10; --card:#11151b; --text:#e6e8eb; --muted:#9aa4b2; --accent:#00d2ff; --shadow:0 8px 24px rgba(0,0,0,.25);
    }

    /* ---------- Layout ---------- */
    html,body{height:100%;margin:0;}
    body{
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
      background:var(--bg); color:var(--text); font-size:var(--size);
      display:flex; align-items:center; justify-content:center; padding:24px;
    }
    .wrap{ width:100%; max-width:720px; }
    .card{
      background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
      padding:20px 18px; position:relative;
    }
    .title{ display:flex; align-items:center; gap:12px; margin:6px 6px 14px; }
    .title .logo{ width:36px; height:36px; display:grid; place-items:center;
      border-radius:12px; background:linear-gradient(135deg,var(--accent),#7f5af0); color:white; font-weight:800; }
    h1{ font-size:1.4rem; line-height:1.2; margin:0; }
    p.sub{ margin:2px 0 0; color:var(--muted); font-size:.95rem; }
    .grid{ display:grid; gap:14px; grid-template-columns:1fr; margin:12px 6px 4px; }
    @media (min-width:560px){ .grid{ grid-template-columns:1fr 1fr; } }
    .app{
      border:1px solid rgba(127,127,127,.18); border-radius:16px; padding:14px 12px;
      display:flex; flex-direction:column; gap:10px;
      background:linear-gradient(180deg, color-mix(in oklab, var(--card), #000 2%), var(--card));
    }
    .app h2{ margin:0; font-size:1.05rem; }
    .badges{ display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:.9rem;}
    .btn{
      appearance:none; -webkit-appearance:none; cursor:pointer; text-decoration:none;
      display:inline-flex; align-items:center; justify-content:center; gap:.6em;
      padding:12px 14px; border-radius:12px; font-weight:600; border:0;
      color:#fff; background:linear-gradient(135deg,var(--accent),#7f5af0);
      box-shadow:0 6px 16px rgba(0,0,0,.25);
    }
    .btn:active{ transform:translateY(1px); }
    .footer{ text-align:center; color:var(--muted); font-size:.9rem; margin-top:14px; }

    /* ---------- Alternador de tema ---------- */
    .theme-toggle{
      position:absolute; top:12px; right:12px;
      display:flex; align-items:center; gap:8px;
      background:transparent; border:1px dashed rgba(127,127,127,.35);
      color:var(--muted); border-radius:12px; padding:6px 10px; cursor:pointer;
      font-weight:600;
    }
    .theme-toggle:hover{ border-style:solid; }
    .theme-toggle .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent); }
    /* Tamanho bom em telas pequenas */
    @media (max-width:400px){
      :root{ --size:17px; }
      .btn{ padding:14px 16px; }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card">
      <button id="themeBtn" class="theme-toggle" aria-label="Alternar tema">
        <span class="dot"></span><span id="themeLabel">🖥️ Sistema</span>
      </button>

      <div class="title">
        <div class="logo">ESP</div>
        <div>
          <h1>Hub ESP32</h1>
          <p class="sub">Selecione uma aplicação</p>
        </div>
      </div>

      <div class="grid">
        <div class="app">
          <h2>Rede ESP-NOW de ESP01</h2>
          <div class="badges">
            <span>WebSocket ✔</span>
            <span>Painéis dinâmicos</span>
          </div>
          <a class="btn" href="/d/1/">Abrir aplicação</a>
        </div>

        <div class="app">
          <h2>Notificações via Ntfy.sh</h2>
          <div class="badges">
            <span>Formulário de envio</span>
            <span>Proxy /send</span>
          </div>
          <a class="btn" href="/d/2/">Abrir aplicação</a>
        </div>
      </div>

      <div class="footer">Protegido por autenticação • Cloudflare Quick Tunnel</div>
    </div>
  </div>

  <script>
    // -------- Alternador de tema --------
    const root = document.documentElement;
    const btn  = document.getElementById('themeBtn');
    const lab  = document.getElementById('themeLabel');

    // Estados possíveis: 'system' | 'light' | 'dark'
    function applyTheme(mode){
      root.setAttribute('data-theme', mode);
      localStorage.setItem('hubTheme', mode);
      lab.textContent = mode === 'light' ? '☀️ Claro' : mode === 'dark' ? '🌙 Escuro' : '🖥️ Sistema';
    }

    // Inicializa com preferência salva (ou 'system')
    applyTheme(localStorage.getItem('hubTheme') || 'system');

    // Alterna ciclicamente: system -> light -> dark -> system...
    btn.addEventListener('click', ()=>{
      const now = root.getAttribute('data-theme') || 'system';
      applyTheme(now === 'system' ? 'light' : now === 'light' ? 'dark' : 'system');
    });

    // Ajuste fino para telas com densidade alta
    if (window.devicePixelRatio && devicePixelRatio > 2) {
      document.documentElement.style.setProperty('--size','19px');
    }
  </script>
</body>
</html>
EOF

cat <<'EOF' > /var/www/hubesp32/index.html

<!doctype html>

<html lang="pt-br">

<head>

  <meta charset="utf-8">

  <title>Hub ESP32 - Teste</title>

</head>

<body>

  <h2>Hub ESP32 ativo!</h2>

  <p>Este é o painel principal hospedado no Nginx local.</p>

</body>

</html>

EOF

sudo nano /etc/nginx/sites-available/hubesp32

map $http_upgrade $connection_upgrade { default upgrade; "" close; }

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;

    auth_basic           "Hub ESP32";
    auth_basic_user_file /etc/nginx/.htpasswd;

    root /var/www/hubesp32;
    index index.html;

    # Garante que a raiz SEMPRE cai no nosso index.html
    location = / { try_files /index.html =404; }
    location /  { try_files $uri /index.html; }

    # Proxy ESP32 #1 (WebSocket/HTTP)
    location ^~ /d/1/ {
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        rewrite ^/d/1/(.*)$ /$1 break;
        proxy_pass http://192.168.18.15:80/;
    }

    # Proxy ESP32 #2 (ajuste o IP)
    location ^~ /d/2/ {
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        rewrite ^/d/2/(.*)$ /$1 break;
        proxy_pass http://192.168.18.33:80/;
    }

    # Rota exata /d/2/send -> envia POST direto ao ESP32-2
    location = /d/2/send {
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.18.33:80/send;
    }

    # Rota exata /send (quando o HTML usa action="/send")
    location = /send {
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://192.168.18.33:80/send;
    }

    location ~* \.(js|css|png|jpg|ico)$ {
        add_header Cache-Control "public, max-age=3600";
    }
}

sudo ln -s /etc/nginx/sites-available/hubesp32 /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

curl -I http://127.0.0.1/

HTTP/1.1 200 OK
Server: nginx/1.24.0 (Ubuntu)

sudo mkdir -p /etc/cloudflared
cd /usr/local/bin
sudo wget -O cloudflared https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64
sudo chmod +x cloudflared

cd ~
curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-arm64 -o cloudflared
chmod +x cloudflared
sudo mv cloudflared /usr/local/bin/cloudflared

cloudflared tunnel --url http://127.0.0.1:80

sudo nano /etc/systemd/system/cloudflared.service

[Unit]
Description=cloudflared (Quick Tunnel - 127.0.0.1:80)
After=network.target

[Service]
ExecStart=/usr/local/bin/cloudflared tunnel --no-autoupdate --url http://127.0.0.1:80
Restart=always
RestartSec=10
User=root

[Install]
WantedBy=multi-user.target

sudo systemctl daemon-reload
sudo systemctl enable --now cloudflared

sudo systemctl status cloudflared

journalctl -u cloudflared -n 30 --no-pager | grep trycloudflare

🧩 6. Definição de Credenciais do Hub

/etc/nginx/.htpasswd

sudo htpasswd -c /etc/nginx/.htpasswd <nome_usuario>

sudo apt update
sudo apt install apache2-utils

sudo htpasswd /etc/nginx/.htpasswd <novo_usuario>

cat /etc/nginx/.htpasswd

cat /etc/nginx/sites-available/hubesp32

auth_basic "Hub ESP32";
auth_basic_user_file /etc/nginx/.htpasswd;

• Se quiser mudar a senha: htpasswd /etc/nginx/.htpasswd <nome_usuario>
• Se quiser desativar o login temporariamente: basta comentar essas duas linhas no /etc/nginx/conf.d/hub.conf.

Automação com systemd e Notificações via ntfy.sh

O Quick Tunnel oferece acesso instantâneo à rede local, mas sua URL muda a cada inicialização. Para evitar a necessidade de consultar manualmente os logs, criaremos um serviço auxiliar (cf-url-notify) que:

1. Monitora a criação do túnel no journalctl;
2. Extrai a nova URL pública gerada pelo Cloudflare;
3. Aguarda a propagação da URL (aguardando resposta HTTP 200);
4. Envia automaticamente uma notificação ao ntfy.sh, contendo o link direto de acesso ao Hub ESP32.

sudo tee /etc/systemd/system/cloudflared.service >/dev/null <<'EOF'
[Unit]
Description=cloudflared (Quick Tunnel - 127.0.0.1:80)
After=network-online.target
Wants=network-online.target

[Service]
Type=simple
ExecStart=/usr/local/bin/cloudflared tunnel --url http://127.0.0.1:80
Restart=always
RestartSec=5
User=root

[Install]
WantedBy=multi-user.target
EOF

sudo systemctl daemon-reload
sudo systemctl enable --now cloudflared.service
sudo systemctl status cloudflared.service --no-pager -n 20

sudo nano /usr/local/bin/cf-url-notify.sh

#!/bin/bash
# cf-url-notify.sh - Monitora logs do Cloudflared e envia a URL pública via ntfy.sh
# Autor: Dailton de Oliveira Menezes (projeto Hub ESP32 com Cloudflare Tunnel)

set -e

TOPIC="dom_07c2_07e9_alerts"    # Tópico de destino no ntfy.sh
SERVICE="cloudflared.service"
TMPFILE="/tmp/cf_url_current"
NTFY_URL="https://ntfy.sh/${TOPIC}"

echo "[cf-url-notify] Aguardando URL pública do serviço ${SERVICE} (boot atual)..."

# Aguarda até o Cloudflared gerar a URL
URL=""
for i in {1..60}; do
  URL=$(journalctl -u ${SERVICE} -b --no-pager | grep -o 'https://[a-zA-Z0-9.-]*\.trycloudflare\.com' | tail -n1)
  if [ -n "$URL" ]; then
    echo "[cf-url-notify] URL detectada: $URL"
    break
  fi
  sleep 5
done

if [ -z "$URL" ]; then
  echo "[cf-url-notify] Nenhuma URL detectada após o tempo limite."
  exit 1
fi

# Evita reenvio da mesma URL
if [ -f "$TMPFILE" ] && grep -q "$URL" "$TMPFILE"; then
  echo "[cf-url-notify] Mesma URL já enviada neste boot: $URL (nada a fazer)"
  exit 0
fi

# Testa a disponibilidade da URL
for i in {1..10}; do
  if curl -s --max-time 3 -I "$URL" | grep -q "200"; then
    echo "[cf-url-notify] URL acessível."
    break
  fi
  echo "[cf-url-notify] Aguardando URL ficar acessível..."
  sleep 10
done

# Envia notificação
MESSAGE="Nova URL pública do Hub ESP32 disponível:"
curl -s -X POST \
  -H "Title: 🌐 Hub ESP32 Online" \
  -H "Priority: high" \
  -H "Tags: globe_with_meridians,rocket" \
  -d "${MESSAGE} ${URL}" \
  "${NTFY_URL}"

echo "$URL" > "$TMPFILE"
echo "[cf-url-notify] Notificação enviada: $URL"

sudo chmod +x /usr/local/bin/cf-url-notify.sh

sudo nano /etc/systemd/system/cf-url-notify.service

[Unit]
Description=Enviar URL do Quick Tunnel para ntfy.sh
After=cloudflared.service
Requires=cloudflared.service

[Service]
ExecStart=/usr/local/bin/cf-url-notify.sh
Type=oneshot
User=root
RemainAfterExit=true

[Install]
WantedBy=multi-user.target

sudo systemctl daemon-reload
sudo systemctl enable cf-url-notify.service
sudo systemctl start cf-url-notify.service

journalctl -u cf-url-notify.service -n 30 --no-pager

[cf-url-notify] Aguardando URL pública do serviço cloudflared (boot atual)...
[cf-url-notify] URL detectada: https://lucky-wavey-puma.trycloudflare.com
[cf-url-notify] URL acessível.
[cf-url-notify] Notificação enviada: https://lucky-wavey-puma.trycloudflare.com

sudo reboot

1. O serviço cloudflared criará automaticamente um novo túnel;
2. O serviço cf-url-notify detectará a nova URL e enviará a notificação ao ntfy.sh;
3. Você receberá no seu dispositivo a nova URL pública funcional do Hub ESP32.

1. O servidor web local (Hub ESP32) está acessível pela rede interna e externa;
2. O Cloudflare Tunnel inicia automaticamente a cada boot e gera uma nova URL pública;
3. O serviço cf-url-notify detecta essa nova URL e envia corretamente a notificação ao ntfy.sh;
4. O sistema permanece funcional mesmo após reinicializações ou perda temporária de conexão com a Internet.

curl http://127.0.0.1

<h2>Hub ESP32 ativo!</h2>

http://<IP_DO_LINUX_LOCAL>

http://192.168.18.18

journalctl -u cloudflared -n 30 --no-pager

INF | https://josh-commerce-ann-humidity.trycloudflare.com

journalctl -u cf-url-notify.service -n 20 --no-pager

[cf-url-notify] URL detectada: https://josh-commerce-ann-humidity.trycloudflare.com
[cf-url-notify] URL acessível.
[cf-url-notify] Notificação enviada: https://josh-commerce-ann-humidity.trycloudflare.com

sudo reboot

1. Aguarde cerca de 1 a 2 minutos;
2. Verifique se uma nova notificação chegou com uma nova URL pública;
3. Teste o acesso remoto clicando no link recebido.

1. Desconecte temporariamente o cabo de rede (ou desligue o Wi-Fi);
2. Aguarde cerca de 30 segundos;
3. Reconecte a rede e observe os logs:

sudo journalctl -u cloudflared -n 20 --no-pager

• O Hub ESP32 é acessível via rede local (http://192.168.x.x);
• O Quick Tunnel é iniciado automaticamente em cada boot;
• O ntfy.sh recebe e entrega uma notificação contendo a nova URL pública;
• Acesso remoto seguro e contínuo sem necessidade de IP fixo ou redirecionamento de portas.

Adicionando novos ESP32 ao Hub

Para adicionar mais ESP32 ao Hub, basicamente, será necessário alterar os arquivos de configuração do Hub e o index.html. Para ver o arquivo do Hub:

cat /etc/nginx/sites-available/hubesp32

• Caminhos estáveis no Hub:

  • https://<URL_PUBLICA>/d/1/ → encaminha para http://192.168.18.15/

  • https://<URL_PUBLICA>/d/2/ → encaminha para http://192.168.18.33/

  • (adicione quantos precisar: /d/3/, /d/4/ …)

• Mantemos o sufixo / no final para facilitar “caminhos relativos” das páginas do ESP.

Dica: fixe IPs dos ESP32 via DHCP reservation no seu roteador para não perder o mapeamento.

Configuração do Nginx (reverse proxy + WebSocket)

sudo nano /etc/nginx/sites-available/hubesp32

 # Proxy ESP32 #3 (ajuste o IP)
location ^~ /d/3/ {
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
rewrite ^/d/3/(.*)$ /$1 break;
proxy_pass http://192.168.18.50:80/;
}

sudo nano /var/www/hubesp32/index.html

<!-- ESP3 --> 
<a class="card" href="/d/3/">Nova Aplicação — ESP03</a>

sudo nginx -t
sudo systemctl reload nginx

 # Rota exata /send (quando o HTML usa action="/send")
location = /send {
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://192.168.18.33:80/send;
} 

Operação, logs e troubleshooting

Checagens rápidas (sanity checks) A) Nginx local

# Teste de sintaxe
sudo nginx -t

# Está ativo?
systemctl is-active nginx && systemctl is-enabled nginx

# Responde na 80?
curl -I --max-time 3 http://127.0.0.1/

# Status do serviço
sudo systemctl status cloudflared --no-pager -n 30

# Últimas linhas de log (boot atual)
journalctl -b -u cloudflared -n 80 --no-pager

# Ver URL pública atual (a partir do log)
journalctl -b -u cloudflared --no-pager \
  | grep -Eo 'https://[a-z0-9-]+\.trycloudflare\.com' \
  | tail -1

# Deve retornar HTTP 200/401/301 (dependendo do seu setup)
curl -I --max-time 3 http://127.0.0.1/d/1/
curl -I --max-time 3 http://127.0.0.1/d/2/

# Acessos
sudo tail -n 200 /var/log/nginx/access.log

# Erros (proxy, upstream, WebSocket, etc.)
sudo tail -n 200 /var/log/nginx/error.log

# Filtrar um ESP específico
sudo grep '/esp1/' -n /var/log/nginx/access.log | tail -n 50

journalctl -b -u cloudflared -n 200 --no-pager

systemctl list-timers | grep cf-url-notify
journalctl -u cf-url-notify.service -n 80 --no-pager

• Network → WS: confirme que o upgrade do WebSocket virou 101 Switching Protocols.

• Frames: verifique se chegam mensagens snapshot/update.

• Console: erros de CORS, Mixed Content, TypeError: ws is undefined, etc.

# 1) Nginx
sudo nginx -t && sudo systemctl restart nginx

# 2) Cloudflared
sudo systemctl restart cloudflared
sleep 5
journalctl -b -u cloudflared --no-pager \
  | grep -Eo 'https://[a-z0-9-]+\.trycloudflare\.com' | tail -1

# 3) ESP(s) — se necessário
# (reinicie o dispositivo físico ou via OTA)

PUB=$(journalctl -b -u cloudflared --no-pager \
  | grep -Eo 'https://[a-z0-9-]+\.trycloudflare\.com' | tail -1)

# Hub (página inicial)
curl -I --max-time 6 "$PUB/"

# ESP1 via Hub
curl -I --max-time 6 "$PUB/esp1/"

# Envio POST (se tiver encurtador)
curl -i --max-time 6 -X POST "$PUB/esp2/send" -d 't=1'

Abra https://URL_PUBLICA/d/1/, pressione F12 > Network > WS, confirme 101 e frames chegando.

# (se estiver usando htpasswd)
sudo htpasswd /etc/nginx/.htpasswd seu_usuario
sudo systemctl reload nginx

•  O Hub abre em http://127.0.0.1/?

•  A URL pública aparece no journalctl -b -u cloudflared?

•  O card do ESP abre localmente (curl -I http://127.0.0.1/esp1/)?

•  O mesmo card abre pela URL pública?

•  Para WS: status 101 e frames?

•  POSTs retornam 2xx?

•  Logs do Nginx/Cloudflared mostram erro? Qual?

•  IPs dos ESPs estão fixos e respondendo na LAN?

• As IA's podem ajudar muito na solução de problemas. Neste projeto usei muito o ChatGPT.

Telas do Hub

Figura 5 - Tela do Hub no Desktop

Figura 6 - Tela do Hub no Celular

Figura 7 - Tela Simples do Hub no Celular

Figura 8 - Tela App1 do Hub no Desktop

Figura 9 - Tela App1 do Hub no Celular

Figura 10 - Tela App2 do Hub no Desktop

Figura 11 - Tela App2 do Hub no Celular

Telas do Serviço de Notificação ntfy.sh

Figura 12 - Tela Web do Serviço de Notificação Ntfy.sh

Figura 13- Tela do App do Serviço de Notificação Ntfy.sh

Demonstração

Referências

💻 Sistemas Operacionais

• Ubuntu Linux (Download oficial) 👉 https://ubuntu.com/download Página oficial da Canonical com versões Desktop e Server. Recomendado para máquinas x86.
• Raspberry Pi OS (Instalação e Imager Tool) 👉 https://www.raspberrypi.com/software/ Contém o Raspberry Pi Imager, usado para gravar o sistema no cartão microSD e preparar o Pi para o primeiro boot.

🔐 Acesso Remoto e SSH

• PuTTY (Cliente SSH para Windows) 👉 https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html Ferramenta gratuita e leve para acessar o Linux ou Raspberry Pi via rede local usando protocolo SSH.
• Habilitando mDNS (acesso com “.local”) no Linux e Windows 👉 https://wiki.archlinux.org/title/Avahi Documentação do Avahi, o serviço de resolução mDNS que permite conectar ao host pelo nome meu-linux.local em vez de IP.

🌐 Serviços e Comunicação

• ntfy.sh (Serviço de Notificações via HTTP) 👉 https://ntfy.sh Plataforma open-source para envio de notificações via HTTP, MQTT ou app mobile. Ideal para receber alertas automáticos (como a URL pública do Quick Tunnel).
• Cloudflare Tunnel (Quick Tunnel e Named Tunnel) 👉 https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/ 👉 https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/do-more-with-tunnels/trycloudflare/ 👉 https://blog.cloudflare.com/quick-tunnels-anytime-anywhere/ Documentação oficial do Cloudflare explicando o funcionamento dos túneis seguros e as diferenças entre Quick e Named Tunnel.

⚙️ Servidor e Componentes

• Nginx (Servidor Web leve e eficiente) 👉 https://nginx.org/en/docs/ Página oficial do projeto Nginx com documentação e exemplos de configuração.
• OpenSSL (Geração de chaves e certificados SSH) 👉 https://www.openssl.org/docs/ Ferramenta usada para geração de chaves e suporte a conexões seguras, útil em projetos avançados.

💡 Leituras Complementares

• Documentação oficial do Raspberry Pi OS👉 https://www.raspberrypi.com/documentation/computers/configuration.html Guia completo sobre configuração de rede, SSH e inicialização do sistema.
• Guia rápido de SSH no Ubuntu 👉 https://ubuntu.com/server/docs/service-openssh Explica como habilitar, testar e gerenciar o serviço SSH em servidores Ubuntu.
• Comparativo de Outras Formas de Acesso Remoto 👉 https://www.youtube.com/watch?v=pZRYYkOh_9A Compara a solução do Cloudflare com outras duas alternativas do ponto de vista de segurança e flexibilidade.

Conclusão

Este projeto buscou demonstrar que é possível construir uma infraestrutura segura e totalmente automatizada para hospedar dashboards e serviços locais de IoT sem depender de IPs válidos na Internet, ou domínio registrado, ou roteamento avançado ou conta cadastrada na Cloudflare com fornecimento de cartão de crédito. A combinação entre o Quick Tunnel da Cloudflare, o servidor Nginx e o sistema de notificações ntfy.sh fornece uma base extremamente flexível, especialmente para ambientes dinâmicos com endereços públicos variáveis. Embora o Quick Tunnel não ofereça persistência de endereço como o Named Tunnel, o uso de um serviço no Linux para monitorar a criação da URL e notificar automaticamente o administrador compensa essa limitação com eficácia. O resultado é um ambiente totalmente funcional, gratuito, que pode ser inicializado, atualizado e acessado remotamente com mínimo esforço. Além disso, a estrutura modular adotada — com o hub local servindo como ponto central de acesso aos módulos ESP32 — facilita futuras expansões, como a integração de novos dispositivos, sensores ou painéis de controle. Essa arquitetura distribui a complexidade, mas mantém o controle dentro da rede local. Buscamos também demonstrar que os mesmos princípios poderão ser aplicados, sem alterações significativas, para o Raspberry Pi 4. Isso demonstra a portabilidade e a escalabilidade da solução, tornando-a ideal para laboratórios, sistemas de automação residencial e projetos didáticos. Por fim, o projeto mostra como tecnologias de código aberto podem ser combinadas para entregar resultados profissionais. Espera-se que este guia sirva de base para novas ideias e inspire a criação de soluções ainda mais inteligentes e acessíveis. Com poucos recursos e um pouco de curiosidade, é possível transformar um simples servidor local em uma janela segura para o acesso de qualquer lugar do mundo.

Sobre o Autor

Alberto de Almeida Menezes tinho.menezes@gmail.com Bacharel em Engenharia de Áudio e Produção Musical pela Berklee College of Music.

Dailton de Oliveira Menezes dailton.menezes@gmail.com Bacharel em Ciência da Computação pela Universidade Federal de Minas Gerais.