Desplegar app en Okteto con Gitlab CI

  • Imagen de redactor Daniel J. Saldaña
  • 2 de enero de 2023
Desplegar app en Okteto con Gitlab CI

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.

Terminal window
npm create vite@latest

Ahora debemos crear nuevo Dockerfile

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.

Terminal window
helm create app-okteto

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

values.yaml
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.

Chart.yaml
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.

.gitlab-ci.yml
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

次回まで

¡Suscríbete y recibe actualizaciones sobre tecnología, diseño, productividad, programación y mucho más!
0
0