Criação automática do aplicativo Gatsby usando Webhook personalizado no WordPress

( Shoyeb Inamdar) (5 de maio de 2020)

Visão geral:

Em Technogise , recentemente fizemos um projeto para um de nossos clientes, que é um produtor multinacional de alimentos para animais de estimação com sede na UE . O cliente tem vários sites no WordPress e cada site tem muito conteúdo, incluindo fotos e vídeos. Eles também adicionam várias postagens de blog todos os dias à plataforma.

O desafio:

Com tanto conteúdo, o tempo de resposta do site do WordPress era muito lento . Eles não queriam adicionar mais & mais servidores para gerenciar o tráfego e estavam procurando uma solução mais lógica.

Nossa solução:

Após nossa análise, meu colega Ankita Saxena e Percebi que a maior parte do conteúdo é estático por natureza. Havia poucos formulários ou fluxos de usuários críticos para os negócios que ainda precisavam ser suportados. Nossa abordagem foi primeiro fazer alterações em um microsite e ver os resultados. Se atendesse às necessidades do negócio, replicaríamos o mesmo para outros sites. Como o conteúdo era estático, estava muito claro que deveríamos aproveitar os recursos do CDN para levar os dados mais perto dos usuários enquanto ainda tendo o poder de atualizar o cache quando os dados mudam. Para conseguir isso, usamos Gatsby .

Gatsby com WordPress

Gatsby é um moderno e moderno gerador de sites para ReactJS . Gatsby pode extrair dados de qualquer fonte de dados, como WordPress, Drupal, YAML, JSON, bancos de dados, etc. e, em seguida, construir páginas da web estáticas com a ajuda de consultas GraphQL.

Neste artigo, vamos nos concentrar mais na construção Site de Gatsby com WordPress como fonte de dados. Criamos um projeto de amostra usando Gatsby que cria um site estático a partir de dados do WordPress. Para obter mais detalhes, consulte a documentação oficial do Gatsby para sourcing do WordPress .

Visão geral do Gatsby

Deixe-nos faça uma visão geral de 10.000 pés do processo de construção de Gatsby.

Depois de uma construção bem-sucedida do Gatsby, ele gera todos os recursos necessários para executar o site na pasta pública. Os ativos incluem arquivos minimizados, imagens transformadas, arquivos JSON com informações & dados para cada página, HTML estático para cada página e muito mais. A compilação final consiste apenas em arquivos estáticos que podem ser implantados em qualquer lugar.

Para refletir as mudanças nos ativos estáticos gerados correspondentes à mudança na origem, temos que reconstruir e reimplantar.

Maneiras para reconstruir automaticamente

Para manter o site Gatsby atualizado com WordPress, devemos sempre construir nosso site automaticamente sempre que há uma atualização nos dados do WordPress (como adição de páginas / posts / menus). Com base na natureza do site, a seguir estão as abordagens para reconstruir automaticamente:

  1. Cron Job : Programe uma construção de Gatsby em um intervalo de tempo para reconstruir os ativos.
  2. Webhook usando o plugin : Crie um Webhook que reconstrói o site sempre que houver mudança na fonte. Aqui estão algumas maneiras de acionar o webhook:
  • – Instale o plug-in Build Trigger for Gatsby e configure URL do webhook. Pode ser um URL de trabalho do Jenkins. No entanto, há uma personalização muito limitada disponível aqui.
  • – Use ferramentas externas como Netlify ou Vercel , que pode construir rapidamente nosso site.
  • – Construa um plugin personalizado para chamar o webhook com segurança

Em nosso caso, o conteúdo deveria ser publicado várias vezes em um dia e assim que for alterado. Isso nos deixou com a opção de seguir a abordagem de webhook .O cliente estava hesitante em usar um aplicativo de terceiros, então continuamos com a construção de nosso próprio plug-in personalizado .

Webhook personalizado no WordPress

Para configurar um Webhook personalizado, temos que fazer as duas coisas a seguir,

  1. Configurar o WordPress para acionar o webhook em qualquer alteração no conteúdo
  2. Crie um endpoint para reconstruir o site usando Gatsby

Agora vamos entrar nos detalhes de cada etapa:

Configure o WordPress

Para configurar o wordpress para acionar o webhook, adicione o seguinte snippet de código a wp-includes / functions.php .

Nota: Este snippet é apenas para postagens do WordPress. Para outras entidades no WordPress, temos que adicionar snippets relevantes.

Webhook personalizado

Para criar um webhook personalizado, temos que criar um endpoint básico (em qualquer idioma de nossa preferência) . Usamos Java – Spring Boot como uma implementação de referência para criar um webhook. Este endpoint aciona a construção de Gatsby para gerar um site estático. Para obter o código-fonte completo, consulte o repositório wordpress-gatsby-webhook .

Se seus dados estiverem mudando com muita frequência , então a implementação de referência do webhook pode ser melhorada enfileiramento a solicitação de uma janela de, digamos, X minutos e, em seguida, acione a construção. Isso evitará várias reconstruções.

Conclusão

A abordagem acima de usar Gatsby e webhook personalizado nos ajudou a reconstruir e implantar instantaneamente atualizações / alterações no wordpress em tempo de execução. Isso ajudou o cliente não apenas a servir o site com mais rapidez, mas também a fazer alterações frequentes e ver rapidamente aquelas no site ao vivo.

Os próximos passos para nós são tornar a construção flexível para gerar ativos para o conteúdo atualizado apenas.

Sinta-se à vontade para bifurcar, usar ou contribuir nos seguintes repositórios:

https://github.com/technogise / wordpress-gatsby-webhook
https://github.com/technogise/gatsby-wordpress

I gostaria de agradecer a minha colega de equipe Ankita Saxena por ela colaboração e contribuição para este projeto, bem como para este artigo.