
A empresa Zfort Group decidiu não renovar a assinatura corporativa da Habré.
Mas há boas notícias:
Gostaríamos de anunciar o lançamento do site atualizado zfort.com.ua , falar brevemente sobre alguns dos recursos técnicos da criação do site e também informar sobre a decisão de transferir a publicação de resumos da Habr para o blog do novo site. No blog do nosso novo site, continuaremos publicando resumos, artigos e anunciando reuniões profissionais. Você pode se inscrever em todas as atualizações e publicações para se manter informado e não perder nada.
Uma versão curta dos resumos também permanecerá em Habré, mas não será publicada no blog corporativo do Zfort Group, mas na conta alexzfort .
Um dos objetivos que estabelecemos para nós mesmos é atualizar nosso site, destinado a um público local, para torná-lo rápido e fácil. Complemente o site com seções para exibir as últimas notícias da empresa, anúncios de eventos em andamento e publicar resumos / artigos em um curto espaço de tempo com a máxima flexibilidade e a capacidade de expansão.
E agora mais sobre os detalhes da criação de um site atualizado zfort.com.ua
Inicialmente, foram consideradas três áreas principais de desenvolvimento do site atualizado:
- Faça um site baseado no WordPress;
- Desenvolva um site do zero na pilha LAMP com base em nossa própria experiência;
- Implemente um site com base na abordagem não convencional do JAMstack. Essa é uma abordagem alternativa que oferece muitas ferramentas para a criação de sites estáticos, mas com conteúdo adicionado e gerenciado dinamicamente. Essa opção implicava o desenvolvimento de um site com base no uso de serviços existentes, combinados em um único ecossistema para gerenciar e publicar conteúdo.
Depois de ponderar as opções possíveis, foi decidido seguir pelo terceiro caminho e abandonar o lado do servidor personalizado no Symfony ou WordPress em favor das tecnologias Serverless, o que permitiria obter as seguintes vantagens:
- reduzir o tempo para desenvolvimento, teste, suporte adicional e correção de erros;
- reduzir o tempo para implantação de ambientes, configuração e suporte ao servidor;
- Obtenha uma infraestrutura de projeto nativa da nuvem, em vez de ter uma solução local / auto-hospedada;
- construir todo o projeto na forma de um ecossistema de microsserviços interagindo, em vez da arquitetura monolítica clássica;
- Obtenha um sistema flexível de gerenciamento de conteúdo, seja capaz de estruturar o conteúdo, portar o conteúdo para outro sistema e assim por diante.
A versão escolhida do desenvolvimento do site zfort.com.ua implicava o máximo possível (com algumas restrições), evitando o servidor da Web tradicional e, em vez disso, construindo todo o sistema com base na tecnologia Serverless, que envolve vários serviços de interação.
Além disso, durante o planejamento e o desenvolvimento, buscamos o objetivo - obter uma solução na qual o frontend seja desamarrado ao máximo do backend do site.
Os principais componentes subjacentes ao site:
- CMS (SaaS) baseado em API sem cabeça para gerenciar o conteúdo do site;
- Gerador de site estático;
- Serviço ou funcionalidade de manipulação de formulários;
- Repositório do código fonte e sistema de controle de versão;
- Plataforma de implantação e hospedagem - uma plataforma capaz de ouvir notificações de webhooks, começar a criar e implantar sites na produção;
- Plataforma de entrega de e-mail.
De acordo com cada um dos componentes, decidiu-se usar:
- Contentful.com - como CMS baseado em API sem cabeça
- GatsbyJS - como uma estrutura para gerar páginas estáticas de sites HTML;
- Funcionalidade customizada do PHP (Symfony) como manipulador de formulários de site;
- GitLab como um repositório do código fonte do projeto e sistema de controle de versão;
- Rackspace - como provedor de hospedagem;
- SendGrid - como um sistema para enviar emails, bem como um sistema para armazenar e gerenciar modelos de email.
Além disso, o gerenciamento das vagas exibidas nas páginas do site é realizado diretamente no sistema Zoho Recruit.
O serviço escolhido como uma alternativa ao desenvolvimento personalizado da parte administrativa do gerenciamento de conteúdo do zfort.com.ua é ontentful.com . Este produto é uma plataforma de gerenciamento de conteúdo com seu painel de administração. Algo como o CMS na nuvem, mas sem uma interface de usuário. Existe apenas um painel de administração.


