¡Hola! Me llamo Dima, soy el líder técnico del equipo de SysOps en Wrike. En este artículo, te contaré cómo en 10 minutos y con 5 dólares al mes puedes crear un sitio web que esté muy cerca del usuario y automatizar su despliegue. El artículo casi no tiene relación con los problemas que abordamos dentro de nuestro equipo. Más bien, es mi experiencia personal y mis impresiones al conocer una tecnología nueva para mí. He intentado describir los pasos de manera lo más detallada posible para que la guía sea útil para personas con diferentes niveles de experiencia. Espero que te guste. ¡Vamos allá!
Entonces, es posible que ya hayas encontrado una forma simple y económica de alojar un sitio web. Quizás incluso de forma gratuita, como se describe en este.
Pero, ¿qué pasa si todavía te aburres y quieres explorar el fascinante nuevo mundo de la tecnología? Digamos, que estás pensando en la automatización del despliegue y te gustaría acelerar el sitio al máximo. En este artículo, utilizaremos, pero no es obligatorio.
Para la automatización, utilizamos Gitlab CI/CD, pero ¿qué hacer con la aceleración? Vamos a desplegar el sitio directamente en Cloudflare usando.
¿Qué se necesita para comenzar?:
Gitlab (tuyos propio o )
en Cloudflare
Node.js/npm instalado
Si ya tienes Hugo instalado o si prefieres otro generador de sitios estáticos (o no usas ninguno), puedes saltarte esta parte.
Descargamos Hugo desde
Colocamos el archivo ejecutable Hugo en uno de los caminos definidos en
creamos un nuevo sitio: hugo new site blog.example.com
Cambiamos el directorio actual al que acabamos de crear:
cd blog.example.comElegimos un tema (
o lo que sea)Creamos la primera publicación: hugo new posts/my-amazing-post.md
Añadimos contenido al archivo creado:
content/posts/my-amazing-post.mdCuando todo está hecho, cambiamos el valor de draft a Generamos archivos estáticos:.
hugo -D falseAhora nuestro sitio estático está dentro del directorio
./public
y preparado para el primer despliegue manual. Parte 2: Configuramos Cloudflare Ahora vamos a ver la configuración inicial de Cloudflare. Supongamos que ya tenemos un dominio para el sitio. Tomaremos como ejemplo
blog.example.com.
Paso 1: Creamos un registro DNS Primero seleccionamos nuestro dominio y luego el menú
. Creamos un registro A para blog y le asignamos una dirección IP ficticia (esta es la
recomendación oficial DNS, pero podrían hacerlo de una manera más amigable)., но они могли бы сделать как-то посимпатичней).
Шаг 2: Токен Cloudflare
Mi perfil -> Tokens de API pestaña-> Crear Token -> Crear token personalizado
Aquí necesitarás restringir el token a cuentas y zonas, pero dejar la opción Editar para los permisos mostrados en la imagen.
Guarda el token para el futuro, lo necesitaremos en la tercera parte.
Paso 3: Obtener accountid y zoneid
Dominio → Resumen → [panel lateral derecho]
Estos son míos, por favor, no los uses 🙂
Guárdalos junto al token, también los necesitaremos en la tercera parte.
Paso 4: Activación de Workers
Dominio → Los Workers son instancias EC2 auxiliares que operan bajo un sistema Linux. Se inician únicamente durante el tiempo de respaldo (o recuperación) y actúan como proxy de respaldo. En la configuración del worker, deberá especificar Amazon VPC, la subred y el grupo de seguridad al que se conectarán estas instancias auxiliares. Puede leer más sobre esto en → Administrar Workers
Elegimos un nombre único y tarifa para Workers → Ilimitado ($5 al mes por hoy). Si lo deseas, más adelante podrás cambiar a la versión gratuita.
Parte 3: Primer despliegue (despliegue manual)
Hice el primer despliegue manualmente para averiguar qué está sucediendo realmente. Aunque todo esto se puede hacer de forma más sencilla:
Instalamos wrangler:
npm i @cloudflare/wrangler -gVamos al directorio de nuestro blog:
o lo que sea)Ejecutamos wrangler:
wrangler init — site hugo-workerCreamos la configuración para wrangler (introduce el token cuando se te pida):
wrangler config
Ahora intentaremos realizar cambios en el archivo recién creado wrangler.toml ( lista completa de configuraciones posibles):
Especificamos accountid y zoneid
Cambiamos route algo como *blog.example.com/*
Especificamos false para workersdev
Cambiamos el bucket a ./public (o donde se encuentre tu sitio web estático)
Si tienes más de un dominio en la ruta, deberías corregir la ruta en el script de trabajo: workers-site/index.js (ver función handleEvent)
Genial, es hora de desplegar el sitio con el comando wrangler publish.
Parte 4: Automatización del despliegue
Esta instrucción está hecha para Gitlab, pero transmite la esencia y simplicidad de la implementación automatizada en general.
Paso 1: Creamos y configuramos nuestro proyecto
Creamos un nuevo proyecto en GitLab y subimos el sitio: la carpeta blog.example.com con todo su contenido debe estar en la raíz del proyecto
Establecer variable CFAPITOKEN aquí: Configura → CI/CD → Variables
Paso 2: Creamos el archivo .gitlab-ci.yml y ejecutamos el primer despliegue
Creamos el 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 # este trabajo solo afectará la rama 'master'
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 # este trabajo solo afectará la rama 'master'
tags:
- gitlab-org-docker #Iniciamos el primer despliegue manual (Plataformas en la nube → Pipelines. → Ejecutar Pipeline) o enviando un commit a la rama master. ¡Voilà!
Conclusión
Bueno, tal vez he minimizado un poco, y todo el proceso tomó un poco más de diez minutos. Pero ahora tienes un sitio rápido con despliegue automático y algunas ideas nuevas sobre qué más se puede hacer con Workers.
Fuente: habr.com
