Bonjour! Je m'appelle Dima, je suis responsable technique pour l'équipe SysOps chez Wrike. Dans cet article, je vais vous expliquer comment créer un site Web le plus proche possible de l'utilisateur en 10 minutes et 5 dollars par mois et automatiser son déploiement. L'article n'a presque rien à voir 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 est nouvelle pour moi. J'ai essayé de décrire les étapes avec le plus de détails possible afin que les instructions soient utiles aux personnes ayant une expérience différente. J'espère que vous apprécierez. Aller!
Alors peut-être avez-vous déjà trouvé un moyen simple et peu coûteux d’héberger un site Web. Peut-être même gratuit, comme décrit dans ce.
Mais tout à coup, vous vous ennuyez encore et vous souhaitez découvrir le nouveau monde de la technologie ? Disons que vous envisagez d'automatiser le déploiement et que vous souhaitez accélérer votre site autant que possible ? Dans cet article, nous utiliserons, mais c'est facultatif.
Nous utilisons Gitlab CI/CD pour l'automatisation, mais qu'en est-il de l'accélération ? Déployons le site directement sur Cloudflare en utilisant.
Ce qui est nécessaire pour commencer:
-
Gitlab (le vôtre ou )
-
sur Cloudflare
-
installée
Partie 1 : Installer Hugo
Si Hugo est déjà installé, ou si vous préférez un autre générateur de site statique (ou n'en utilisez pas du tout), vous pouvez ignorer cette partie.
-
Téléchargez Hugo depuis
-
On place le fichier exécutable Hugo selon un de ceux définis dans façons
-
Création d'un nouveau site :
hugo new site blog.example.com -
Remplacez le répertoire actuel par celui nouvellement créé :
cd blog.example.com -
Sélectionnez un thème de conception ( ou peu importe)
-
Créons le premier message :
hugo new posts/my-amazing-post.md -
Ajoutez du contenu au fichier créé : content/posts/my-amazing-post.md.
Lorsque tout est terminé, modifiez la valeur de brouillon en non -
Génération de fichiers statiques :
hugo -D
Maintenant, notre site statique est situé dans un répertoire ./publique et prêt pour votre premier déploiement manuel.
Partie 2 : Configuration de Cloudflare
Examinons maintenant la configuration initiale de Cloudflare. Supposons que nous ayons déjà un domaine pour le site. Prenons comme exemple blog.exemple.com.
Étape 1 : Créez une entrée DNS
Sélectionnez d’abord notre domaine, puis l’élément de menu DNS. Nous créons un blog A-record et indiquons une adresse IP fictive pour celui-ci (c'est l'officiel, mais ils auraient pu le rendre un peu plus joli).
Étape 2 : Jeton Cloudflare
-
Mon profil -> Jetons d'API onglet-> Créer un jeton -> Créer un jeton personnalisé
Ici, vous devrez limiter le jeton aux comptes et aux zones, mais laisser l'option Modifier pour les autorisations répertoriées dans l'image.
Conservez le token pour le futur, nous en aurons besoin dans la troisième partie.
Étape 3 : Obtenez l'ID de compte et l'ID de zone
Domaine → Vue d’ensemble → [barre latérale droite]
Ce sont les miens, ne les utilisez pas s'il vous plaît :)
Enregistrez-les à côté du jeton, nous en aurons également besoin dans la troisième partie.
Étape 4 : Activer les travailleurs
Domaine → Ouvriers → Gérer les travailleurs
Nous choisissons un nom et un tarif uniques Travailleurs → Illimité (5$ par mois aujourd'hui). Si vous le souhaitez, vous pourrez ultérieurement passer à la version gratuite.
Partie 3 : Premier déploiement (déploiement manuel)
J'ai effectué le premier déploiement manuel pour découvrir ce qui se passait réellement là-bas. Bien que tout cela puisse être fait plus simplement :
-
Installer Wrangler :
npm i @cloudflare/wrangler -g -
Allons dans l'annuaire de notre blog :
cd blog.example.com -
Lancement du Wrangler :
wrangler init — site hugo-worker -
Créez une configuration pour Wrangler (entrez le jeton lorsque cela vous est demandé) :
wrangler config
Essayons maintenant d'apporter des modifications au fichier nouvellement créé wrangler.toml ( liste complète des réglages possibles) :
-
Nous indiquons identifiant de compte et identifiant de zone
-
Changement route à quelque chose comme *blog.exemple.com/*
-
Nous indiquons non pour travailleursdev
-
Remplacer le compartiment par ./public (ou où se trouve votre site statique)
-
Si vous avez plusieurs domaines dans le chemin, vous devez alors corriger le chemin dans le script de travail : sites-travailleurs/index.js (voir fonction handleEvent)
Super, il est temps de déployer le site en utilisant l'équipe wrangler publish.
Partie 4 : Automatisation du déploiement
Ce guide est écrit pour Gitlab, mais il capture l'essence et la facilité du déploiement automatisé en général.
Étape 1 : Créer et configurer notre projet
-
Créez un nouveau projet GitLab et téléchargez le répertoire site : blog.exemple.com avec tout le contenu doit être situé dans le répertoire racine du projet
-
Nous fixons variable CFAPITOKEN ici: Paramètres → CI / CD → Variables
Étape 2 : Créez un fichier .gitlab-ci.yml et exécutez le premier déploiement
Créer un 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 # this job will affect only the 'master' branch
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 # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #On lance le premier déploiement manuellement (CI/CD → Pipelines → Exécuter le pipeline) ou en s'engageant sur la branche master. Voilà !
Conclusion
Eh bien, je l'ai peut-être légèrement sous-estimé, et l'ensemble du processus a pris un peu plus de dix minutes. Mais vous disposez désormais d'un site rapide avec un déploiement automatique et de nouvelles idées sur ce que vous pouvez faire d'autre avec Workers.
Source: habr.com