🥇 Deployment stage (despliegue)

🍿 Antes de comenzar

En la lección anterior hemos realizado el despliegue de nuestro sitio web estático utilizando surge desde nuestro ambiente local. Para ello fuimos definidiendo cada uno de los valores (username, password, dominio, etc). Esto también es posible hacerlo mediante parámetros, por ejemplo.

surge --project ./public --domain subdominio.surge.sh

Habiendo aclarado lo anterior el siguiente paso es poder hacer nuestro despliegue de la aplicación directamente desde Gitlab. Es decir que cuando empujemos cambios estos se desplieguen automáticamente en nuestro sitio web creado en surge.

Para ello creamos un nuevo stage en nuestro .gitlab-ci.yml llamado deploy.

stages:
    - build
    - test
    - deploy

image: node

build website:
    stage: build
    script:
        - npm i
        - npm i -g gatsby-cli
        - gatsby build
    artifacts:
        paths:
            - ./public

test index:
    stage: test
    script:
        - grep "Gatsby" "./public/index.html"

deploy static website:
    stage: deploy
    script:
        - npm i -g surge
        - surge --project ./public --domain arumals-static.surge.sh

Hemos agregado otro stage llamado deploy static website (desplegar sitio web estático), las instrucciones para este son.

  • Instalar surge
  • Enviar el contenido del folder public a surge indicando el dominio donde este debe alojarse.

El nombre de usuario y el token son injectados automáticamente mediante las variables de entorno SURGE_LOGIN y SURGE_TOKEN y utilizados de forma automática por surge para realizar la conexión.

Al empujar nuestros cambios veremos como se ejecuta un nuevo stage dentro de Gitlab, este realizará las operaciones necesarias para desplegar nuestro sitio web estático en surge.