Desplegar app en Okteto con Gitlab CI

Daniel J. Saldaña
2 de enero de 2023
- DevOps
Puntuación de feedback

Este nuevo labs será la base de futuros nuevos post en el que iremos progresivamente desarrollando nuestro CI. En esta primera fase de nuestra PoC vamos a abordar los siguientes aspectos:

Crear nuestra aplicación frontend.
Generar la imagen Docker y subirla al Registry de Gitlab
Generar nuestro Chart
Desplegar en nuestro cluster de Kubernetes “en este caso Okteto”
Validar los manifiestos de kubernetes con kubelinter
Generar nuestra pipeline para Gitlab CI
Definir dos entornos de despliegue

Aquí os dejo el repositorio que usaremos:

Daniel J. Saldaña / app-okteto · GitLab

Lo primero que hicimos fue generar nuestra aplicación, en este caso use Vite para crear una aplicación rápida en Vue.

npm create vite@latest

Ahora debemos crear nuevo Dockerfile

# Choose the Image which has Node installed already
FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# Make the 'app' folder the current working directory
WORKDIR /app

# Copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# Install project dependencies
RUN npm install

# Copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# Build app for production with minification
RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

Como último paso deberemos de crear nuestro chart de Helm.

helm create app-okteto

Una vez creado, deberemos de cambiar el repositorio de la imagen. En mi caso quedaría de la siguiente forma:

image:
  repository: registry.gitlab.com/danieljesus.sp/app-okteto
  pullPolicy: IfNotPresent
  # Overrides the image tag whose default is the chart appVersion.
  tag: 'latest'

También cambiaremos en nombre de nuestra aplicación.

name: app-okteto

¡Ahora sí! Ha llegado el momento de registrarnos en Okteto.

Una vez que tenemos nuestra cuenta, debemos de agregar generar las siguientes variables.

ENV_KUBECONFIG, la podremos encontrar dentro de nuestro dashboard de Okteto en Settings.
OKTETO_TOKEN, exactamente en el mismo sitio que la anterior, pero esta tendremos que generarla.
OKTETO_USERNAME, será nuestro usuario.

Una vez que las tengamos, solo tendremos que darlas de alta en nuestro repositorio de Gitlab en Configuración y dentro en CI/CD apartado Variables. Ahora llego el momento de desarrollar nuestro pipeline. Como rasgos generales, veremos 4 stages. Según que rama se ejecutaran un jobs u otro. Los entornos de despliegue en el stages de review, irán cambiando según la rama desde la que despleguemos. Una vez transcurrido 30 minutos después de cada despliegue, se eliminará la aplicación desplegada.

stages:
  - lint
  - build
  - review
  - production

variables:
  REGISTRY_HOST: registry.gitlab.com
  IMAGE_DOCKER: docker:stable
  IMAGE_OKTETO: okteto/okteto:1.13.4
  IMAGE_HELM: alpine/helm

kubelinter:
  stage: lint
  image: $IMAGE_DOCKER
  services:
    - docker:dind
  script:
    - docker run -v $PWD/charts:/dir -v $PWD/lint/config.yaml:/etc/config.yaml stackrox/kube-linter lint /dir --config /etc/config.yaml
  only:
    - branches
  except:
    - main

build:
  stage: build
  image: $IMAGE_DOCKER
  services:
    - docker:dind
  script:
    - docker login -u $CI_REGISTRY_USER -p $CI_BUILD_TOKEN $REGISTRY_HOST
    - docker build -t $REGISTRY_HOST/$CI_PROJECT_PATH:$CI_COMMIT_SHA -t $REGISTRY_HOST/$CI_PROJECT_PATH:latest -f Dockerfile .
    - docker push $REGISTRY_HOST/$CI_PROJECT_PATH:$CI_COMMIT_SHA
    - docker push $REGISTRY_HOST/$CI_PROJECT_PATH:latest
  only:
    - branches
  except:
    - main

deploy-review:
  stage: review
  image: $IMAGE_OKTETO
  variables:
    APP: $CI_COMMIT_REF_SLUG
    VA_ENV: review
  script:
    - okteto preview deploy $VA_ENV-$CI_COMMIT_REF_SLUG-$OKTETO_USERNAME --scope personal --branch $CI_COMMIT_REF_NAME --repository $CI_REPOSITORY_URL --wait
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    url: https://${CI_PROJECT_TITLE}-${VA_ENV}-${CI_COMMIT_REF_SLUG}-${OKTETO_USERNAME}.cloud.okteto.net
    on_stop: stop-review
  only:
    - branches
  except:
    - main

stop-review:
  stage: review
  needs: ['deploy-review']
  image: $IMAGE_OKTETO
  when: delayed
  start_in: 30 minutes
  variables:
    APP: $CI_COMMIT_REF_SLUG
    VA_ENV: review
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    action: stop
  script:
    - okteto preview destroy $VA_ENV-$CI_COMMIT_REF_SLUG-$OKTETO_USERNAME
  only:
    - branches
  except:
    - main

deploy-production:
  stage: production
  image:
    name: $IMAGE_HELM
    entrypoint: ['']
  variables:
    VA_ENV: production
  environment:
    name: production
    url: https://${CI_PROJECT_TITLE}-${OKTETO_USERNAME}.cloud.okteto.net
  script:
    - export KUBECONFIG=${ENV_KUBECONFIG}:${KUBECONFIG:-$HOME/.kube/config}
    # "Simple" hack to dynamically set
    - sed -i 's/_CI_PROJECT_TITLE/'"${CI_PROJECT_TITLE}"'/' "charts/templates/NOTES.txt"
    - sed -i 's/_VA_ENV/'""'/' "charts/templates/NOTES.txt"
    - sed -i 's/_CI_COMMIT_REF_SLUG/'""'/' "charts/templates/NOTES.txt"
    - sed -i 's/_OKTETO_USERNAME/'"-${OKTETO_USERNAME}"'/' "charts/templates/NOTES.txt"
    - helm upgrade $CI_PROJECT_NAME ./charts
      --values=./charts/values.yaml
      --install --atomic
  only:
    refs:
      - main

uninstall-production:
  stage: production
  needs: ['deploy-production']
  image:
    name: $IMAGE_HELM
    entrypoint: ['']
  when: delayed
  start_in: 30 minutes
  environment:
    name: production
    url: https://${CI_PROJECT_TITLE}-production-$CI_COMMIT_REF_SLUG-$OKTETO_USERNAME.cloud.okteto.net
  script:
    - export KUBECONFIG=${ENV_KUBECONFIG}:${KUBECONFIG:-$HOME/.kube/config}
    - helm uninstall $CI_PROJECT_NAME
  only:
    refs:
      - main

次回まで

Feedback del Post

Gitlab CI

Desplegar app en Okteto con Gitlab CI

Posts relacionados

Cómo desplegar tu sitio web con Azure Static Web Apps y Terraform

Cómo desplegar un servidor PostgreSQL Flexible en Azure con Terraform y Azure Key Vault

Cómo desplegar una función de Azure Functions con FastAPI y GitHub