Tutorial: Configurando Nginx Proxy Manager com DuckDNS e SSL para o Serviço NovoChat

Este tutorial detalhado guiará você através do processo de configuração do Nginx Proxy Manager (NPM) com um subdomínio DuckDNS e certificados SSL via DNS Challenge. O objetivo é resolver problemas de acesso a recursos como microfone em aplicações web (como o NovoChat) que exigem uma conexão HTTPS segura.

Introdução

Ao desenvolver e hospedar aplicações web, especialmente aquelas que utilizam recursos sensíveis do navegador como o microfone (através da API enumerateDevices), é crucial garantir que a conexão seja segura (HTTPS). Sem um certificado SSL válido, os navegadores modernos bloqueiam o acesso a esses recursos, resultando em erros como TypeError: Cannot read properties of undefined (reading 'enumerateDevices').

Este guia aborda a integração do Nginx Proxy Manager com o serviço de DNS dinâmico DuckDNS utilizando o método DNS Challenge.

Pré-requisitos

Servidor: VM com Docker e Docker Compose (ex: Ubuntu em Proxmox).
Nginx Proxy Manager (NPM): Instância em execução ou pronta para configurar.
DuckDNS: Conta ativa com subdomínio configurado (ex: novochat.duckdns.org).
Serviço Web: O serviço NovoChat rodando em containers.
NetBird (Opcional): Configurado se necessário para acesso interno.

Passo 1: Obtenha seu Token do DuckDNS

Acesse o DuckDNS.
Faça login e localize seu Token.

Exemplo de Token: xxx87e1b-e75c-xxx-9d16-xxxxxxxxxx4d

Passo 2: Configurar o Docker Compose para NPM

version: '3.8'
services:
  npm:
    image: 'jc21/nginx-proxy-manager:latest'
    container_name: nginx-proxy-manager
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
    environment:
      DISABLE_IPV6: 'true'

networks:
  default:
    name: nginx-proxy

Acesse o Painel: IP:81 (Login: admin@example.com / Senha: changeme).

Passo 3: Integração do Serviço NovoChat

Certifique-se de que os serviços estejam na mesma rede:

networks:
  NovoCht:
  nginx-proxy:
    external: true

services:
  frontend:
    # ... outras configs
    expose:
      - 80
    networks:
      - NovoCht
      - nginx-proxy

Passo 4: Configurar o Proxy Host

No NPM (Porta 81), em Hosts > Proxy Hosts:

Domain Names: novochat.duckdns.org
Forward Hostname: frontend
Forward Port: 80
Websockets Support: Ativado.

Passo 5: Certificado SSL via DNS Challenge

Na aba SSL do Proxy Host:

Selecione Request a new SSL Certificate.
Marque Use a DNS Challenge e escolha DuckDNS.
Insira: dns_duckdns_token = seu_token_aqui

Troubleshooting: Se der erro "KO", verifique se o subdomínio existe no painel DuckDNS e se a sintaxe do token está correta.

Passo 6: Forçar SSL

Após gerar, edite o host e marque Force SSL, HTTP/2 Support e HSTS Enabled.

Passo 7: Variáveis de Ambiente (.env)

Ajuste o .env-frontend:

FRONTEND_HOST=novochat.duckdns.org
REACT_APP_BACKEND_URL=https://novochat.duckdns.org/backend
BACKEND_PROTOCOL=https
BACKEND_PORT=443

Passo 8: Custom Location (Opcional)

Se o backend for acessado via /backend, adicione em Custom Locations:

Define Location: /backend
Forward Hostname: backend
Port: (ex: 4000)

Passo 9: Teste Final

Limpe o cache do navegador ou use aba anônima. Verifique o cadeado e as permissões de microfone.

Conclusão

Agora seu serviço NovoCht está seguro e com todas as funcionalidades de mídia operacionais via HTTPS!