WPML 5.0 Beta – Uma experiência reformulada e tradução automática mais inteligente
O WPML 5.0 é a maior atualização que lançamos em anos.
Com o Docker Compose, Xdebug e PhpStorm, você pode criar um ambiente de desenvolvimento local reproduzível, isolado e fácil de gerenciar, que espelha um servidor de produção, melhorando a qualidade dos seus projetos WordPress.
Olá, colegas desenvolvedores e usuários avançados do WordPress! Hoje, estou animado para compartilhar um tutorial abrangente, porém direto, sobre como configurar um ambiente local de desenvolvimento WordPress usando o Docker Compose. Tendo me tornado recentemente parte da equipe dinâmica da OnTheGoSystems, decidi trazer minha zona de conforto comigo, que é exatamente do que se trata essa configuração.
O objetivo era simples: desenvolver uma configuração onde eu pudesse ter controle granular sobre minhas ferramentas de desenvolvimento, integrando o Xdebug e o WP-CLI com a imagem oficial do WordPress no Docker. Esta configuração não é sobre reinventar a roda, mas sobre personalizá-la para se alinhar com preferências e estilos de trabalho individuais. Espero que este guia seja útil para você na configuração de um ambiente semelhante, melhorando sua jornada no desenvolvimento WordPress.
Pré-requisitos
Para aproveitar ao máximo este tutorial, você precisará ter as seguintes dependências instaladas:
- Docker: Usaremos o Docker como nossa ferramenta principal para criar, implantar e executar aplicativos usando contêineres. Ele nos permite empacotar um aplicativo com todas as partes de que precisa em um contêiner e enviá-lo como um único pacote. O que torna o Docker ainda mais poderoso é a sua promessa de controle granular, permitindo-nos definir cada aspecto da configuração do nosso aplicativo com precisão. Esse controle ajuda a criar um ambiente de desenvolvimento que atende exatamente às nossas necessidades.
- Extensão do Xdebug para Chrome: Esta extensão de navegador nos ajudará a percorrer nosso código, identificar bugs e melhorar a qualidade geral dos nossos projetos WordPress.
- PhpStorm: Uma IDE inteligente e completa para PHP desenvolvida pela JetBrains. Ela oferece um editor para PHP, HTML e JavaScript com análise de código em tempo real e refatoração automatizada para essas linguagens.
Por que Docker, Xdebug e PhpStorm?
Nosso objetivo é estabelecer um ambiente local de desenvolvimento WordPress que seja isolado, reproduzível e fácil de gerenciar. O Docker forma a espinha dorsal dessa configuração, fornecendo a infraestrutura para conter e gerenciar nosso aplicativo. O Xdebug e o PhpStorm são as peças complementares desse quebra-cabeça, oferecendo recursos aprimorados de desenvolvimento e depuração de código PHP.
Nossa jornada começará com a criação de um Dockerfile que estende a imagem oficial do WordPress no Docker. Vamos aprimorar essa imagem incorporando o Xdebug e o WP-CLI, ferramentas essenciais em nossas tarefas de desenvolvimento e depuração do WordPress.
Em seguida, elaboraremos um arquivo do Docker Compose para orquestrar dois serviços principais: WordPress e MySQL. E, acredite ou não, é basicamente isso!
A beleza dessa configuração é que ela resulta em um ambiente de desenvolvimento local que não apenas espelha um servidor de produção, mas também é facilmente replicável. Isso significa que podemos duplicar a configuração exata em vários ambientes ou máquinas com facilidade, garantindo a consistência e reduzindo problemas relacionados à configuração.
Tutorial passo a passo
Passo 1: O Dockerfile
Nossa jornada começa com a criação de um novo Dockerfile. Este arquivo instrui o Docker sobre como construir nossa imagem. Aqui está a configuração básica com a qual eu normalmente começo:
# Use the official WordPress image as a parent image
FROM wordpress:latest
# Install Xdebug
RUN pecl install xdebug
# Install WP-CLI
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
chmod +x wp-cli.phar && \
mv wp-cli.phar /usr/local/bin/wp
# Copy xdebug.ini into the container
COPY xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini
Neste Dockerfile, começamos a partir da imagem oficial do WordPress. Em seguida, instalamos o Xdebug e o WP-CLI separadamente para maior clareza e facilidade de manutenção. O arquivo de configuração do Xdebug (xdebug.ini) é copiado para o diretório apropriado no contêiner. Isso forma a base da minha configuração preferida para um ambiente local de desenvolvimento WordPress.
Passo 2: O arquivo de configuração do Xdebug (xdebug.ini)
Agora que temos o Xdebug instalado em nossa imagem do Docker, precisamos configurá-lo para funcionar em nosso ambiente de desenvolvimento local. Isso envolve a criação de um arquivo xdebug.ini com as seguintes configurações:
ini zend_extension=xdebug xdebug.mode=debug xdebug.client_port=9003 xdebug.start_with_request=yes
Essas configurações ativam a extensão do Xdebug, definem que ela inicie a depuração a cada requisição e definem a porta do cliente à qual ela deve se conectar (neste caso, 9003). Você deve ter notado que ainda não especificamos um client_host, mas não se preocupe, ele entrará em ação muito em breve no nosso processo de configuração.
Passo 3: O arquivo do Docker Compose
Em seguida, criaremos um arquivo docker-compose.yml que configura nossos serviços do WordPress e do MySQL:
yaml
version: '3'
services:
# MySQL Service
mysql:
image: mysql:latest
container_name: mysql_container
restart: always
volumes:
- db_data:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
MYSQL_DATABASE: wordpress
# WordPress Service
wordpress:
depends_on:
- mysql
image: wordpress:latest
container_name: wp_container
volumes:
- ./wp_data:/var/www/html
environment:
WORDPRESS_DB_HOST: mysql
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
WORDPRESS_DEBUG: 1
XDEBUG_CONFIG: client_host=host.docker.internal
ports:
- "8000:8000"
volumes:
db_data:
Neste arquivo, definimos dois serviços – MySQL e WordPress. Ambos os serviços têm nomes de contêiner exclusivos, para facilitar a referência e o gerenciamento.
A diretiva restart: always garante que o serviço sempre será reiniciado se parar inesperadamente. Se for interrompido manualmente, ele só será reiniciado quando o contêiner for reiniciado manualmente.
O serviço do MySQL monta um volume do Docker (db_data), garantindo o armazenamento persistente mesmo que o contêiner seja excluído. Para o serviço do WordPress, estamos montando um diretório local (./wp_data) no contêiner. Isso significa que quaisquer alterações nos arquivos do WordPress em nosso sistema local serão refletidas no contêiner.
Adicionamos duas variáveis de ambiente adicionais para o serviço do WordPress – WORDPRESS_DEBUG para ativar a depuração do WordPress e XDEBUG_CONFIG para especificar o host do cliente para o Xdebug. O client_host está definido como host.docker.internal, que é um nome DNS especial que roteia para o endereço IP interno do host, permitindo que o Xdebug se comunique com nossa IDE no host.
Observe que a configuração client_host é adaptada para Windows e macOS. Para Linux, uma alternativa comum é substituir host.docker.internal pelo endereço IP real da sua máquina, que pode ser obtido através do comando de terminal ip addr show.
Passo 4: Como executar seu ambiente local de desenvolvimento WordPress
Assim que o seu Dockerfile, arquivo de configuração do Xdebug e arquivo do Docker Compose estiverem prontos, é hora de dar vida ao seu ambiente local de desenvolvimento WordPress.
Para fazer isso, basta navegar até o diretório que contém o seu arquivo do Docker Compose no terminal e executar o seguinte comando:
bash docker-compose up -d
Este comando instruirá o Docker a iniciar seus serviços em segundo plano.
Após a execução bem-sucedida, você terá um site WordPress rodando em sua máquina local, acessível via http://localhost:8000. Quaisquer alterações que você fizer em seus arquivos PHP do WordPress agora serão refletidas neste site, oferecendo uma maneira fácil e eficaz de desenvolver e depurar seu aplicativo WordPress.
Além disso, seu serviço do MySQL também estará em funcionamento, acessível na porta 3306. Isso fornece um banco de dados MySQL totalmente funcional para o seu aplicativo WordPress, replicando um ambiente realista para as suas necessidades de desenvolvimento.
Passo 4.5: Passo bônus – Adicionar o arquivo phpinfo.php
Para aqueles que querem se aprofundar um pouco mais em sua configuração do PHP, podemos introduzir um arquivo phpinfo.php em nossa imagem do Docker. Quando acessado, este arquivo apresentará uma visão geral abrangente das suas configurações do PHP.
Para adicionar o arquivo phpinfo.php, primeiro você precisará criá-lo no mesmo diretório do seu Dockerfile. O arquivo deve conter o seguinte código PHP:
<?php phpinfo(); ?>
Em seguida, adicione a seguinte linha ao seu Dockerfile:
# Bonus: Copy phpinfo.php into the container COPY phpinfo.php /var/www/html/phpinfo.php
Este comando copiará o arquivo phpinfo.php para o diretório raiz do WordPress dentro da imagem do Docker.
Para garantir que essas alterações entrem em vigor, você precisará reconstruir sua imagem do Docker e reiniciar os serviços do Docker Compose. Execute os seguintes comandos no seu terminal:
bash docker-compose down docker-compose up -d --build
O comando docker-compose down para e remove seus contêineres atuais do Docker. Em seguida, o docker-compose up -d –build reconstrói a imagem do Docker com o arquivo phpinfo.php recém-adicionado e reinicia os serviços do WordPress e do MySQL em segundo plano.
Agora você pode acessar o arquivo phpinfo.php navegando para http://localhost:8000/phpinfo.php no seu navegador da web. Aqui, você verá uma página detalhada descrevendo sua configuração do PHP, que pode ser um recurso valioso para depuração e verificação.
Passo 5: Iniciar a depuração
Agora que você tem seu ambiente local de desenvolvimento WordPress configurado com Docker, Xdebug e PhpStorm, você pode começar a depurar seu site WordPress. Aqui está um resumo rápido de como começar:
- Configure o Xdebug no PhpStorm: Abra o PhpStorm e vá para File → Settings (Preferences no Mac) → Languages & Frameworks → PHP → Debug. Na seção Xdebug, certifique-se de que a porta Debug port esteja definida como 9003 e a opção Can accept external connections esteja marcada.
- Adicione um servidor no PhpStorm: Navegue até PHP → Servers. Adicione um novo servidor com o nome wordpress e o host localhost. Defina a porta como 8000. Certifique-se de que os mapeamentos de caminho estejam definidos corretamente – o caminho absoluto no servidor para a pasta wp_data deve ser /var/www/html.
- Instale a extensão Xdebug helper: Instale a extensão Xdebug helper para o Google Chrome. Após a instalação, clique no ícone de inseto (bug) e defina a chave da IDE como PHPSTORM.
- Comece a ouvir as conexões de depuração do PHP: No PhpStorm, clique no ícone de inseto no canto superior direito para começar a ouvir as conexões de depuração do PHP.
- Inicie a depuração: Com os passos anteriores concluídos, você está pronto para começar a depurar seu aplicativo WordPress. Basta definir seus pontos de interrupção (breakpoints) no PhpStorm conforme necessário e, em seguida, simplesmente recarregar seu site. Boa depuração!
Conclusão
Ao concluirmos este tutorial, espero que ele se torne um recurso valioso para você, assim como tem sido para mim em minha jornada. A capacidade de personalizar essa configuração – como fizemos ao adicionar o arquivo phpinfo.php – abre uma infinidade de possibilidades, tornando nosso processo de desenvolvimento mais robusto e eficiente. Todo o código está disponível neste repositório do GitHub. Não hesite em fazer um pull, testar e sugerir melhorias!
Eu pessoalmente uso o sistema operacional Ubuntu, mas a beleza dessa configuração é que, graças ao Docker, isso não importa! Graças ao fato de que o Docker pode rodar em qualquer sistema operacional da mesma forma, quer você prefira macOS, Windows ou Linux, a configuração e o uso são os mesmos!
Obrigado por me acompanhar neste passo a passo. Espero ouvir de você sobre suas experiências ou quaisquer sugestões que você possa ter para melhorar ainda mais esta configuração. Lembre-se, o crescimento prospera com o conhecimento compartilhado e o espírito de colaboração.
Boa codificação e vamos continuar criando experiências incríveis no WordPress juntos!
