Dicas para melhorar seu workflow de desenvolvimento WordPress - Parte 2

Publicado por Filipe Mateus do Nascimento no dia dev

WorkFlow WordPress

No post anterior, vimos algumas dicas para melhorar seu workflow de desenvolvimento WordPress. Havíamos focado na teoria, buscando mostrar algo próximo do nosso dia-a-dia aqui na Resultados Digitais. Para ficar mais claro, vamos partir para a prática, mostrando algumas ferramentas que podem lhe ajudar em cada um dos ambientes citados no post anterior.

O ambiente de desenvolvimento local

Nosso primeiro passo é configurar o ambiente de desenvolvimento local. Você pode configurar o PHP, MySQL e Apache no seu computador ou partir para alternativas mais práticas, como o Vagrant ou MAMP. Recomendo o Vagrant por questões de praticidade, e pelo fato de ele rodar em uma máquina virtual. Além disso, você pode fazer o backup de um ambiente configurado e colocar em outro computador sempre que precisar, utilizando as mesmas configurações.

Temos um post abordando a configuração do ambiente de desenvolvimento com Vagrant.

Você também consegue encontrar facilmente tutoriais na internet explicando sobre a instalação/configuração do Vagrant/MAMP, ou explicando como configurar o Apache, MySQL e PHP no seu computador. Vou usar o Ubuntu 14.04 LTS nos exemplos a seguir, portanto, se você usa o OS X ou qualquer outro sistema operacional, alguns comandos podem variar. Não testamos estas ferramentas no Windows.

Para nos auxiliar no gerencimento do nosso projeto local, instalamos o WP-CLI, um assistente command line para WordPress. Com ele conseguimos fazer várias operações do WordPress por linha de comando, como baixar, instalar, configurar, criar e remover o banco de dados.

Instalando e configurando o WP-CLI

WP-CLI

Existem duas formas de baixar o WP-CLI pelo terminal:

Curl: curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Wget: wget https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Depois de baixar, podemos testar se está tudo ok com os arquivos baixados:

php wp-cli.phar --info

Se tudo estiver certo, vamos extrair o arquivo na pasta bin, e criar o comando wp para fazermos as operações:

chmod +x wp-cli.phar

sudo mv wp-cli.phar /usr/local/bin/wp

Rode o comando wp --info e veja se o comando wp está funcionando.

Baixando o WordPress com WP-CLI

Crie um diretório para o seu projeto no ambiente de desenvolvimento local. Entre neste diretório pelo terminal e rode o seguinte comando (certifique-se de ter dado permissão para gravação neste diretório):

wp core download --locale=pt_BR

O comando acima vai baixar o WordPress no diretório que criamos. O parâmetro --locale=pt_BR fará com que o WordPress seja baixado em português. O preenchimento desse parâmetro não é obrigatório e a linguagem padrão é Inglês. Agora vamos configurar o WordPress:

wp core config --dbname=database --dbuser=mysql_user --dbpass=mysql_password

O comando acima gera o arquivo wp-config.php. Não esqueça de substituir os valores database, mysql_user e mysql_password. Com o nosso arquivo configurado, podemos rodar o seguinte comando:

wp db create

Com este comando estamos criando o banco de dados, com as informações que definimos no wp-config.php no comando anterior. Por fim, passamos as configurações finais e instalamos nosso projeto:

1
wp core install --url="url_local" --title="Titulo do meu site" --admin_user="username" --admin_password="password" --admin_email="email"

Com apenas estes quatro comandos, temos o WordPress instalado e configurado em nosso ambiente local. Agora abra o navegador, no endereço do seu projeto local. Se tudo ocorreu bem, você verá uma instalação padrão do WordPress.

Controle de Versão

Git

Agora que temos nosso projeto local instalado e configurado, vamos configurar o controle de versão. Primeiro devemos criar um repositório no GitHub. Depois precisamos adicionar o endereço remoto do nosso projeto. Após criar o repositório, abra o terminal, entre no diretório do projeto e digite os seguintes comandos:

1
2
git init
git remote add origin endereco-remoto-do-repositório

