Como eu criei um servidor caseiro para demonstração de sites e sistemas para clientes.

Servidor Caseiro

Meu objetivo é mostrar como ter um servidor na sua máquina de desenvolvimento. Você poderá utilizar o VsCode para mudar o projeto que será vísivil para o público em geral. A ideia é que o seu pc funcione exatamente como um servidor de hospedagem.

Para demonstração vou utilizar o react js, porém você poderá adaptar para qualquer outra linguagem ou método de desenvolvimento.

Requisitos Incicias

Primeiro temos que encaminhar os acessos do seu ip público (vísivel na internet) para seu computador (que será o nosso servidor).

Para começarmos você precisará acessar seu modem através do endereço de ip dele.

Para descobrir o endereço de ip do seu modem abra o prompt de comando e digite ipconfig (windows)

Descobrindo o ip do seu modem

Nós vamos pegar o endereço de ip onde está escrito Gateway Padrão, no meu caso é o 192.168.0.1

Não feche o prompt ainda, vamos usa-lo depois

Cole esse endereço de ip no seu navegador. Agora você precisará acessa-lo através do usuário e senha. (se não souber, geralmente essas informações ficam coladas no seu modem).

Ao acessar o seu modem encontre a opção "Port Forwarding" (Encaminhamento de portas). Cada modem tem uma interface diferente, então talvez seja necessário pesquisar sobre seu modem na internet.

Redirecionando do modem para seu pc

Quando encontrar a opção, crie um redirecionamento da porta 80 para a porta que o seu servidor escutará, no meu caso 3000, conforme a imagem. E no endereço de ip, coloque o endereço de ip local da sua máquina que atuará como um servidor, você poderá achar o ip da sua máquina no prompt de comando com o comando ipconfig na opção Endereço IPv4.

considere fixar o ip da sua máquina

Após esse processo salve e agora vamos para segunda etapa.

Testando seu servidor

Para testar eu criei um projeto no vscode em react com o comando npx create-react-app

Print do comando no meu vscode

Ao terminar de iniciar o projeto inicialize ele com o comando npm start Irá abrir uma aba no seu navegador com o conteúdo inicial do react

Agora vamos tentar acessar essa mesma página, só que pela internet. Pra isso você precisará do endereço de ip público do seu modem, que pode ser encontrado através desse site: https://meuip.com.br/

Ao econtrar seu endereço de ip público digite ele no navegador. Se tudo der certo você abrirá essa página:

Página publicada

Pronto, Tudo que você fizer de alteração no react poderá ser acessado através do seu endereço de ip exatamente como se fosse um servidor comum.

é possível associar seu endereço de ip a um domínio adquirido através do google domains, porém não abordei isso no tutorial, caso tenham interesse poderei abordar futuramente.

Me sigam no meu canal do youtube, futuramente vou postar lá https://www.youtube.com/@EvertonRibas

trismuhá 2 anos

Bem interessante o seu tutorial. Mas me apareceu uma dúvida, caso alguém tente acessar meu IP público (ou eu mesmo tente fazer o acesso), por padrão haverá um acesso na porta 80?

Em outras palavras, caso eu tente acessar meu IP público, seria como acessar: <meu.ip.publico:80> , assim fazendo o redirecionamento da porta 80 do roteador pra porta onde escolhi hospedar o arquivo na rede local?

evertonribashá 2 anos
Eu acredito que esse acesso padrão a porta 80 vá depender muito do seu provedor de internet, no meu caso eu apenas fiz o redirecionamento conforme descrevi no tutorial e automaticamente já foi possível acessar meu pc/servidor pelo ip público, porém acredito que em alguns casos seria necessário uma configuração adicional de firewall. Na realidade existe mais uma configuração para casos de ip's públicos e dinâmicos (no modem), mas isso seria quando você vai associar seu ip a um domínio. na prática eu uso esse link http://quantaclasse.com/ para deixar meus projetos online, se quiser testar, tem grandes chances de eu continuar online hoje. Esse domínio eu adquiri pelo google domains e associei ele ao ip do meu modem, agora, quando estou online consigo disponibilizar um link para amigos, clientes, etc ***Ainda estou estudando sobre isso, por isso não abordei nada relacionado a segurança, uso mais para testes mesmo. Assim economizo em servidor haha*** Já testei conexão local com banco de dados. é um servidor fácil e rápido, completo.
PabloJuan255há 2 anos

Álias, o DuckDNS supostamente é um serviço que aponta um DNS (um subdominio de ".duckdns.org" ) para um IP de sua escolha.

DDNS é uma maneira prática de você se referir a um servidor/roteador com um nome fácil de lembrar, onde o endereço IP do servidor provavelmente mudará. Quando seu roteador se reconecta ou o servidor ec2 reinicia, seu endereço IP é definido pelo provedor dessa conexão, isso significa que ele pode ser atualizado a qualquer momento

Tá ai, se ".duckdns.org" não fosse tão estranho eu usaria ele.

evertonribashá 2 anos
Boa!!! eu utilizo o DDNS do próprio google, assim eu evito essas terminações bizarras, porém nunca cheguei a testar outros serviços de DDNS então não sei dizer se são bons. Mas me parecem ser uma ótima alternativa 100% gratuita. Eu preferi contratar um domínio do google e utilizar o DDNS deles mesmo, Assim meu servidor local está atrelado a esse domínio: http://quantaclasse.com/ deixei ele online agora um pouco pro pessoal verificar que funciona. Por enquanto não tem nada mais (só a página do react). ![DDNS do Google](https://i.postimg.cc/DZ0CB1n1/6.png "Imagem do DDNS do Google") Aí o print do DDNS do google. Obrigado pela contribuição!!!
smkbarbosahá 2 anos

Eu tenho um medo com a segurança desse processo. Principalmente se você não andar com o Windows atualizado e não usar firewall.

Se você usar para demonstração de sites WordPress, pode usar o Local para gerar o acesso remoto na sua máquina em uma porta alta.

Outra opção, caso use para react, seria usar o netlify pra demonstração

Outra opção ainda, seria o uso do heroku na versão gratuita, só pra demonstrar pro cliente

evertonribashá 2 anos
Bem lembrado!!! A questão de segurança não abordei por que ainda é algo que estou estudando, mas esse processo não leva em consideração a segurança. Até vou atualizar o post sobre isso. Eu procuro sempre desativar o encaminhamento de portas após o uso. Eu não conhecia essas ferramentas, vou dar uma pesquisada melhor sobre. Eu gosto de estudar sobre a questão de configurações de servidores, por isso procurei uma alternativa mais DIY. Obrigado pela contribuição.
smkbarbosahá 2 anos
Se o intuito for estudar a configuração de servidores, parta para as configurações de servidores Linux. Você pode começar com o docker ou procurar um kit de laboratório de redes como o netkit.
evertonribashá 2 anos
Muito obrigado pela dica, vou fazer isso.
deviddhá 2 anos

Excelente post amigo. No meu caso e no caso de alguns colegas não conseguimos ter acesso a interface de configuração do roteador. Por esse motivo é possível utilizar, como alternativa para essa finalidade de testes, uma ferramenta chamada ngrok (https://ngrok.com). Ate hoje testei apenas o plano free e realmente não conheço as limitações dele mas acredito que essa ferramenta pode ser útil nesse caso da impossibilidade de adicionar essa configuração no roteador.

evertonribashá 2 anos
Muito obrigado pela dica !!! Aqui na minha cidade é bem comum você conseguir acessar as configurações do modem até nos planos de internet mais básica, é um pena que os provedores limitem assim. Obrigado pela contribuição!