Meus dois primeiros sites!

Pessoal,

Publiquei agora há pouco dois sites pessoais!

"Poxa, Jayme, que coisa velha!".

Bom, é a primeira vez que eu faço tudo sozinho, desde a criação dos arquivos HMTL no VSCode até a hospedagem e a publicação no meu próprio domínio.

Vem comigo que eu conto tudo isso!

A primeira coisa foi fazer o código HMTL. Foram dois códigos para duas páginas diferentes. Como vocês devem saber, afinal está na descrição do meu blog, eu sou médico anestesiologista e trabalho com pacientes que se submetem a cirurgias de grande porte. Ou seja, meus pacientes com frequência precisam de drogas vasoativas e eu uso alguns exames e dados hemodinâmicos para saber se está tudo bem ou se preciso ajustar alguma coisa.

Eu costuma utilizar algumas planilhas do Excel para fazer alguns cálculos, mas atualmente prefiro fazer isso na Web, em algum site. O problema era achar algum que fazia EXATAMENTE o que eu queria ou precisava naquele momento. Assim surgiu a ideia de transformar minhas planilhas em páginas e disponibilizá-las a quem quiser usar!

Os códigos estão todos em HMTL e são bem simples. Pedi a ajuda de IAs em alguns momentos para refinar alguma coisa ou então sugerir melhorias no código ou no layout. 

Mas o ponto que trazer é a publicação em si, não o código.

A primeira coisa é ter um domínio. E você pode comprar em vário locais. Eu comprei sem hospedagem, apenas o domínio.  Já falei disso aqui, mas vou repassar alguns pontos importantes.

Sugiro que vocês pesquisem bastante os domínios, pois os preços variam muito, principalmente a depender do TLD (Top Level Domain ou sufixo de domínio, o ".com" ou ".com.br"). Os TLDs da modinha, como .info, .app, .tech e outros podem custar algumas centenas de dólares a mais que os .com ou .com.br, mas essa é uma decisão individual. Eu registrei o meu através da Cloudflare pois queria um TLD ".com", a Cloudflare era mais barato que encontrei e eu queria utilizar o Cloudflare Tunnel para hospedar algumas coisas no meu Synology

Só que aqui é pouco diferente agora, porque estas páginas estão no GitHub. Sim, você cria uma conta gratuita no GitHub, cria um repositório e coloca o seu arquivo HTML intitulado index.html lá dentro.

Crie um novo repositório

Escolha o nome, certifique-se que seja PÚBLICO e crie o repositório

Escolha o arquivo da sua página para subir ou crie um novo

Se resolver criar, escolha o nome "index.html", digite ou copie o código e dê o "Commit"

O GitHub vai pedir para criar uma mensagem do commit e depois dê "Commit"

Essa é a primeira parte, criar o arquivo HTML e adicioná-lo ao repositório do GitHub. Agora vamos publicar á página!

Vá em "Settings" para acessar ss configurações

Vá em "Pages"

Em "Source", certifique-se que a opção "Deploy from a branch"; em "Branch", clique 

em "None" para colocar a pasta principal

Mude de "None" para "Main"

Deixe a pasta "/root" e salve

se você fez tudo certo, verá essa mensagem avisando que a página está sendo criada

Alguns minutos depois, a página foi criada e estará acessível neste endereço mostrado

Obviamente a nossa página não tem nada de útil, mas já está online!

Agora vamos à parte mais "espinhosa", customizar o domínio. Como eu disse para vocês, eu já comprei o meu domínio no Cloudflare, mas você pode comprar onde quiser. Mais uma vez, não precisa de comprar hospedagem porque estamos utilizando a hospedagem gratuita do GitHub, mas aqui é apenas para coisas bem simples, ok?

Acessando o site da Cloudflare, vamos para a página inicial:

Entre nas configurações do seu domínio

Vá até a parte de configurações do DNS

O GitHub necessita que estes quatro endereços acima estejam apontados no DNS do servidor do seu domínio. Estes endereços são públicos e são os endereços dos servidores de DNS do GitHub. Ao clicar em "Adicionar Registro", a tela abaixo vai abrir.

E estes são os campos a serem preenchidos. Maiores explicações, veja aqui e aqui. Os endereços tanto para IPV4 quanto IPV6 estão nas páginas recomendadas.

Preencha conforme a figura acima, uma entrada para cada IP (quatro para IPV4 e quatro para IPV6). Se o sinal de "Com proxy" estiver ativo, desative para "Somente DNS". Esse proxy ativado é o que ativa o Cloudflare Tunnel e vai exigir que você tenha uma forma de autorização para entrar no seu site. Se o objetivo for torná-lo privado ou se estiver hospedado em sua infra local, recomendo que deixe ativo, mas como meu objetivo é deixar publico E estou hospedado no GitHub, vou deixar desativado!

