Publicado em

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. Assim, você não precisa de uma hospedagem, ou seja um host online. O processo de desenvolvimento fica 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.

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. Pra isso, vamos usar o XAMPP como servidor em um sistema Windows. Mas esses passos servirão, também, para Linux.

servidor-local-desenvolvimento-web

Ao final, você vai 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. Tudo isso pra que você trabalhe da forma mais ágil possível


Antes de Começar, Pegue as Ferramentas…

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: pode ser o Sublime Text ou o VS Code (ou os dois!)
  4. Baixe o Node.js

O XAMPP é um pacote de 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. O melhor de tudo é que ele é gratuito!

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.

O Sublime Text 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.

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.


Passo 1: Instale o XAMPP

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

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.

Tela do XAMPP

Execute o XAMPP

Após a instalação terminar, execute o XAMPP. A tela é igual a que aparece nesta imagem…

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

  • Apache – o servidor web em si. Ele que trata as requisições dos sites;
  • MySQL – o gerenciador de banco de dados. É o sistema responsável pelo armazenamento dos dados dos projetos;

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

Inicie também o MySQL, clicando no botão Start, ao lado de MySQL.

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.

Agora, vamos ao que interessa…

Crie o Banco de Dados

Ainda na tela do XAMPP, clique no botão Admin…, ao lado de MySQL.

Esse botão irá carregar, no seu browser, o phpMyAdmin que é um software que facilita o gerenciamento dos bancos de dados no seu XAMPP.

É muito importante aprender a utilizá-lo.

phpmyadmin-databases

Clique no botão Banco de Dados (Database), na parte superior do phpMyAdmin. Essa página lista todos os bancos de dados que existem no XAMPP.

Crie um novo banco de dados, adicionando o nome no campo de texto: digite o nome do seu projeto (eu coloquei sandbox, por exemplo).

OK! O Servidor está rodando e agora temos um banco de dados.

Configurando o WordPress

Agora, vamos instalar e configurar o WordPress.

Faça o download da última versão do WordPress, no site br.wordpress.org. Extraia os arquivos para a pasta htdocs do XAMPP.

Se você instalou o XAMPP no drive C, por exemplo, o caminho deve ficar algo como:

C:\xampp\htdocs\wordpress

Renomeie a pasta WordPress, para o nome do seu projeto (no meu caso, Sandbox). Abra seu navegador, e acesse o endereço da nova instalação do WordPress:

http://localhost/<NomeDoSeuProjeto>

Agora, você pode seguir pela famosa Instalação de 5 Minutos do WordPress! Na verdade, deve durar só uns dois minutos.

Quando você tiver que inserir as credenciais do banco de dados, digite:

  • Nome do Banco de Dados – o nome do banco de dados que você inseriu anteriormente (no meu caso, sandbox)
  • Nome de usuário Usuário de MySQL –  root
  • Senhadeixe em branco, o XAMPP não cria uma senha padrão

Continue com a instalação. Quando terminar, você será direcionado para a área administrativa. Aproveite para explorar bastante esse setup do WordPress.

Agora, você tem um ambiente local para testar vários Temas, vários Plugins e as Configurações do WordPress. Esse ambiente é ótimo para escrever – e reescrever – os posts antes de enviar para um site na web. Experimente!

Até a próxima.

18 comentários sobre “Como Configurar um Servidor Local para Desenvolvimento Web

  1. 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?

    1. É o do site do WordPress mesmo: https://br.wordpress.org/

      Vou alterar no tutorial.

      Obrigado, Luis!

  2. 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! 😀

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

  3. 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?

    1. Oi Jefferson, o endereço do phpMyAdmin no XAMPP é:

      http://localhost/phpmyadmin

      tenta acessar diretamente por esse endereço.

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

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

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

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

  6. Olá Ruan!

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

    1. Pode! É o mesmo processo.

      Abs!

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

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

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

    1. Muito obrigado, André!

      Abs.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *