Il existe 2 plates-formes les plus populaires aujourd'hui pour héberger des sites Web statiques : Netlify et Google App Engine (GAE)

Netlify a récemment gagné en popularité car il offre une expérience intégrée de création et de déploiement de sites Web statiques, le tout sur la même plate-forme.

GAE est plus flexible en ce sens qu'il prend également en charge les sites Web non statiques, mais il lui manque certainement le niveau d'intégration fourni par Netlify. Alors pourquoi utiliserais-je encore GAE dans de nombreux cas ? La réponse est simple : fréquemment, GAE propose de meilleures options de tarification. En même temps, il permet d'avoir toutes les fonctionnalités de Netlify et plus en utilisant quelques outils simples (GitHub Actions et Reliza Hub) que je vais décrire dans cet article

 Tarification
Permettez-moi d'abord de couvrir les scénarios de tarification lorsque le combo GAE + GitHub Actions a plus de sens. Le point clé est les minutes de construction. Le niveau gratuit de NetlifyâÃÂÃÂs ne donne que 300 minutes de construction par mois, ce qui n'est pas beaucoup par n'importe quel compte. Si vous utilisez quelque chose comme l'application node.js rendue statique et que vos builds prennent en moyenne 2 à 3 minutes, vous n'obtenez qu'environ 100 builds par mois sur Netlify, ce qui peut facilement ne pas suffire. Surtout si vous avez plus d'un site Web

Si vous avez besoin de plus de minutes de construction sur Netlify, payez 7 $ pour 500 minutes supplémentaires ou passez au niveau suivant qui comprend 1000 minutes, mais coûte 45 $/mois. D'autre part, sur GitHub Actions, vous obtenez 2000 minutes de construction gratuites pour les dépôts privés et des minutes de construction illimitées pour les dépôts publics. Supposons que vous construisez un site Web de documentation et décidez de le rendre public sur GitHub âÃÂà vous obtenez des minutes de construction illimitées sur GitHub Actions âÃÂàet cela fait une énorme différence

La considération suivante est le coût du trafic. Netlify fournit une sortie de bande passante de 100 Go par mois incluse dans son niveau gratuit, ce qui est généreux. Google offre 1 Go de sortie par jour gratuitement, ce qui fait environ 30 Go par mois. Donc, si votre sortie est comprise entre 30 Go et 100 Go, vous pouvez obtenir une meilleure offre sur Netlify. Cependant, une fois que vous avez dépassé 100 Go, Netlify vous facture immédiatement 20 $ pour les 100 Go suivants ce mois-ci. Google a une politique de tarification par Go de sortie qui coûte 0,12 $. Cela signifie que vous payez 12 $/100 Go âÃÂà contre 20 $/100 Go sur Netlify

Ainsi, en fonction du trafic, vous serez peut-être mieux sur Netlify ou sur GAE du point de vue de la sortie. Mais dans de nombreux cas, GAE offrirait également une meilleure valeur ici
Dernier mot sur la tarification âÃÂàsi vous utilisez quelque chose comme GitHub Actions ou CircleCI pour vos builds, vous pouvez toujours déployer sur Netlify âÃÂàce qui rend GitHub Actions système plus flexible

 Configuration du projet Google App Engine
Nous commençons par aller sur httpsconsole.cloud.google.com/appengine et créons un nouveau projet. Si vous en avez déjà un âÃÂàcliquez d'abord sur le nom de votre projet en haut puis cliquez sur
**NOUVEAU PROJET**

Entrez le nom du projet, notez ici l'ID du projet que vous obtenez (vous en aurez besoin plus tard) âÃÂàdans mon cas, c'est
*âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂàet cliquez sur **CRÉER Puis passez à ce projet depuis le sélecteur de projet en haut de la page

Cliquer sur
**Créer une application** et choisissez la région souhaitée. Ensuite, pour l'application statique, sélectionnez l'environnement Python et Standard (le niveau gratuit s'applique uniquement à l'environnement Standard). À ce stade, votre application est prête pour les prochaines étapes

Pour faire pointer votre nom de domaine vers cette application, accédez à httpsconsole.cloud.google.com/appengine/settings/domains

et cliquez
**Ajouter un domaine personnalisé Suivez les instructions et faites pointer le DNS de votre domaine vers les enregistrements fournis par Google. Lorsque cela est fait, Google pointera automatiquement votre domaine vers cette application et gérera également le certificat SSL

