Criando um servidor local acessível de um endereço público

Venho desenvolvendo websites há quase 10 anos e um dos meus maiores problemas sempre foi o desenvolvimento local e a sincronização de sites locais para testes ao vivo. Usar um ambiente local é ótimo porque é rápido, mas não é visível de longe e transferir para algum lugar significa operação de banco de dados, renomear tabelas, valores e assim por diante..

Neste artigo, mostrarei uma maneira fácil de executar um servidor local que você pode acesso do seu telefone e outros dispositivos móveis nativamente, e também transmitido pela Internet, o que significa compartilhar seu trabalho com os clientes, sem deixar o bom e velho localhost.

Usando o Vagrant para criar um ambiente local

Há pouco tempo atrás eu escrevi um artigo aqui no Hongkiat sobre o uso do Vagrant, então eu só vou falar sobre o básico aqui. Para mais informações, dê uma olhada no artigo!

Para começar, você precisa pegar e instalar o VirtualBox e o Vagrant. Ambos são gratuitos e usados para criar uma máquina virtual que executará seu servidor.

Agora, crie uma pasta para armazenar seus sites. Vamos usar um diretório chamado “Websites” dentro do nosso diretório principal de usuários. Isso seria / Usuários / [nome de usuário] / sites no OS X e C: / Usuários / [nome de usuário] / sites no Windows.

Crie uma nova pasta chamada wordpress. É aqui que eu vou criar a máquina virtual. A ideia é que cada pasta dentro Websites abriga uma máquina virtual separada. Enquanto você posso colocar tantos sites em uma máquina virtual quanto quiser, eu gosto de agrupá-los por plataformas - por exemplo: WordPress, Laravel, Custom

Para os propósitos deste tutorial, criarei um site WordPress.

Dentro de WordPress pasta, vamos precisar criar dois arquivos, Vagrantfile e install.sh. Estes serão usados para configurar nossas máquinas virtuais. Jeffrey Way criou dois grandes arquivos iniciais; você pode pegar seus arquivos Vagrantfile e install.sh.

Em seguida, usando o terminal, navegue até o WordPress diretório e tipo vagabundo. Isso levará algum tempo, já que a caixa precisa ser baixada e depois instalada. Pegue uma xícara de café e confira este post em 50 dicas WordPress enquanto espera.

Uma vez que o processo esteja completo, você deve ser capaz de ir 192.168.33.21 e veja uma página adequadamente veiculada. Você pasta de conteúdo deve ser a pasta html dentro do diretório do WordPress. Agora você pode começar a adicionar arquivos, instalar o WordPress ou qualquer outra coisa que quiser.

Não se esqueça de ler o guia completo do Vagrant para mais informações sobre como criar hosts virtuais, mapear domínios como mytest.dev e assim por diante.

Abrindo Sites Locais Na Mesma Rede Usando Gulp

Ao construir um site, você deve estar pensando em capacidade de resposta. Pequenas telas podem ser emuladas até certo ponto, estreitando a janela do navegador, mas não é a mesma experiência, especialmente se você jogar telas de retina na mescla.

O ideal é que você queira abrir seu site local em seus dispositivos móveis. Isso não é muito difícil de fazer, desde que seus dispositivos estejam na mesma rede.

Para fazer isso, estaremos usando Gulp e Browsersync. O Gulp é uma ferramenta para a automação do desenvolvimento, o Browsersync é uma ótima ferramenta que pode não apenas criar um servidor local, mas sincronizar a rolagem, os cliques, os formulários e mais entre os dispositivos..

Instalando Gulp

Instalar o Gulp é muito fácil. Vá até a página Primeiros passos para as instruções. Um pré-requisito é o NPM (Node Package Manager). A maneira mais fácil de obter isso é instalar o próprio Node. Vá até o site do Node para instruções.

Depois de usar o npm install --glutal gole Comando para instalar gulp globalmente, você precisa adicioná-lo ao seu projeto. A maneira de fazer isso é executar npm install --save-dev gole na pasta raiz do seu projeto, adicione um gulpfile.js arquivo lá.

No momento, vamos adicionar uma única linha de código dentro desse arquivo, o que indica que estaremos usando o próprio Gulp.