Agora nosso projeto já possui controle de versão. Após cada alteração, se você digitar git status, poderá ver os arquivos que foram modificados. Se quiser ver exatamente quais trechos dos arquivos foram modificados, você pode digitar git diff. Para enviar as alterações para o GitHub, faça o seguinte:

1
2
3
git add .
git commit -m "Descrição das alterações"
git push origin master

Existem diversas outras coisas que podemos fazer utilizando Git, mas inicialmente estes comandos já nos servirão.

Staging - o ambiente de homologação

Até o momento já configuramos nosso ambiente de desenvolvimento local e o nosso repositório no GitHub. A cada alteração no projeto, mandamos os arquivos para o GitHub. Só com isso, já estamos permitindo revisão de código e e possibilitando que erros sejam revertidos. O próximo passo é configurar nosso ambiente de homologação.

Existem algumas empresas de hospedagem, que oferecem servidores pré-configurados para trabalhar com WordPress. Na maioria dos casos estes servidores nos oferecem recursos muito interessantes. Creio que um dos mais famosos seja o WP Engine, inclusive o utilizamos em alguns projetos nossos.

O WP Engine oferece suporte à Git e nele podemos configurar um ambiente de staging e production. Isso ajuda muito na produtividade e na organização, já que podemos fazer deploy usando Git.

Você pode adicionar o repositório remoto no seu ambiente local, desta forma:

git remote add staging git@git.wpengine.com:staging/meu-site.git

Você deve ter reparado que esse comando é igual ao que usamos para adicionar o repositório remoto do GitHub. O que muda é o domínio, que ao invés de GitHub é WP Engine, e o nome do projeto. O WP Engine cria os repositórios para você no próprio servidor. Feito isso, você pode fazer deploy em staging da seguinte forma:

git push staging master

Se você quer optar por alternativas mais baratas, e usar servidores tradicionais que não possuem suporte à Git, você pode fazer deploy do seu projeto usando o Wordmove.

Wordmove

O Wordmove é uma Rubygem que nos permite fazer deploy do nosso projeto WordPress em vários ambientes diferentes. No nosso caso, podemos utilizá-lo para fazer deploy nos ambientes de homologação e produção. Como a transferência de arquivos é feita via SSH, precisamos de alguns serviços instalados em nosso computador: rsync, sshpass e openssh. Para instalá-los digite os comandos abaixo:

1
2
3
4
5
sudo apt-get update
sudo apt-get install rsync
sudo apt-get install sshpass
sudo apt-get install openssh
sudo apt-get install openssh-server

Com estas dependências instaladas, já podemos instalar o wordmove:

gem install wordmove

No diretório principal do seu projeto local (mesma pasta onde fica o wp-config.php), crie um arquivo chamado Movefile, com o seguinte conteúdo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
# ambiente local
local:
  vhost: "http://vhost.local" # Url do seu ambiente local
  wordpress_path: "/home/username/sites/seu-site" # Caminho do absoluto do seu projeto

  database:
    name: "database_name" # banco de dados local
    user: "user" # usuário do banco de dados
    password: "password" # senha do banco de dados
    host: "127.0.0.1" # host do banco de dados

# ambiente de homologação
staging:
  vhost: "http://example.com"
  wordpress_path: "/var/www/seu-site"

  database:
    name: "database_name"
    user: "user"
    password: "password"
    host: "host"

  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "Movefile"
    - "wp-config.php"
    - "wp-content/*.sql"

  ssh:
    host: "host"
    user: "user"
    password: "password" # A senha é opcional, você pode usar chaves SSH, se preferir

# ambiente de produção
production:
  vhost: "http://example.com"
  wordpress_path: "/var/www/seu-site"

  database:
    name: "database_name"
    user: "user"
    password: "password"
    host: "host"

  exclude:
    - ".git/"
    - ".gitignore"
    - ".sass-cache/"
    - "bin/"
    - "tmp/*"
    - "Gemfile*"
    - "Movefile"
    - "wp-config.php"
    - "wp-content/*.sql"

  ssh:
    host: "host"
    user: "user"
    password: "password" # A senha é opcional, você pode usar chaves SSH, se preferir