Depois, precisamos apontar o nome do domínio customizado para o GitHub e, novamente, para o Cloudflare.

No GitHub, dentro do GitHub Pages (onde mostra a sua página), vamos colocar o nome customizado no campo "Custom Domain":

Repare que o endereço da página é do GitHub e que o endereço customizado está em branco

Após colocar (1) o endereço customizado ("novo.jaymebc.com") e salvar (2), o endereço da página mudou (3) mas apareceu um erro de checagem do DNS (4)

Esse erro apareceu porque ainda não informamos ao Cloudflare que vamos utilizar esse domínio. Agora volte ao DNS do Cloudflare e vamos inserir mais um registro, com os dados abaixo:

Agora adicionamos o nome "novo" ao domínio "jaymebc.com" e o direcionamos ao GitHub. Voltando ao GitHub, vemos que agora o domínio está tendo seu DNS checado:

Aqui só nos resta esperar. Isso pode demorar de minutos até umas duas horas. Assim que o DNS for resolvido, ative a opção "Enforce HTTPS", por questões de segurança!

Pronto! Agora temos uma página pessoal, com nosso domínio, hospedada gratuitamente no GitHub e com certificação HTTPS.

Quer ver como ficaram os meus dois sites?

Vá em infusao.jaymebc.com e hemodinamica.jaymebc.com

Bom, esse post era sobre isso!

Até a próxima, pessoal!

Cloudflare Tunnel: melhor que VPN! O serviço que eu procurava para acesso remoto!

Pessoal,

Descobri um serviço excelente para acessar remotamente os computadores de casa com segurança: Cloudflare Tunnel!

Imagine que está fora de casa, seja no trabalho ou em uma viagem, e deseja acessar um computador ou seu NAS em casa. Existem algumas possibilidades. A mais tradicional, por segurança, é através de uma VPN (não essas VPNs pagas, mas um serviço com o OpenVPN ou WireGuard.). Outra possibilidade é escancarar seu computador expondo ele na internet através de uma autorização no seu firewall.

Aqui entra a esse túnel da Cloudflare: você instala um cliente dentro da sua rede (seja em Windows, Linux, Mac ou um container Docker) para criar uma conexão segura com a Cloudflare. Após essa etapa, criaremos um ou vários nomes para acessar os serviços internos (através de FQDNs - Fully Qualified Domain Names ou Nomes de Domínio Totalmente Qualificados, DNS Names ou registros CNAME).

Assim, por exemplo, pretendo usar para acessar meu Synology NAS sem precisar expô-lo através do Quickconnect ou abrindo o firewall para tanto. Posso simplicar e criar um 'synology.meudominio.com.br' para o NAS e passar para a Cloudflare qual o endereço IP privado e a porta. O Synology usa uma interface HTTP através da porta 5000, mas quando acessamos através desse túnel, essa interface se torna uma conexão HTTPS pela porta 443.

Só vejo vantagens: é um modo conveniente de acessar seu conteúdo privado, tem o redirecionamento de uma porta HTTP 5000 para a porta HTTPS e, uma vez que estamos conectados a um FQDN gerenciado pela Cloudflare, também ocultramos o nosso endereço IP WAN!!! Sério, é muita vantagem!!!

Talvez o grande  "inconveniente" seja a necessidade de ter um nome de domínio registrado. Pelo que procurei, esses domínios gratuitos como No-Ip e DuckDNS não servem para isso. Assim, eu optei por registrar um domínio para mim.

Sugiro que vocês pesquisem bastante pois os preços variam muito, principalmente a depender do TLD (Top Level Domain ou sufixo de domínio, o ".com" ou ".com.br"). Os TLDs da modinha, como .info, .app, .tech e outros podem custar algumas centenas de dólares a mais que os .com ou .com.br. Mas essa é uma decisão individual. Eu registrei o meu através da própria Cloudflare pois queria um TLD ".com" e a Cloudflare era mais barato que encontrei.

Indo em frente, é necessário um registro gratuito no Cloudflare. Após o registro e o login, você verá essa tela aqui:

A marcação "1" mostra o seu domínio ativo já cadastrado no Cloudflare. Caso não tenha um, é necessário adicionar o domínio clicando na marcação "2". Essa parte foge do escopo deste texto, então clique aqui para aprender a transferir seu domínio para a Cloudflare segundo as exigências dela. Asseguro que é bem simples. Basicamente você terá que trocar os nameservers de onde está hospedado o seu domínio pelos nameservers da Cloudflare.

Passada esta etapa, vamos criar o túnel! Clique no seu site (lá na marcação "1"). Deve aparecer uma tela com opções de serviços da Cloudflare. Desça e escolha a opção "Free". Deve ser pedido o seu cartão de crédito, mas nada será cobrado (se quiser ficar tranquilo, coloque um cartão virtual com apenas 5 dólares e que dure apenas um ou dois meses...).

