La empresa Zfort Group ha decidido no renovar la suscripci贸n corporativa a Habr茅.
Pero hay buenas noticias:
Nos gustar铆a anunciar el lanzamiento del sitio actualizado zfort.com.ua , hablar brevemente sobre algunas de las caracter铆sticas t茅cnicas de la creaci贸n del sitio y tambi茅n informar sobre la decisi贸n de transferir la publicaci贸n de res煤menes de Habr al blog del nuevo sitio. En el blog de nuestro nuevo sitio, continuaremos publicando res煤menes, art铆culos y anunciando reuniones profesionales. Puede suscribirse a todas las actualizaciones y publicaciones para mantenerse informado y no perderse nada.
Una versi贸n corta de los res煤menes tambi茅n permanecer谩 en Habr茅, pero no se publicar谩 en el blog corporativo del Grupo Zfort, sino en la cuenta de alexzfort .
Uno de los objetivos que nos fijamos es actualizar nuestro sitio dirigido a un p煤blico local, para que sea r谩pido y f谩cil. Complemente el sitio con secciones para mostrar las 煤ltimas noticias de la compa帽铆a, anuncios de eventos en curso y publicar res煤menes / art铆culos en poco tiempo con la m谩xima flexibilidad y la capacidad de expandirse.
Y ahora m谩s sobre los detalles de la creaci贸n de un sitio actualizado zfort.com.ua
Inicialmente, se consideraron tres 谩reas principales de desarrollo del sitio actualizado:
- Crea un sitio basado en WordPress;
- Desarrolle un sitio desde cero en la pila LAMP basado en nuestra propia experiencia;
- Implemente un sitio basado en el enfoque no convencional de JAMstack. Este es un enfoque alternativo que ofrece muchas herramientas para elegir para crear sitios est谩ticos, pero con contenido agregado y administrado din谩micamente. Esta opci贸n implicaba el desarrollo de un sitio basado en el uso de servicios existentes, combinado en un ecosistema 煤nico para administrar y publicar contenido.
Despu茅s de sopesar las posibles opciones, se decidi贸 ir por el tercer camino y abandonar el lado del servidor personalizado en Symfony o WordPress en favor de las tecnolog铆as sin servidor, lo que permitir铆a obtener las siguientes ventajas:
- reducir el tiempo de desarrollo, prueba, soporte adicional y correcci贸n de errores;
- reducir el tiempo de implementaci贸n de entornos, configuraci贸n y soporte de servidor;
- Obtenga una infraestructura de proyecto nativa de la nube, en lugar de tener una soluci贸n local / autohospedada;
- construir todo el proyecto en forma de un ecosistema de microservicios interactivos, en lugar de la arquitectura monol铆tica cl谩sica;
- Obtenga un sistema de administraci贸n de contenido flexible, sea capaz de estructurar contenido, portar contenido a otro sistema, etc.
La opci贸n elegida para el desarrollo del sitio zfort.com.ua implicaba el m谩ximo posible (con algunas limitaciones) evitando el servidor web tradicional y, en cambio, construyendo todo el sistema basado en tecnolog铆a Serverless, que involucra varios servicios interactivos.
Adem谩s, durante la planificaci贸n y el desarrollo, perseguimos el objetivo: obtener una soluci贸n en la que la interfaz se desate al m谩ximo desde el back-end del sitio.
Los principales componentes subyacentes al sitio:
- CMS basado en API sin cabeza (SaaS) para administrar el contenido del sitio;
- Generador de sitio est谩tico;
- Servicio de manejo de formularios o funcionalidad;
- Repositorio de c贸digo fuente y sistema de control de versiones;
- Plataforma de implementaci贸n y alojamiento: una plataforma capaz de escuchar las notificaciones de webhooks, comenzar a construir e implementar sitios para la producci贸n;
- Plataforma de entrega de correo electr贸nico.
De acuerdo con cada uno de los componentes, se decidi贸 utilizar:
- Contentful.com - como CMS basado en API sin cabeza
- GatsbyJS: como marco para generar p谩ginas de sitio HTML est谩ticas;
- Funcionalidad personalizada PHP (Symfony) como manejador de formulario de sitio;
- GitLab como repositorio del c贸digo fuente del proyecto y el sistema de control de versiones;
- Rackspace: como proveedor de alojamiento;
- SendGrid: como un sistema para enviar correos electr贸nicos, as铆 como un sistema para almacenar y administrar plantillas de correo electr贸nico.
Adem谩s, la gesti贸n de las vacantes que se muestran en el sitio se lleva a cabo directamente en el sistema Zoho Recruit.
El servicio que se eligi贸 como alternativa al desarrollo personalizado de la parte administrativa de la administraci贸n de contenido para zfort.com.ua es ontentful.com . Este producto es una plataforma de gesti贸n de contenido con su panel de administraci贸n. Algo as铆 como el CMS en la nube, pero sin una interfaz de usuario. Solo hay un panel de administraci贸n.
La obtenci贸n de contenido para mostrar en las p谩ginas del sitio se lleva a cabo a trav茅s de la API Contentful. En nuestro caso, utilizamos el complemento gatsby-source-contentful para obtener los tipos de contenido, entradas y activos en Gatsby desde espacios Contentful.
Adem谩s de la infraestructura de administraci贸n de contenido, Contentful brinda la capacidad de cambiar el tama帽o, recortar y comprimir im谩genes a trav茅s de la API de im谩genes.
Ventajas del enfoque elegido:
Rendimiento y velocidad de visualizaci贸n del sitio en el navegador. Como resultado de la generaci贸n de la p谩gina de tiempo de ejecuci贸n, el HTML se almacena en cach茅 y se muestra al usuario casi instant谩neamente. Adem谩s, es posible transferir completamente el sitio a CDN, lo que, a su vez, adem谩s de aumentar la velocidad del trabajo, le permite escalarlo con las herramientas de CDN;
Arquitectura distribuida que le permite reemplazar cualquiera de los componentes del sitio en cualquier momento con un esfuerzo relativamente m铆nimo. Todos los servicios est谩n separados entre s铆, donde cada servicio es una aplicaci贸n con su propia l贸gica. La l贸gica no se mezcla, los equipos de desarrollo de cada m贸dulo pueden trabajar casi independientemente uno del otro;
Seguridad De hecho, un sitio es una colecci贸n de archivos est谩ticos pregenerados. En general, todas las funciones din谩micas del sitio se asignan a servicios independientes de terceros, cuya interacci贸n ocurre a trav茅s de la API y solo en el momento de generar o actualizar el contenido. Como resultado, no hay complementos donde pueda encontrar la vulnerabilidad. Este enfoque tambi茅n mitiga el riesgo de ser pirateado mediante inyecci贸n SQL;
Portabilidad fenomenal . Los requisitos de alojamiento para el sitio generado son m铆nimos. Un sitio est谩tico se puede alojar en cualquiera de los sitios de alojamiento que permiten almacenar archivos est谩ticos;
Velocidad de desarrollo y falta de necesidad de soporte de c贸digo constante. Todos los archivos de configuraci贸n necesarios para generar p谩ginas del sitio, as铆 como las plantillas para generar p谩ginas HTML, se almacenan en GitLab. Basado en la oportunidad de reutilizar soluciones preparadas como algunos microservicios que interact煤an entre s铆. Como se mencion贸 anteriormente, como parte administrativa para llenar el contenido, utilizamos Contentful, el trabajo con vacantes se lleva a cabo en el sistema Zoho Recruit.
Sin embargo, hay algunas dificultades con este enfoque:
La complejidad de sincronizar y actualizar el contenido del sitio desde sistemas de terceros. El problema se resuelve con la configuraci贸n correcta de los webhooks, as铆 como con el implementador y su manejo cuidadoso;
Puede haber problemas para conectar bibliotecas JS de terceros cuando el lado del servidor genera p谩ginas HTML en un sitio. El problema est谩 resuelto, aunque con algunos matices;
La falta de un servidor tradicional presenta sus propias dificultades e impone restricciones en los casos en que, por ejemplo, es necesario implementar una b煤squeda. Sin embargo, el problema de b煤squeda tambi茅n se puede resolver utilizando servicios de terceros como Algolia, etc.
El siguiente diagrama muestra esquem谩ticamente la arquitectura del sitio zfort.com.ua , as铆 como la interacci贸n de los componentes principales.
GatsbyJS trabaja con datos utilizando el protocolo GraphQL: cuando compilamos, obtenemos datos de la API de servicios de terceros y creamos una base local de nodos GraphQL.
Adem谩s, las consultas GraphQL se escriben en los componentes para obtener los datos necesarios en un lugar en particular y el HTML se construye sobre la base de plantillas jsx.
Para trabajar con Zoho Recruit, se escribi贸 un complemento Gatsby personalizado, que recibe datos por API y agrega los datos necesarios a la base de datos GraphQL.
En general, si es necesario, puede negarse a usar el sistema de administraci贸n de contenido y administrar el contenido del sitio cambiando los archivos .md ubicados directamente en la carpeta del sitio en el alojamiento de archivos est谩ticos. Todos los datos se agregan preliminarmente a GraphQL y, como resultado, puede buscar, ordenar y la mayor铆a de las otras operaciones de agregaci贸n y b煤squeda m谩s simples.
Para procesar las solicitudes de los formularios, se cre贸 un servicio personalizado separado usando Symfony 4. Para poder ver los datos recibidos de varios formularios del sitio, se cre贸 una aplicaci贸n usando Symfony 4 (SonataAdminBundle).
Pronto, el sitio presentar谩 una secci贸n actualizada sobre ZDay, una serie de reuniones profesionales peri贸dicas basadas en la compa帽铆a del Grupo Zfort.
Muchas gracias a todos los que han estado con nosotros en Habr茅 durante todos estos a帽os, a todos los que leyeron, comentaron activamente y formularon preguntas.
Visite nuestro sitio para continuar recibiendo contenido nuevo al que est谩 acostumbrado, as铆 como suscribirse a boletines por correo electr贸nico en las 谩reas que le interesan.