Este arquivo é escrito em YAML, e bastante autoexplicativo. Caso você queira saber mais sobre o wordmove, pode visitar o repositório oficial do projeto: https://github.com/welaika/wordmove

O arquivo de configuração do Wordmove é dividido em grandes seções principais, que são os nossos ambientes: local, staging e production. Cada um dos ambientes tem suas configurações específicas, mas em geral temos estas opções:

vhost

  • é a url do nosso projeto

wordpress_path

  • o caminho absoluto do nosso projeto

database

  • credenciais de acesso ao nosso banco de dados

exclude

  • arquivos que você não deseja enviar para o ambiente em questão (não precisamos enviar o wp-config.php para o servidor por exemplo)

ssh

  • credenciais de acesso ao ambiente em questão, via SSH

Estas configurações já nos permitem fazer deploy do nosso projeto nos ambientes de homologação e produção.

Deploy com o Wordmove

Você já sabe como funciona o processo de desenvolvimento até aqui. Primeiro desenvolvemos em ambiente local, subimos as alterações para o GitHub e depois subimos para o ambiente de homologação (staging). Mostramos acima que você pode fazer deploy em staging em alguns servidores usando GIT (como o caso do WP Engine). Mas se você optou por servidores tradicionais e está utilizando o Wordmove, pode subir o projeto para o ambiente de homologação da seguinte forma:

wordmove push -e staging --all

O comando acima vai subir nosso projeto inteiro pra staging, inclusive o banco de dados, por isso tenha cuidado. Se quisermos subir somente o tema que estamos trabalhando, podemos fazer o seguinte:

wordmove push -e staging -t

O mesmo vale para os plugins:

wordmove push -e staging -p

Para “copiarmos” o projeto inteiro do nosso ambiente de homologação para o ambiente local:

wordmove pull -e staging --all

O uso do Wordmove é muito simples, para maiores informações você pode consultar a documentação, ou digitar wordmove help no terminal.

Ambiente de produção

Até o momento vimos como configurar nosso ambiente local, já criamos o repositório do nosso projeto no GitHub e já subimos nosso projeto para o ambiente de homologação. Lembre-se que precisamos ter certeza de que tudo está funcionando perfeitamente antes de subirmos para o ambiente de produção.

Vimos anteriormente duas formas de fazer deploy do nosso projeto: Git e Wordmove.

Deploy em production com Git

Se você usa servidores com suporte a Git, você precisa adicionar o repositório remoto, assim como fizemos com o ambiente de staging. Vamos usar o exemplo da WP Engine novamente:

Adicionando o repostório remoto: git remote add production git@git.wpengine.com:production/meu-site.git

Deploy: git push production master

Deploy em production com o wordmove

wordmove push -e production -all

Lembre-se que o --all fará com que o todo o projeto seja enviado para produção, inclusive o banco de dados, portanto sempre fique atento ao contexto em que você está trabalhando. Se você está apenas desenvolvendo um plugin, pode substituir o --all por -p, por exemplo.

O processo do início ao fim

Resumindo todo o processo, o que você fez até agora foi:

  • Configurar o ambiente local
  • Instalar o WP-CLI no ambiente local para facilitar operações do WordPress
  • Configurar o WordPress (ambiente local)
  • Criar um repositório no GitHub
  • Adicionar o endereço remoto do repositório (ambiente local)
  • Desenvolver as funcionalidades/alterações (ambiente local)
  • Testar o projeto (ambiente local)
  • Subir para o GitHub
  • Subir para o ambiente de homologação
  • Subir para o ambiente de produção

Seguir todos estes passos, pode ser um pouco confuso e dificultoso no início, mas depois você vai ganhar muito em produtividade.

Lembre-se que por mais que fazer toda essa configuração seja um pouco maçante, você só precisará fazer uma vez. Após isso, poderá controlar todo o workflow com apenas alguns comandos, e com todas aquelas vantagens que vimos nestes dois posts.

E você, como faz esse processo de desenvolvimento com WordPress? Comente abaixo para trocarmos ideias.

Filipe Mateus do Nascimento

Filipe Mateus do Nascimento

Full Stack Developer

Comentários