Enfin, nous devons préparer un compte de service qui serait responsable des déploiements automatiques. Accédez à httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (remplacez
*your_project_id *dans ce lien avec votre identifiant de projet réel, dans mon cas ce serait *evie-landing-tutorial Vous arriverez à la page de menu suivante :
Cliquez sur l'icône à trois points dans la colonne Actions à côté du compte de service par défaut App Engine. Et sélectionnez
Option **Créer une clé** dans le menu déroulant

Choisissez JSON comme type de clé et cliquez sur
**CRÉER Cela téléchargera le fichier .json sur votre machine. La dernière chose que nous devons faire ici est d'encoder ce fichier au format base64 âÃÂànous en aurons besoin plus tard lors du passage à GitHub Actions

Cela peut être fait en utilisant la ligne de commande comme suit :
base64 votre_fichier_json.json >clé.base64
Ensuite, le fichier key.base64 aurait la clé encodée en base64

** Note de sécurité ici, ces fichiers clés json et base64 permettent de contrôler votre projet GAE, donc après les avoir ajoutés aux actions GitHub (comme je le montrerai ci-dessous), il est recommandé de déchiqueter supprimer ces fichiers. Cela peut être fait à partir de cli comme suit :
déchiqueter nom_fichier_clé&& rm nom_fichier_clé
Une fois la clé obtenue, nous devons activer les API Google App Engine âÃÂàpour ce faire visitez la page httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview et cliquez sur
**ACTIVER**

 Configuration du référentiel GitHub et des actions GitHub
Enfin, il est temps de préparer notre référentiel GitHub. Ce tutoriel couvre la configuration du thème Evie par Undraw. (C'est le thème que j'utilise actuellement pour la page d'accueil de Reliza Hub !) Le thème original d'Evie est hébergé ici, mais j'utiliserai le fork de Reliza dans ce référentiel

Comme je l'ai déjà mentionné dans d'autres articles, ma philosophie de construction ces jours-ci est de tout dockeriser et d'utiliser
docker build en tant qu'environnement de build CI unifié sur plusieurs plates-formes. Par conséquent, j'ai ajouté Dockerfile, la configuration nginx et également mis à jour les versions npm par rapport au thème Evie d'origine pour avoir une version dockerisée fonctionnelle.

Maintenant, si nous faisons
docker build sur le contenu du référentiel RelizaâÃÂÃÂs Evie, il construira une image basée sur nginx servant le thème Evie sans documentation sur le port 80

Il est maintenant temps de préparer le script GitHub Actions. Nous utiliserons l'action actions-hub/gcloud@master qui simplifie l'ensemble du processus

Nous commençons par définir 2 secrets GitHub Actions nécessaires à l'action. Accédez à Paramètres ->Secrets dans votre référentiel GitHub et cliquez sur
**Nouveau secret** pour définir les 2 secrets suivants :
- GCLOUD_PROJECT_ID âÃÂà définissez-le sur l'identifiant du projet noté lors de la création de votre projet : evie-landing-tutorial dans mon cas

- GOOGLE_APPLICATION_CREDENTIALS âÃÂà définissez-le sur le contenu du fichier json-key encodé en base64 obtenu pour le compte de service Google ci-dessus

Maintenant, dans le référentiel, je crée un répertoire .github, puis un répertoire de workflows à l'intérieur. Et à l'intérieur, je crée gae_build.yml. Nous devons également ajouter le fichier app.yaml qui contient la configuration GAE et serait très simple pour le cas d'utilisation de l'application statique que j'ai

Après avoir appuyé sur ce code, il déclenchera la construction de GitHub Actions, qui effectuera un déploiement sur votre application GAE et vos services seront mis en ligne ! Chaque push ultérieur vers GitHub déclenchera automatiquement une nouvelle build GitHub Actions et mettra automatiquement à jour l'application sur GAE

Vous avez maintenant un pipeline CICD de base pour votre site Web statique prêt ! Vous pouvez vous arrêter ici ou continuer à lire comment vous pouvez ajouter une fonctionnalité de visibilité d'approbation et de déploiement à l'aide de Reliza Hub

 BONUS : Ajout d'approbations et de visibilité à l'aide de Reliza Hub

Supposons que nous ne voulions pas que chaque nouvelle version passe automatiquement en production.Au lieu de cela, nous voulons qu'ils soient d'abord déployés quelque part qui n'est pas en production, puis si nous les aimons, vous ou votre approbateur (par exemple, votre responsable marketing) avez besoin pour cliquer sur un bouton et passer en productionVoici comment cela peut être réalisé avec Reliza Hub en plus de la configuration que j'ai décrite jusqu'à présent1 à ¢ÃÂàStreaming Release Metadata to Reliza HubTout d'abord, accédez à httpsapp.relizahub.com, authentifiez-vous avec GitHub et créez votre organisation, dans mon cas, j'utiliserai*âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* comme nom d'organisation.Cliquez sur l'élément de menu **VCS** puis sur l'icône du cercle plus pour ajouter un référentiel VCSCollez l'URI de votre référentiel GitHub dans l'entrée et Reliza Hub analysez-le automatiquementCliquez sur**Soumettre et cela créera votre référentiel.Passez au menu Projets et cliquez sur l'icône du cercle plus pour créer un projet.Entrez le nom de votre projet (j'utiliserai le schéma de version * Evie Landing Set pour composant unique (majeur) âÃÂàc'est parce que GAE utilise son propre versioning composé d'un composant âÃÂàque nous utiliserons tel quel dans Reliza HubChoisissez le référentiel VCS comme étant celui que vous venez de créer à l'étape précédenteEt cliquez sur**Soumettre Cela créera un nouveau projetCliquez ensuite sur ce nom de projet nouvellement créé et cliquez sur l'icône de verrouillage pour générer la clé API du projetLorsque vous voyez l'ID API et la clé API générés pour votre projet, créez 2 nouveaux secrets dans GitHub Actions âÃÂàRELIZA_API_PROJECT_ID et RELIZA_API_PROJECT_KEY avec les valeurs correspondantesMaintenant , il est temps de mettre à jour notre script gae_build.yml pour transmettre les détails de la construction à Reliza et également passer en mode sans promotion.Cela signifie qu'à chaque git push, un déploiement sera créé sur GAE, mais Google le fera ne pas basculer le trafic vers ce nouveau déploiement avant une étape manuelle tardive rLe script mis à jour inclut le rapport du suivi du temps de construction à Reliza Hub et aura également l'URI de chaque déploiement non promu sur GAE.Vous pouvez trouver la description des différents indicateurs que nous utilisons dans le référentiel GitHub de Reliza Go ClientAprès l'exécution des actions GitHub sur push, vous pouvez ensuite accéder à la page de votre version dans Reliza Hub et voyez l'image suivante :Notez que cliquer sur le lien**Test endpoint** vous amènera à la version de déploiement réelle sur GAE correspondant à cette entrée de code source âÃÂàmais pas encore promue pour servir le traficVous pouvez également ajouter une intégration lâche en suivant le guide ici pour recevoir des notifications de chaque nouvelle version sur Reliza Hub2 âÃÂà Ajout d'approbationsAccédez à la page Paramètres de Reliza Hub et, en bas, configurez votre matrice d'approbation pour l'environnement de PRODUCTION.Dans mon cas, je n'aurai besoin que d'une approbation du MARKETING pour qu'une version soit promue en production.Comme suit :Cliquez sur**Enregistrer la matrice**Ensuite, j'installe l'application Reliza GitHub à¢ÃÂàhttpsgithub.com/apps/reliza-hub âÃÂàet suivez le tutoriel que j'ai écrit plus tôt pour enregistrez-le pour le projetEnfin, Ia nouveau flux de travail GitHub Actions qui serait déclenché sur les approbations de Reliza Hub âÃÂàvous pouvez le voir ici.Essentiellement, ce flux de travail interroge Reliza Hub pour la version la plus récente approuvée pour la production, puis demande à Google App Engine de basculer le trafic vers cette versionLa seule chose qui nécessite une configuration dans ce le script est la variable d'environnement RELIZA_PROJECT_ID âÃÂà qui doit être définie sur l'UUID du projet obtenu sur la page du projet dans Reliza Hub :Maintenant, la dernière version du projet avec une approbation de MARKETING serait automatiquement promue du côté de Google App EnginePour plus de détails sur la façon dont vous pouvez ajouter des approbateurs à l'organisation, regardez mon didacticiel vidéo sur les approbations3 âÃÂàAjouter une visibilité pour ce qui est déployé quandEnfin, nous souhaitons ajouter de la visibilité sur Reliza Hub quant à la version réellement déployée et quandPour ce faire, accédez d'abord aux instances dans Reliza Hub et cliquez sur l'icône du cercle plus pour créer de nouvelles instanceJ'entre ensuite l'URI de mon instance et sélectionne l'environnement comme PRODUCTION âÃÂàpuisque je n'ai qu'un environnement de production sur ce site Web statique.Cliquer sur**Soumettre** crée ma nouvelle instanceEnsuite, je sélectionne cette instance nouvellement créée et clique sur l'icône de verrouillage pour générer sa clé APILorsque l'ID API et la clé API sont générés, créez 2 nouveaux secrets dans GitHub Actions âÃÂà RELIZA_API_INSTANCE_ID et RELIZA_API_INSTANCE_KEY avec les valeurs correspondantesAvec cela, je mets d'abord à jour mon script de déploiement sur approbation pour ajouter une section pour vérifier le déploiement sur GAE et le diffuser sur Reliza Hub.Et j'ajoute également un workflow cron GitHub Actions pour vérifier l'état de mon application GAEAprès l'exécution de l'un de ces workflows, nous obtiendrons l'instantané de déploiement de notre application GAE dans Reliza Hub dans notre vue d'instance comme suit :RésuméÇa y est, nous avons maintenant un pipeline complet de CD CI à bouton-poussoir avec des actions GitHub déployées sur GAE et des approbations et visibilité géré par Reliza Hub.Nous pouvons également avoir des notifications Slack et notre responsable marketing afficher les modifications et appuyer sur des boutons pour les promouvoir en production sans demander au personnel technique.C'est cool ?
Si vous souhaitez me parler et discuter de ce flux de travail ou d'un autre flux de travail, réservez un appel de démonstration Reliza Hub de 30 minutes sans engagement avec moi. ÃÂ et je ferai de mon mieux pour vous aider.