¡Hola! Mi nombre es Dima, soy líder técnico del equipo SysOps de Wrike. En este artículo te contaré cómo hacer un sitio web lo más cercano posible al usuario en 10 minutos y 5 dólares al mes y automatizar su implementación. El artículo casi no tiene nada que ver con los problemas que solucionamos dentro de nuestro equipo. Esta es más bien mi experiencia personal y mis impresiones al conocer una tecnología que es nueva para mí. Intenté describir los pasos con el mayor detalle posible para que las instrucciones fueran útiles para personas con diferentes experiencias. Espero que disfrutes. ¡Ir!
Quizás ya haya encontrado una forma sencilla y económica de alojar un sitio web. Tal vez incluso gratis, como se describe en este.
¿Pero de repente todavía estás aburrido y quieres tocar el nuevo y valiente mundo de la tecnología? Supongamos que está pensando en automatizar la implementación y le gustaría acelerar su sitio tanto como sea posible. En este artículo usaremos, pero esto es opcional.
Usamos Gitlab CI/CD para la automatización, pero ¿qué pasa con la aceleración? Implementemos el sitio directamente en Cloudflare usando.
¿Qué se requiere para comenzar?:
-
Gitlab (propio o )
-
en Cloudflare
-
Instalado
Parte 1: Instalación de Hugo
Si ya tiene Hugo instalado, o si prefiere un generador de sitios estáticos diferente (o no usa ninguno), puede omitir esta parte.
-
Descargar Hugo de
-
Colocamos el archivo ejecutable de Hugo según uno de los definidos en formas
-
Creando un nuevo sitio:
hugo new site blog.example.com -
Cambie el directorio actual al recién creado:
cd blog.example.com -
Seleccione un tema de diseño ( o lo que sea)
-
Creemos la primera publicación:
hugo new posts/my-amazing-post.md -
Agregue contenido al archivo creado: contenido/publicaciones/mi-publicación-increíble.md.
Cuando todo esté hecho, cambie el valor del borrador a false -
Generando archivos estáticos:
hugo -D
Ahora nuestro sitio estático está ubicado dentro de un directorio. ./público y listo para su primera implementación manual.
Parte 2: Configurar Cloudflare
Ahora veamos la configuración inicial de Cloudflare. Supongamos que ya tenemos un dominio para el sitio. Tomemos como ejemplo blog.ejemplo.com.
Paso 1: crea una entrada DNS
Primero, seleccione nuestro dominio y luego el elemento del menú. DNS. Creamos un registro A del blog y le indicamos alguna IP ficticia (esta es la oficial, pero podrían haberlo puesto un poquito más bonito).
Paso 2: Token de Cloudflare
-
Mi Perfil -> fichas de API pestaña-> Crear token -> Crear token personalizado
Aquí deberá limitar el token a cuentas y zonas, pero dejar la opción Editar para los permisos que aparecen en la imagen.
Guarde el token para el futuro, lo necesitaremos en la tercera parte.
Paso 3: obtenga el ID de cuenta y el ID de zona
Dominio → General → [barra lateral derecha]
Estos son míos, no los uses por favor :)
Guárdalos junto al token, también los necesitaremos en la tercera parte.
Paso 4: activar trabajadores
Dominio → en domicilio → Gestionar trabajadores
Elegimos un nombre único y una tarifa Trabajadores → Ilimitado ($5 por mes hoy). Si lo deseas, podrás actualizar posteriormente a la versión gratuita.
Parte 3: Primera implementación (implementación manual)
Hice la primera implementación manual para descubrir qué estaba pasando realmente allí. Aunque todo esto se puede hacer de forma más sencilla:
-
Instalar Wrangler:
npm i @cloudflare/wrangler -g -
Vayamos al directorio de nuestro blog:
cd blog.example.com -
Controlador de lanzamiento:
wrangler init — site hugo-worker -
Cree una configuración para Wrangler (ingrese el token cuando se le solicite):
wrangler config
Ahora intentemos hacer cambios en el archivo recién creado. wrangler.toml ( lista completa de posibles configuraciones):
-
Especificar ID de cuenta y ID de zona
-
Cambiamos ruta a algo como *blog.ejemplo.com/*
-
Especificar false para trabajadoresdev
-
Cambiar depósito a ./public (o dónde se encuentra su sitio estático)
-
Si tiene más de un dominio en la ruta, debe corregir la ruta en el script de trabajo: sitio-trabajadores/index.js (ver función manejarEvento)
Genial, es hora de implementar el sitio usando el equipo. wrangler publish.
Parte 4: Automatización de la implementación
Esta guía está escrita para Gitlab, pero captura la esencia y la facilidad de la implementación automatizada en general.
Paso 1: Crear y configurar nuestro proyecto
-
Cree un nuevo proyecto GitLab y cargue el sitio: directorio blog.ejemplo.com con todo el contenido debe estar ubicado en el directorio raíz del proyecto
-
Establecimos variable CFAPITOKEN aqui: Ajustes → CI / CD → Variables
Paso 2: cree un archivo .gitlab-ci.yml y ejecute la primera implementación
crear un archivo .gitlab-ci.yml en la raíz con el siguiente contenido:
stages:
- build
- deploy
build:
image: monachus/hugo
stage: build
variables:
GIT_SUBMODULE_STRATEGY: recursive
script:
- cd blog.example.com/
- hugo
artifacts:
paths:
- blog.example.com/public
only:
- master # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #
deploy:
image: timbru31/ruby-node:2.3
stage: deploy
script:
- wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
- tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
- cd blog.example.com/
- ../dist/wrangler publish
artifacts:
paths:
- blog.example.com/public
only:
- master # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #Lanzamos la primera implementación manualmente (CI/CD → Pipelines → Ejecutar canalización) o comprometiéndose con la rama maestra. ¡Voilá!
Conclusión
Bueno, puede que lo haya subestimado un poco y todo el proceso duró poco más de diez minutos. Pero ahora tienes un sitio rápido con implementación automática y algunas ideas nuevas sobre qué más puedes hacer con Workers.
Fuente: habr.com