Comment déployer des pages GitLab vers Cloudflare?

Lorsque vous utilisez GitLab pour héberger le code source de votre projet de développement de logiciel web, vous pouvez déployer votre site web vers Cloudflare Pages. Normalement, vous devriez utiliser le pipeline GitLab CI pour construire votre projet de site Web. Dans cet article, je vous montre donc comment configurer votre GitLab CI pour qu'il se déploie sur les pages Cloudflare.

GitLab

GitLab est une plateforme d'hébergement et de DevOps partiellement open source basée sur Git, dont les racines remontent à l'Ukraine. Avec son siège social à San Francisco, elle propose le suivi des problèmes, l'intégration continue et un pipeline de déploiement. Étant donné que GitLab ne propose pas de fonctionnalités cloud avancées comme l'hébergement de sites statiques ou de fonctions serverless, vous pouvez combiner GitLab avec des offres tierces, par exemple de la société Cloudflare.

Pages Cloudflare

Cloudflare est une société d'hébergement en nuage qui propose un CDN et d'autres services aux créateurs de sites web. Cloudflare Pages est l'offre de Cloudflare orientée vers les développeurs frontaux qui veulent déployer rapidement leur site Web. Vous pouvez le connecter directement à GitLab, mais vous devez autoriser Cloudflare à accéder à votre dépôt GitLab. Si vous ne souhaitez pas autoriser Cloudflare à accéder à votre dépôt Git, vous pouvez déployer le code directement à partir de votre pipeline GitLab CI.

Configuration du pipeline GitLab CI

L'exécution d'un pipeline de CI est une bonne pratique pour tout projet de logiciel web. Un pipeline de CI est une série d'étapes qui doivent être exécutées pour livrer une nouvelle version d'un logiciel.

Dans GitLab, il existe le .gitlab-ci.yml où vous configurez vos étapes de construction et de déploiement. Le fichier .gitlab-ci.yml est un fichier Yaml qui contient ces commandes. Les commandes sont exécutées dans l'ordre où elles sont listées. Il comprend une définition des variables qui sont nécessaires pour le déploiement sur les pages Cloudflare. Ces variables sont appelées $CLOUDFLARE_API_TOKEN et $CLOUDFLARE_ACCOUNT_ID. Ils sont transmis à la wrangler CLI de Cloudflare et sont nécessaires pour activer l'authentification. Le programme wrangler est une interface de ligne de commande (CLI) pour l'API Cloudflare. Il est utilisé ici pour déployer le code frontal sur le serveur de pages serveur Cloudflare Pages.

Afin de protéger ces jetons d'accès, ils doivent être définis directement dans les paramètres de GitLab, sous la rubrique CI/CD. Là, vous devez de développer le Variables et ajoutez les valeurs. Elles seront ensuite remplies lors de l'exécution du pipeline CI.

Dans l'application Web Cloudflare, sous My Profile/API Token vous pouvez générer ces jetons d'API. Vous devez créer un token qui a au minimum les droits de pour modifier les pages Cloudflare (Cloudflare Pages:Edit) et de lire l'adhésion (Memberships:Read).

Vous pouvez ensuite créer le script de déploiement CI dans votre projet GitLab.

Vous pouvez utiliser ce script comme exemple :

.gitlab-ci.yml

image: node:16.13

cache:
  paths:
    - node_modules/
    - .cache/
    - public/

pages:
  variables:
    CLOUDFLARE_API_TOKEN: $CLOUDFLARE_API_TOKEN
    CLOUDFLARE_ACCOUNT_ID: $CLOUDFLARE_ACCOUNT_ID
  stage: deploy
  script:
    - npm install
    - ./node_modules/.bin/gatsby build
    - npm install -g wrangler --unsafe-perm=true
    - wrangler pages publish ./public --project-name=your-website --branch=main
  artifacts:
    paths:
      - public
  only:
    - master

Ce script génère de manière statique un site Web JavaScript statique à l'aide de Gatsby et le déploie sur les pages Cloudflare à l'aide de la fonction wrangler. Pour que ce script fonctionne dans votre projet, vous devez personnaliser les valeurs passées à la commande wranger notamment le --project-name. Il s'agit du nom que vous avez choisi lors de la création du projet Cloudflare Pages. En outre, vous devrez peut-être adapter le nom du dossier où se trouve le code frontal généré qui doit être déployé. Dans l'exemple ci-dessus, il s'agit de ./public.

Conclusion

J'espère que cet article vous aura appris que l'intégration d'un déploiement vers les pages Cloudflare à partir du CI GitLab n'est pas pas très compliqué. Une approche similaire peut être utilisée pour d'autres applications de construction CI.

Références

• GitLab : https://gitlab.com

• Cloudflare Pages : https://pages.cloudflare.com

• Cloudflare Wrangler : https://developers.cloudflare.com/workers/wrangler