A obtenção de conteúdo para exibição nas páginas do site é realizada através da API Contentful. No nosso caso, usamos o plug-in gatsby-source-contentful para obter os tipos de conteúdo, entradas e ativos no Gatsby a partir dos espaços Contentful.
Além da infraestrutura de gerenciamento de conteúdo, o Contentful oferece a capacidade de redimensionar, cortar e compactar imagens por meio da API de imagens.
Prós da abordagem escolhida:
Desempenho e velocidade de exibição do site no navegador. Como a geração da página de tempo de execução não ocorre, o HTML é armazenado em cache e exibido ao usuário quase instantaneamente. Além disso, é possível transferir totalmente o site para a CDN, o que, por sua vez, além de aumentar a velocidade do trabalho, permite escaloná-lo com as ferramentas da CDN;
Arquitetura distribuída que permite substituir qualquer um dos componentes do site a qualquer momento por um esforço relativamente mínimo. Todos os serviços são separados um do outro, onde cada serviço é um aplicativo com sua própria lógica. A lógica não se mistura, as equipes de desenvolvimento de cada um dos módulos podem trabalhar quase independentemente uma da outra;
Segurança De fato, um site é uma coleção de arquivos estáticos pré-gerados. Em geral, todas as funções dinâmicas do site são alocadas em serviços de terceiros separados, cuja interação ocorre por meio da API e somente no momento da geração ou atualização do conteúdo. Como resultado, não há plug-ins nos quais você pode encontrar a vulnerabilidade. Essa abordagem também reduz o risco de ser invadida por injeção de SQL;
Portabilidade fenomenal . Os requisitos de hospedagem para o site gerado são mínimos. Um site estático pode ser hospedado em qualquer um dos sites de hospedagem que permita armazenar arquivos estáticos;
Velocidade de desenvolvimento e falta de necessidade de suporte constante ao código. Todos os arquivos de configuração necessários para gerar páginas do site, bem como modelos para gerar páginas HTML, são armazenados no GitLab. Com base na oportunidade de reutilizar soluções prontas, como alguns microsserviços que interagem entre si. Como mencionado acima, como parte administrativa para o preenchimento de conteúdo, usamos o Contentful, o trabalho com vagas é realizado no sistema Zoho Recruit.
No entanto, existem algumas dificuldades com essa abordagem:
A complexidade de sincronizar e atualizar o conteúdo do site de sistemas de terceiros. O problema é resolvido através da configuração correta de webhooks, bem como do implementador e tratamento cuidadoso deles;
Pode haver problemas ao conectar bibliotecas JS de terceiros ao gerar páginas HTML em um site no lado do servidor. O problema está resolvido, embora com algumas nuances;
A falta de um servidor tradicional introduz suas próprias dificuldades e impõe restrições nos casos em que, por exemplo, é necessário implementar uma pesquisa. No entanto, o problema de pesquisa também pode ser resolvido usando serviços de terceiros, como Algolia, etc.
O diagrama abaixo mostra esquematicamente a arquitetura do site zfort.com.ua , bem como a interação dos principais componentes.

O GatsbyJS trabalha com dados usando o protocolo GraphQL - ao criar, obtemos dados da API de serviços de terceiros e criamos uma base local de nós do GraphQL.
Além disso, as consultas do GraphQL são gravadas nos componentes para obter os dados necessários em um local específico e o HTML é construído com base nos modelos jsx.
Para trabalhar com o Zoho Recruit, foi criado um plug-in Gatsby personalizado, que recebe os dados pela API e adiciona os dados necessários ao banco de dados GraphQL.
Em geral, se necessário, você pode recusar o uso do sistema de gerenciamento de conteúdo e gerenciar o conteúdo do site alterando os arquivos .md localizados diretamente na pasta do site na hospedagem de arquivos estáticos. Todos os dados são adicionados preliminarmente ao GraphQL e, como resultado, você pode pesquisar, classificar e a maioria das outras operações mais simples de agregação e pesquisa.
Para processar solicitações de formulários, um serviço personalizado separado foi criado usando o Symfony 4. Para poder visualizar dados recebidos de vários formulários de site, um aplicativo foi criado usando o Symfony 4 (SonataAdminBundle).
Em breve, o site apresentará uma seção atualizada sobre o ZDay - uma série de reuniões profissionais regulares com base na empresa do Grupo Zfort.
Muito obrigado a todos que estiveram conosco em Habré por todos esses anos, a todos que leram, comentaram ativamente, fizeram perguntas.
Visite nosso site para continuar recebendo novos conteúdos aos quais você está acostumado, além de assinar boletins por e-mail nas áreas em que você está interessado.