Comment créer un site statique avec Cloudflare Workers Sites

Bonjour ! Je m'appelle Dima, je suis le responsable de l'équipe SysOps chez Wrike. Dans cet article, je vais vous montrer comment, en 10 minutes et pour 5 dollars par mois, créer un site web aussi proche que possible des utilisateurs et automatiser son déploiement. L'article est presque sans rapport avec les problèmes que nous résolvons au sein de notre équipe. Il s'agit plutôt de mon expérience personnelle et de mes impressions de découverte d'une technologie qui m'était jusqu'alors inconnue. J'ai essayé de décrire les étapes aussi en détail que possible pour que le guide soit utile aux personnes de différents niveaux d'expérience. J'espère que cela vous plaira. Allons-y !

Donc, vous avez peut-être déjà trouvé un moyen simple et peu coûteux d'héberger votre site web. Peut-être même gratuit, comme décrit dans cet excellent article.

Mais peut-être que vous vous ennuyez quand même et que vous souhaitez explorer ce formidable nouveau monde technologique ? Par exemple, pensez-vous à l'automatisation du déploiement et aimeriez-vous maximiser la rapidité de votre site ? Dans cet article, nous utiliserons Hugo, mais ce n'est pas obligatoire.

Pour l'automatisation, nous utilisons Gitlab CI/CD, mais que faire pour améliorer la vitesse ? Déployons le site directement sur Cloudflare à l'aide de Worker Sites.

Ce dont vous avez besoin pour commencer:

• Gitlab (le vôtre ou cloud)

• Compte sur Cloudflare

• Node.js/NPM installé Partie 1 : Installation de Hugo

Si vous avez déjà installé Hugo ou si vous préférez un autre générateur de sites statiques (ou si vous n'en utilisez pas du tout), vous pouvez passer cette partie.

Téléchargez Hugo depuis

1. Placez le fichier exécutable Hugo dans l'un des chemins spécifiés dans https://github.com/gohugoio/hugo/releases

2. votre système PATH Créez un nouveau site :

3. hugo new site blog.example.com Changez le répertoire courant vers celui nouvellement créé :

4. cd blog.example.com Choisissez un thème (

5. ou n'importe quoi d'autre)https://github.com/budparr/gohugo-theme-ananke/releases Créez votre premier article :

6. hugo new posts/my-amazing-post.md Ajoutez du contenu dans le fichier créé :

7. content/posts/my-amazing-post.md Une fois tout cela fait, changez la valeur de draft sur.
   Générez les fichiers statiques : faux

8. hugo -D Maintenant, notre site statique se trouve dans le répertoire

./public et est prêt pour le premier déploiement manuel. Partie 2 : Configurer Cloudflare

Maintenant, examinons la configuration initiale de Cloudflare. Supposons que nous avons déjà un domaine pour le site. Prenons l'exemple de

blog.example.com. Étape 1 : Créer un enregistrement DNS

Tout d'abord, sélectionnez notre domaine, puis l'option du menu

. Créez un enregistrement A pour blog et indiquez-lui une adresse IP fictive (c'est une recommandation officielle DNS, mais ils auraient pu faire quelque chose de plus joli). Étape 2 : Jeton Cloudflare, mais ils pourraient le rendre un peu plus joli).

Étape 2 : Jeton Cloudflare

1. Mon profil -> Jetons API onglet-> Créer un jeton -> Créer un jeton personnalisé

Ici, vous devrez restreindre le jeton aux comptes et zones, tout en laissant la possibilité de modifier pour les autorisations illustrées sur l'image.

Enregistrez le jeton pour le futur, nous en aurons besoin dans la troisième partie.

Étape 3 : Obtenez accountid et zoneid

Domaine → Vue d'ensemble → [panneau latéral droit]

Ce sont mes jetons, ne les utilisez pas, s'il vous plaît 🙂

Conservez-les avec le jeton, ils seront également nécessaires dans la troisième partie.

Étape 4 : Activation des Workers

Domaine → Workers → Gérer les Workers

Choisissez un nom unique et un tarif Workers → Illimité (5 $ par mois actuellement). Vous pourrez passer à la version gratuite plus tard si vous le souhaitez.

Partie 3 : Premier déploiement (déploiement manuel)

J'ai fait le premier déploiement manuellement pour comprendre ce qui se passe réellement. Bien que cela puisse être fait plus simplement :

1. Installons wrangler : npm i @cloudflare/wrangler -g

2. Allons dans le répertoire de notre blog : Choisissez un thème (

3. Lançons wrangler : wrangler init — site hugo-worker

4. Créons la configuration pour wrangler (entrez le jeton quand il vous le demande) : wrangler config

Essayons maintenant d'apporter des modifications au fichier tout juste créé wrangler.toml (ici liste complète des paramètres possibles :

1. Indiquons accountid et zoneid

2. Modifier route sur quelque chose comme *blog.example.com/*

3. Indiquons faux pour workersdev

4. Changeons le bucket en ./public (ou là où se trouve votre site statique)

5. Si vous avez plusieurs domaines en route, vous devrez corriger le chemin dans le script de travail : workers-site/index.js (voir la fonction handleEvent)

Super, il est temps de déployer le site avec la commande wrangler publish.

Partie 4 : Automatisation du déploiement

Cette instruction est rédigée pour Gitlab, mais elle transmet l’essence et la facilité du déploiement automatisé en général.

Étape 1 : Créer et configurer notre projet

1. Créez un nouveau projet GitLab et téléchargez le site : le répertoire blog.example.com avec tout le contenu doit se trouver à la racine du projet

2. Définir variable CFAPITOKEN ici : Settings → CI/CD → Variables

Étape 2 : Créer le fichier .gitlab-ci.yml et lancer le premier déploiement

Créons le fichier .gitlab-ci.yml à la racine avec le contenu suivant :

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 # ce travail n'affectera que la branche '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 # ce travail n'affectera que la branche 'master'
  tags:
    - gitlab-org-docker #

Lancement du premier déploiement manuellement (CI / CD → Pipelines → Lancer le pipeline) ou en envoyant un commit dans la branche master. Voilà !

Conclusion

Eh bien, j'ai peut-être légèrement sous-estimé, et tout le processus a pris un peu plus de dix minutes. Mais maintenant, vous avez un site rapide avec déploiement automatique et quelques idées nouvelles sur ce que vous pouvez encore faire avec Workers.

 Cloudflare Workers    Hugo    GitLab Ci

Source : habr.com