Depois, tendo seu domínio devidamente registrado na Cloudflare, eles irão oferecer alguns serviços gratuitos para aumentar a segurança e velocidade de acesso (reescreve o endereço usando HTTPS, redireciona as requisições de HTTP para HTTPS e utiliza a compressão Brotli para acelerar o tempo de carregamento das páginas). Sugiro ativar tudo.

Agora os servidores da Cloudflare vão processar essas mudanças do registro do domínio e isso pode levar algum tempo, às vezes algumas horas. Você será notificado quando tudo estiver pronto (pelo email de cadastro na Cloudflare) e no painel da Cloudflare estará esta mensagem:

Clique nesse site e vamos criar o túnel:

Clique em Traffic -> Cloudflare Tunnel -> Launch Zero Trust Dashboard. Na tela que surgirá, a do Cloudflare Zero Trust, clique em Access -> Tunnels:

Escolha o nome do seu túnel e clique em "Save tunnel":

E agora escolha como irá instalar o conector na sua rede interna.

Como eu tenho um Synology NAS e ele fica ligado constantemente e hospeda uma página onde eu faço meu dashboard dos diversos serviços que rodam nele e em outros computadores, optei por instalar um container Docker nele para fazer isso.

Agora vá para o Docker do Synology e faça o seguinte:

Em Registro (1), digite Cloudflare para pesquisar (2) por esta imagem. Escolha a imagem cloudflare/cloudflared (3) e clique em baixar (4). Quando aparecer a janela para escolhar a marca, escolha "latest" (5) e clique em Selecionar (6) para iniciar o download da imagem. Feito isso, vamos preparar a imagem para executar:

Em Imagem (1), escolha a imagem que foi baixada (2) e vamos abrir para configurar. A primeira opção é para escolher a rede do container:

Agora vamos escolher o nome do container, ativar a reinicialização automática e escolher as configurações avançadas:

Após clicar em "Configurações avançadas", vamos precisar usar o comando para criar o container docker que o Cloudflare sugeriu mas será necessário editar algumas coisas. Copie para um editor de texto o comando do Docker e faça as mudanças. Tudo que está no retângulo vermelho será retirado e o que está em negrito continuará:

Após a edição, ficará assim:

Esse texto será colado nas Configurações avançadas, na aba "comando de execução":

Pronto! Clique em Salvar e depois em Avançar. Podemos executar agora com segurança. Quando voltarmos à página da Cloudflare, vamos ver isso aqui:

Pronto! A conexão foi bem sucedida! Clique em "Next"para criar os FQDN (os DNS names para acessarmos os serviços na nossa rede privada).

E é essa facilidade toda aí: como subdominínio, escolhi "nas". O domínio é o que você tem registrado (o seu <qualquercoisa.com.br>). Depois você coloca as configurações de como está acessando o serviço dentro da sua rede. O Synology é desse jeito: http://192.168.1.2:5000. Vejam que o túnel foi criado:

E é isso!

Só tem uma questão importantíssima! Quem souber esses FQDNs entrará na rede rapidamente! Assim, precisamos configurar um bloqueio. O Cloudflare Tunnel tem basicamente todos os serviços de SSO (Single Sign On) como veremos a frente. Inicialmente volte para a tela de iníico do Cloudflare Zero Trust e clique em "Settings" -> Authentication":

Perceba que apenas um modo de autenticação está ativado. Clique em "Add New" para escolher outros métodos:

E veja todos os métodos possíveis! Só fica inseguro quem quiser!

Esse método de One-time PIN já ajuda bastante. Ao tentar conectar no endereço, aparecerá essa tela:

Quem desejar entrar deverá ter um email cadastrado para acessar o túnel (sim, se você colocar outro email que não o cadastrado você não receberá o código de segurança). Digitando o email correto, o usuário receberá um email assim:

E esse código deverá ser digitado na página de acesso:

Pronto! Agora você consegue entrar.

Esse email é definido no menu da Cloudflare Zero Trust acessando: Access -> Applications e aí vcoê clica em "Add an aplication" -> Self-hosted e escolhe um nome e coloca o domínio. Interessante aqui é colocar um asterisco (sim, um "*" - coringa) no subdomínio para que essa regra de segurança valha para TODOS os serviços hospedados nesse domínio! Na página seguinte você escolhe as regras de segurança. Eu colocquei assim:

Dese modo, as mensagens são enviadas para o meu email pessoal, há bloqueio para acessos originários de alguns países conhecidos por ataques de hackers e, por padrão, preenchendo esses requisitos, o acesso é autorizado.

Há muita, muita coisa para fazer aqui ainda. Estou só aprendendo a usar essa ferramenta!

É isso, pessoal!

Sugestão de leitura: https://www.crosstalksolutions.com/cloudflare-tunnel-easy-setup/

Sugestão de vídeo: https://www.youtube.com/watch?v=ZvIdFs3M5ic