var gulp = require ('gulp');

Se você está interessado em todas as coisas legais que o Gulp pode fazer, como concatenar scripts, compilar Sass e LESS, otimizar imagens e assim por diante, leia nosso Guide To Gulp. Neste artigo, vamos nos concentrar em criar um servidor.

Usando o Browsersync

O Browsersync tem uma extensão Gulp que podemos instalar em duas etapas. Primeiro, vamos usar o npm para baixá-lo, depois vamos adicioná-lo ao nosso Gulpfile.

Emitir o npm instalar navegador-sync gulp --save-dev comando na raiz do projeto no terminal; isso fará o download da extensão. Em seguida, abra o Gulpfile e adicione a seguinte linha a ele:

var browserSync = require ('browser-sync'). create ();

Isso permite que o Gulp saiba que estaremos usando o Browsersync. Em seguida, vamos definir uma tarefa que controla como o Browsersync funcionará.

gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21"););

Uma vez adicionado, você pode digitar gole navegador-sync no terminal para iniciar um servidor. Você deve ver algo como a imagem abaixo.

Existem quatro URLs separados, aqui está o que eles significam:

Local: O URL local é onde você pode acessar o servidor na máquina em que está sendo executado. Em nossos casos, você pode usar 192.168.33.21 ou você pode usar o fornecido pelo Borwsersync.
Externo: Este é o URL que você pode usar em qualquer dispositivo conectado à rede para acessar o site. Ele irá funcionar em sua máquina local, seu telefone, tablet e assim por diante.
UI: Esse URL aponta para as opções do servidor em execução no momento. Você pode ver conexões, configurar a aceleração de rede, exibir histórico ou opções de sincronização.
IU externa: Isto é o mesmo que a interface do usuário, mas acessível a partir de qualquer dispositivo na rede.

Por que usar o Browsersync?

Agora que terminamos esta fase, você pode estar pensando: por que usar o Browsersync? O URL 192.168.33.21 também pode ser acessado de qualquer dispositivo. Enquanto isso é assim, você precisa instalar o WordPress para este URL.

Eu costumo usar virtualhosts e tenho domínios como wordpress.local ou myproject.dev. Estes resolvem localmente, então você não pode visitar o wordpress.local no seu celular e ver o mesmo resultado que no seu computador local.

Até aí tudo bem, agora temos um site de teste que pode ser acessado de qualquer dispositivo na rede. Agora é hora de se globalizar e divulgar nosso trabalho pela internet.

Usando o ngrok para compartilhar nosso host local

O ngrok é uma ferramenta que você pode usar para criar túneis seguros para seu host local. Se você se inscrever (ainda livre), você terá túneis protegidos por senha, TCP e vários túneis simultâneos.

Instalando o ngrok

Vá para a página de download do ngrok e pegue a versão que você precisa. Você pode executá-lo da pasta em que está ou movê-lo para um local que permita executá-lo de qualquer lugar. No Mac / Linux você pode executar o seguinte comando:

sudo mv ngrok / usr / local / bin / ngrok

Se você receber um erro de que este local não existe, simplesmente crie as pastas que faltam.

Usando o ngrok

Felizmente essa parte é extremamente simples. Uma vez que você está executando o seu servidor via Gulp, dê uma olhada na porta que está usando. No exemplo acima, o servidor local está sendo executado em http: // localhost: 3000 o que significa que está usando a porta 3000. Em uma nova guia de terminal, execute o seguinte comando:

ngrok http 3000

Isto irá criar um túnel acessível para o seu localhost, o resultado deve ser algo como isto:

O URL que você vê ao lado “Encaminhamento” é o que você pode usar para acessar seu website de qualquer lugar.

Conclusão

No final do dia, podemos agora fazer três coisas:

Veja e trabalhe em nosso projeto localmente
Ver o nosso site através de qualquer dispositivo na rede
Deixe os outros verem nosso trabalho em qualquer lugar com um link simples

Isso permitirá que você se concentre no desenvolvimento em vez de correr para manter servidores locais e de teste em sincronia, migrando bancos de dados e outras tarefas preocupantes..

Se você tiver um método diferente de trabalhar localmente e compartilhar o resultado, avise-nos!