Como Configurar um Servidor Local para Desenvolvimento Web

A melhor forma de fazer seus projetos e testes, ou aprender desenvolvimento web, é usando um servidor local.

Dessa forma, você vai poder testar seus projetos na sua máquina e, quando estiver pronto, é só fazer o deploy para um servidor online (como os da Weblink, Hostinger, Digital Ocean, etc.)

Neste tutorial, você vai ver como configurar uma instalação local do Apache, MySQL e PHP, e algumas ferramentas de produtividade, como o Git e o NPM. Vamos usar o XAMPP, para fazer isso.


Antes de Começar

Para montar o seu ambiente de desenvolvimento, você precisará fazer alguns downloads:

  1. Baixe o XAMPP
  2. Baixe o Git
  3. Baixe um Editor de Textos (recomendo o Atom ou o VS Code)
  4. Baixe o Node.js

Os passos desse tutorial são feitos para ambientes Windows, mas podem servir, também, para Linux.


Instale o XAMPP

O XAMPP é um pacote com softwares livres que executam um Servidor Web, porém em menor escala e sem as configurações de segurança. Por ser menor, ele é perfeito para instalar no PC.

Para começar o seu server você já pode instalar o XAMPP.

A instalação é simples, como qualquer outro programa (Next, Next, Finish). Não há necessidade de modificar o setup padrão.  Então, não vou me ater muito a estes passos.

O XAMPP funciona, principalmente, com o Apache, como Servidor Web, PHP e Perl como linguagens, e o MariaDB para servir os Bancos de Dados (antes era o MySQ).

Com esses itens você pode criar sites e sistemas web do zero, ou instalar um WordPress, Joomla, Drupal, Yii, Laravel, MediaWiki, e vários outros CMS para criar seus sites.

Execute o XAMPP

Após a instalação terminar, execute o XAMPP.

Observe os softwares que o XAMPP tem, e que são interessantes para nós:

  • Apache – é o servidor web em si. Ele trata as requisições dos sites e sistemas locais;
  • MariaDB – o gerenciador de banco de dados. É equivalente ao MySQL. Esse é o sistema responsável pelo armazenamento dos dados dos projetos;
  • PHP – é a linguagem utilizada pelo XAMPP, e roda junto com o Apache.

Inicie o Servidor Web, clique no botão Start, ao lado de Apache.

(Opcional) Inicie também o Banco de Dados, clicando no botão Start, também.

Se o servidor web (Apache) não tiver sido iniciado, você vai ver um erro no browser.

Quando aparecer a legenda verde com o text running o servidor web estará executando. Você pode verificar acessando o endereço http://localhost. Se aparecer a tela do XAMPP, deu tudo certo.

 

Instale o Git e o Git Bash

O Git é o principal programa de controle de versão atualmente, e ele traz o Git Bash, que você irá usar como linha de comando.

É importante aprender a versionar seus códigos, para manter o registro de alterações e gerenciar conflitos ou voltar versões, em casos de bugs.

O Git Bash vai servir como terminal de linha de comando, para você, caso esteja usando Windows. No Linux, não precisa ter o Git Bash.

A melhor forma de trabalhar com Web é através da linha de comando. É tudo uma questão de prática no dia-a-dia.

Instale um Bom Editor de Textos

O Atom e o VS Code são editores para desenvolvimento. Eles possuem várias ferramentas de produtividade, como o Emmet.

Um editor de textos desse tipo é muito útil para alterar scripts CSS, marcações HTML, algumas configurações e até para fazer um temas ou plugins por completo.

Você pode instalar vários plugins para agilizar certas tarefas, principalmente no Atom. Ele também permite visualizar a árvore de pastas, e mostra os status dos arquivos no Git.

Instale o Node.js e o NPM

Por fim, o Node.js é um framework de desenvolvimento para JavaScript.

Ele também vem com o NPM, que será o gerenciador de pacotes, e automatiza praticamente tudo. Aos poucos, você vai aprender a fazer várias coisas com o Node.

Usando o NPM, você vai poder instalar, ou criar, vários scripts de automatização, e usar ferramentas como o Webpack, ou o Gulp, para verificar seus arquivos CSS e Js e encontrar problemas de sintaxe, possíveis erros, e compactar tudo.

Além disso, você pode começar a aprender a criar sistemas web com Javascript e Node.js, também. Mas, essa parte fica para outro dia.

Próximos Passos…

Nesse tutorial, você viu como ter um ambiente de desenvolvimento web profissional, com um servidor web, um banco de dados, controle de versão, linha de comando e gerenciamento de pacotes.

O seu processo de desenvolvimento vai ficar mais rápido, já que não há necessidade de uploads, e nem de esperar que as páginas carreguem, e você não fica dependendo de uma conexão com a internet.

Esse ambiente fica similar aos servidores da Weblink (a Weblink faz parte do grupo Hostinger), que são os servidores que eu uso. Assim, na hora de fazer o deploy (ou seja, transferir para o servidor online), você evitará problemas de execução e erros no site, ou no sistema.

É importante que o seu ambiente local seja o mais parecido possível com o ambiente de produção, que pode ser uma hospedagem comum, ou uma VPS, por exemplo.

A partir daqui, você pode começar a criar seus sites, e sistemas web, com PHP, HTML & CSS e Javascript.

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