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, 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.

  • luis

    Obrigado pelo tutorial. Na seção Configurando o WordPress refere o download de um ficheiro zip mas não existe link para ele. Pode ajudar?

  • Natália

    Quando fiz curso técnico, usei o Wamp… E agora que estou na faculdade, na minha faculdade usam o Vertrigo. Queria saber qual seria o melhor para se usar.
    E também gostaria de agradecer por criar esse blog e ensinar tão bem! 😀

    • Obrigado, Natália!

      Bom, não existe “o melhor”. Cada um tem suas coisas boas, e coisas ruins. O Vertrigo é uma variação do Wamp. Eu já prefiro o Xampp.

      Sugiro que você experimente cada um e escolha o que for mais simples e produtivo pra você. (se algum deles for exigido pelo professor, ou por um cliente, use-o).

      O melhor mesmo vai ser aquele que VOCÊ souber usar melhor.

      Abs.
      Ruan

  • Oi, baixei, instalei e conectei. Ocorre, que quando eu clico em “admin”, abre uma guia do browser mas não aparece a tela do phpmyadmin. Pode me ajudar?

  • Aila

    Boa Noite, posso ter uma loja virtual com um servidor como o XAMPP?

    • Sim e não. O XAMPP funciona como servidor local, apenas, então outras pessoas não poderão acessar pela internet.

      O que você fazer é pode montar uma loja virtual no XAMPP para testar e modificar até ficar como você quer, e depois colocar em um servidor online.

  • Estava pensando em montar uma loja virtual, por onde começar ?

    • Sugiro dar uma estudada em WordPress com WooCommerce. São bem fáceis de montar e usar.

      Você vai precisar estudar, também, hospedagem, formas de pagamento, atendimento ao cliente online, e principalmente segurança.

  • Olá Ruan!

    Posso fazer o mesmo para Joomla?? Obrigado e abraços!

  • gosto muito do seu trabalho ruan mas deu algo de errado no meu. o apache nao esta ficando verda pode me ajudar? abrs

    • O XAMPP diz o erro na janela de inicialização. Você tem que verificar esse erro.

      Pode ser também problema de permissão (tente executar como administrador), ou algum outro programa instalado está usando a porta 80 (do Apache), daí você precisará desativar esse programa.

  • André

    Excelente tutorial, na verdade preciso usar o XAMPP para um projeto de teste que estou fazendo e o tutorial ajudou bastante.

  • Boa tarde,

    Esta dando este erro quando coloco o nome do meu projeto

    Objeto não encontrado!
    A URL requisitada não foi encontrada neste servidor. Se você digitou o endereço (URL) manualmente, por favor verifique novamente a sintaxe do endereço.
    Se você acredita ter encontrado um problema no servidor, por favor entre em contato com o webmaster.

    Error 404
    localhost
    Apache/2.4.27 (Win32) OpenSSL/1.0.2l PHP/7.1.9

    Fiz da forma que voce disse, por favor poderia me esclarecer.

    Obrigado.

  • Mauricio

    Bom, estava precisando instalar um servidor local.

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

Acima ↑