GSP747

Présentation

Dans cet atelier, vous allez créer un pipeline pour le déploiement de sites Web basés sur Hugo, un outil de création de sites Web statiques. Vous allez stocker le contenu du site Web dans Cloud Source Repositories et déployer le site Web avec Firebase, puis utiliser Cloud Build pour créer un pipeline afin de déployer automatiquement le nouveau contenu validé dans le dépôt.

Objectifs de l'atelier

Dans cet atelier, vous allez apprendre ce qui suit :

• Connaître les avantages des sites Web statiques
• Configurer un site Web avec Hugo
• Stocker le contenu du site Web dans Cloud Source Repositories
• Déployer le site Web avec Firebase
• Créer un pipeline de compilation avec Cloud Build pour automatiser le déploiement

Prérequis

Les instructions fournies ici vous guideront tout au long de l'atelier. Nous vous conseillons également de vous familiariser avec les services que vous allez utiliser. Voici d'autres ateliers qui pourraient vous être utiles :

• Cloud Source Repositories : Qwik Start
• Créer une application sans serveur qui permet de produire des fichiers PDF à l'aide de Cloud Run
• Tutoriel Web consacré à Firebase

Avantages des sites Web statiques

Les compilateurs de sites statiques tels que Hugo sont devenus populaires en raison de leur capacité à produire des sites Web ne nécessitant pas de serveur Web. Avec les plates-formes Web statiques, il n'y a aucun système d'exploitation de serveurs ni logiciel à gérer. Il existe toutefois diverses considérations opérationnelles. Par exemple, vous voulez peut-être contrôler les versions de vos publications, héberger votre site Web sur un réseau de diffusion de contenu (CDN) et provisionner un certificat SSL.

Pour répondre à ces besoins, utilisez un pipeline d'intégration continue/de déploiement continu sur Google Cloud. Un pipeline de déploiement permet aux développeurs d'innover rapidement en automatisant l'ensemble du processus de déploiement. Dans cet atelier, vous allez apprendre à créer un pipeline qui illustre cette automatisation.

Préparation

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur Démarrer l'atelier, indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique vous permet de suivre vous-même les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Nous vous fournissons des identifiants temporaires pour vous connecter à Google Cloud le temps de l'atelier.

Pour réaliser cet atelier :

• vous devez avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome) ;

Remarque : Ouvrez une fenêtre de navigateur en mode incognito/navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le temporaire étudiant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.

• vous disposez d'un temps limité ; une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.

Remarque : Si vous possédez déjà votre propre compte ou projet Google Cloud, veillez à ne pas l'utiliser pour réaliser cet atelier afin d'éviter que des frais supplémentaires ne vous soient facturés.

Démarrer l'atelier et se connecter à la console Google Cloud

1. Cliquez sur le bouton Démarrer l'atelier. Si l'atelier est payant, un pop-up s'affiche pour vous permettre de sélectionner un mode de paiement. Sur la gauche, vous trouverez le panneau Détails concernant l'atelier, qui contient les éléments suivants :

   • Le bouton Ouvrir la console Google
   • Le temps restant
   • Les identifiants temporaires que vous devez utiliser pour cet atelier
   • Des informations complémentaires vous permettant d'effectuer l'atelier

2. Cliquez sur Ouvrir la console Google. L'atelier lance les ressources, puis ouvre la page Se connecter dans un nouvel onglet.

   Conseil : Réorganisez les onglets dans des fenêtres distinctes, placées côte à côte.

   Remarque : Si la boîte de dialogue Sélectionner un compte s'affiche, cliquez sur Utiliser un autre compte.

3. Si nécessaire, copiez le nom d'utilisateur inclus dans le panneau Détails concernant l'atelier et collez-le dans la boîte de dialogue Se connecter. Cliquez sur Suivant.

4. Copiez le mot de passe inclus dans le panneau Détails concernant l'atelier et collez-le dans la boîte de dialogue de bienvenue. Cliquez sur Suivant.

   Important : Vous devez utiliser les identifiants fournis dans le panneau de gauche. Ne saisissez pas vos identifiants Google Cloud Skills Boost. Remarque : Si vous utilisez votre propre compte Google Cloud pour cet atelier, des frais supplémentaires peuvent vous être facturés.

5. Accédez aux pages suivantes :

   • Acceptez les conditions d'utilisation.
   • N'ajoutez pas d'options de récupération ni d'authentification à deux facteurs (ce compte est temporaire).
   • Ne vous inscrivez pas aux essais offerts.

Après quelques instants, la console Cloud s'ouvre dans cet onglet.

Remarque : Vous pouvez afficher le menu qui contient la liste des produits et services Google Cloud en cliquant sur le menu de navigation en haut à gauche.

Présentation du processus

Voici un diagramme de ce que vous allez créer :

L'objectif est de pouvoir valider le code afin que celui-ci déclenche le pipeline, lequel aura pour rôle de déployer le site Web. Votre parcours sera divisé en deux parties. Tout d'abord, vous allez créer le site Web localement et le déployer manuellement dans Firebase afin de mieux comprendre l'ensemble du processus. Ensuite, vous allez automatiser le processus en créant un pipeline à l'aide de Cloud Build.

Tâche 1 : Déploiement manuel

Commencez par créer le site Web manuellement sur une instance Linux pour apprendre le processus de bout en bout. Vous utiliserez également l'instance Linux pour effectuer certaines des tâches ponctuelles nécessaires à l'exécution de Firebase.

Se connecter à l'instance Linux

1. Dans le menu de navigation, sélectionnez Compute Engine > Instances de VM. Une instance qui a été créée pour vous s'affiche.
2. Au bout de la ligne, vous pouvez voir une adresse IP externe et un bouton SSH, comme illustré dans la figure ci-dessous. Si ces éléments sont masqués par un panneau d'informations, fermez-le pour voir toute la ligne.

3. Notez l'adresse IP externe, car vous en aurez besoin plus tard.
4. Cliquez sur SSH. Une fenêtre contenant une invite shell s'affiche.

Installer Hugo en local

Installez maintenant Hugo en local sur l'instance Linux afin de pouvoir tester le site Web localement avant de le déployer avec Firebase. Pour vous faciliter la tâche, un script shell est fourni.

1. Dans le shell de l'instance Linux, examinez le fichier installhugo.sh.

cat /tmp/installhugo.sh

Vous pouvez également voir le contenu ci-dessous :

Résultat :

#!/bin/bash # Copyright 2020 Google Inc. All rights reserved. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. _HUGO_VERSION=0.96.0 echo Downloading Hugo version $_HUGO_VERSION... wget \ --quiet \ -O hugo.tar.gz \ https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz echo Extracting Hugo files into /tmp... mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz echo The Hugo binary is now at /tmp/hugo.

2. Notez l'utilisation de la commande wget pour télécharger Hugo et de la commande tar pour décompresser l'archive Hugo. Dans la suite de cet atelier, vous verrez des commandes similaires au cours de la création du pipeline.

3. Saisissez les commandes ci-dessous pour exécuter le script et installer Hugo :

cd ~ /tmp/installhugo.sh

Vous recevez ensuite un message indiquant que Hugo a été installé dans le répertoire /tmp, comme illustré ci-dessous. Vous êtes prêt à créer l'infrastructure du site Web.

Créer un dépôt et le site Web initial

Créez maintenant un dépôt Cloud Source Repositories qui contiendra le site Web, puis clonez-le sur l'instance Linux. Le clonage d'un dépôt crée un miroir de celui-ci dans le shell. Cela vous permet d'implémenter le site Web dans le shell et de valider vos modifications par la suite dans le système de fichiers. Dans la suite de cet atelier, vous allez configurer un pipeline qui répond à ces commits effectués dans le dépôt.

1. Installez Git sur la VM Linux.

Saisissez les commandes suivantes dans le shell de l'instance Linux :

sudo apt-get update sudo apt-get install git

Répondez Yes à toutes les éventuelles invites.

2. Créez et clonez un dépôt de code. Saisissez les commandes suivantes dans le shell de l'instance Linux :

cd ~ gcloud source repos create my_hugo_site gcloud source repos clone my_hugo_site

Vous recevez alors des confirmations pour la création et le clonage du dépôt, comme illustré dans la figure ci-dessous. Vous pouvez ignorer les deux messages d'avertissement concernant les frais pour le dépôt et le fait que celui-ci est vide.

Cliquez sur Vérifier ma progression pour valider l'objectif. Le dépôt source a été créé

3. Vous êtes maintenant prêt à créer la structure du site. Saisissez les commandes ci-dessous dans le shell Linux.

cd ~ /tmp/hugo new site my_hugo_site --force

Normalement, la commande hugo crée le répertoire. L'option --force crée le site dans le répertoire du dépôt, qui existe déjà. Vous pouvez ainsi conserver les informations relatives à Git dans le répertoire que vous venez de cloner. Des messages indiquant que le site a été créé s'affichent, comme illustré ci-dessous.

4. Installez maintenant le thème Ananke pour mettre en page votre site. Saisissez les commandes suivantes dans le shell de l'instance Linux :

cd ~/my_hugo_site git clone \ https://github.com/budparr/gohugo-theme-ananke.git \ themes/ananke echo 'theme = "ananke"' >> config.toml

Des messages indiquant que le thème a été cloné s'affichent, comme illustré ci-dessous.

5. Supprimez les fichiers Git du répertoire de thèmes :

sudo rm -r themes/ananke/.git sudo rm themes/ananke/.gitignore Remarque : Les fichiers Git doivent être supprimés pour que Cloud Source Repository puisse ajouter les fichiers de thèmes au contrôle des versions.

6. La structure du site Web étant maintenant configurée, vous pouvez prévisualiser celui-ci. Saisissez la commande ci-dessous pour lancer le site sur le port TCP 8080 :

cd ~/my_hugo_site /tmp/hugo server -D --bind 0.0.0.0 --port 8080

Hugo crée le site et le diffuse pour un accès sur le port TCP 8080, comme illustré dans la figure ci-dessous. Le serveur s'exécute jusqu'à ce que vous l'arrêtiez en appuyant sur Ctrl+C.

7. Ouvrez un onglet de navigateur et accédez à l'adresse IP externe sur le port 8080. Utilisez l'URL suivante, en remplaçant [EXTERNAL IP] par l'adresse IP externe de votre instance :

http://[EXTERNAL IP]:8080

Le site Web doit ressembler à ceci :

Cliquez sur Vérifier ma progression pour valider l'objectif. Le site Web est accessible sur le port 8080

8. Revenez au shell Linux et appuyez sur Ctrl+C pour arrêter le serveur Hugo.

Ajouter Firebase à votre projet

Maintenant que vous savez à quoi ressemble le site Web, il est temps de le déployer sur Firebase. Commencez par activer Firebase dans votre projet existant.

1. Ouvrez un nouvel onglet dans le navigateur que vous utilisez pour accéder à la console Google Cloud, puis ouvrez Firebase dans cet onglet pour accéder à la console Firebase.

2. Cliquez ensuite sur Ajouter un projet.

Vous êtes invité à sélectionner un nom pour votre projet.

3. Cliquez à l'intérieur du champ de nom, puis sélectionnez votre projet Google Cloud existant (commençant par "qwiklabs-gcp-…"), comme illustré dans la figure ci-dessous :

4. Cochez les cases J'accepte les Conditions d'utilisation de Firebase et Je confirme que je n'utiliserai Firebase que pour mes activités commerciales, mon entreprise, mes créations ou ma profession. Cliquez sur Continuer.
5. Vous pouvez être invité à confirmer le mode de facturation Firebase. Les coûts Firebase sont inclus dans l'atelier. Si vous y êtes invité, cliquez sur Confirmer le mode de facturation.
6. Vous êtes invité à confirmer certains critères lors de l'ajout de Firebase à un projet. Cliquez sur Continuer.
7. Vous devez confirmer que vous utilisez Google Analytics pour ce projet Firebase. Comme il s'agit d'un environnement d'atelier, désactivez Google Analytics à l'aide du bouton, puis cliquez sur Ajouter Firebase. L'ajout de Firebase au projet prend environ une minute.
8. Cliquez sur Continuer si vous y êtes invité après avoir ajouté Firebase.

Déployer le site sur Firebase

1. Installez la CLI Firebase dans le shell de l'instance Linux :

curl -sL https://firebase.tools | bash

2. Vous devez maintenant initialiser Firebase. Saisissez la commande ci-dessous dans le shell :

cd ~/my_hugo_site firebase init

3. À l'aide des touches fléchées et de la barre d'espace, sélectionnez Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys (Hosting : configurez des fichiers Firebase Hosting et configurez des déploiements GitHub Action [facultatif]), puis appuyez sur Entrée. Lorsque vous êtes invité à indiquer une option de projet, sélectionnez Use an existing project (Utiliser un projet existant), puis utilisez les flèches, la barre d'espace et la touche Entrée pour sélectionner l'ID de projet spécifié sur la page des instructions de l'atelier. Pour le répertoire public, sélectionnez la valeur par défaut public. Pour la configuration en tant qu'application monopage, sélectionnez la valeur par défaut N. Pour la configuration des déploiements et compilations automatiques avec GitHub, sélectionnez N.

Si vous êtes invité à remplacer des fichiers existants, sélectionnez Y.

4. Vous êtes prêt à déployer l'application. Saisissez les commandes ci-dessous dans le shell de l'instance Linux pour recréer le site avec Hugo et le déployer avec Firebase :

/tmp/hugo && firebase deploy

5. Une fois l'application déployée, vous recevez une URL d'hébergement. Cliquez dessus pour afficher le même site Web diffusé à partir du CDN (réseau de diffusion de contenu) de Firebase. Si vous recevez un message générique de "bienvenue", attendez quelques minutes que le CDN soit initialisé, puis actualisez la fenêtre du navigateur. Enregistrez cette URL d'hébergement pour une utilisation ultérieure.

Vous avez maintenant exécuté l'intégralité du déploiement en local. Ensuite, automatisez le processus de bout en bout à l'aide de Cloud Build.

Tâche 2 : Automatiser le déploiement

Exécuter le premier commit

L'objectif de la création du pipeline est de pouvoir déclencher des compilations lorsque des modifications sont apportées au dépôt. Pour commencer, vous allez exécuter un premier commit dans le dépôt, afin de valider votre capacité à effectuer d'autres modifications.

1. Configurez les paramètres globaux des commandes Git en saisissant les commandes ci-dessous dans le shell Linux. Veillez à inclure les guillemets :

git config --global user.name "hugo" git config --global user.email "hugo@blogger.com"

2. Saisissez les commandes ci-dessous dans le shell Linux pour créer un fichier .gitignore afin d'exclure certains répertoires du dépôt :

cd ~/my_hugo_site echo "resources" >> .gitignore

3. Effectuez le premier commit dans le dépôt en saisissant les commandes ci-dessous :

git add . git commit -m "Add app to Cloud Source Repositories" git push -u origin master

Vous venez de valider (importer) la version initiale du site Web dans Google Cloud.

Configurer la compilation

Cloud Build utilise un fichier nommé cloudbuild.yaml dans le répertoire racine du dépôt pour effectuer la compilation. Le fichier est au format YAML. Comme les espaces et les retraits sont importants, ils ont déjà été placés dans l'instance Linux pour vous.

1. Saisissez la commande ci-dessous dans le shell Linux. Notez le point final (".") à la fin de la commande cp :

cd ~/my_hugo_site cp /tmp/cloudbuild.yaml .

2. Exécutez la commande suivante pour voir à quoi ressemble le fichier cloudbuild.yaml. Notez qu'un retour à la ligne est effectué sur certaines lignes en raison de leur longueur.

cat cloudbuild.yaml

Résultat :

# Copyright 2020 Google Inc. All rights reserved. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. steps: - name: 'gcr.io/cloud-builders/wget' args: - '--quiet' - '-O' # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. steps: - name: 'gcr.io/cloud-builders/wget' args: - '--quiet' - '-O' - 'firebase' - 'https://firebase.tools/bin/linux/latest' - name: 'gcr.io/cloud-builders/wget' args: - '--quiet' - '-O' - 'hugo.tar.gz' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' waitFor: ['-'] - name: 'ubuntu:18.04' args: - 'bash' - '-c' - | mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz mv firebase /tmp chmod 755 /tmp/firebase /tmp/hugo /tmp/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0

3. Voici quelques observations sur le fichier cloudbuild.yaml :

• Ce fichier comporte trois étapes nommées, chacune d'entre elles étant exécutée par une image de conteneur. Les deux premières étapes utilisent un compilateur compatible avec Google pour utiliser wget afin de télécharger les outils Hugo et Firebase. Ces deux étapes s'exécutent en parallèle. L'utilisation du compilateur wget est plus rapide que l'installation manuelle de wget.
• La troisième étape utilise un conteneur Ubuntu standard pour installer Hugo et Firebase, après quoi le site est créé et déployé. L'installation de Hugo et de Firebase pour chaque déploiement vous permet de modifier la version de Hugo à tout moment, tout en utilisant la dernière version de Firebase.
• Les commandes tar et wget sont presque identiques à celles utilisées précédemment dans le script installhugo.sh.
• Le fichier utilise également une variable de substitution personnalisée (_HUGO_VERSION) et une variable de substitution fournie par Google (PROJECT_ID) pour permettre l'utilisation de ce modèle dans différents environnements.
• Les binaires Hugo et Firebase sont créés et installés dans un répertoire temporaire pour éviter de les déployer accidentellement sur le site Web.

Créer le déclencheur Cloud Build

Créez maintenant un déclencheur qui répondra aux commits effectués dans la branche principale du dépôt.

1. Dans la ligne de commande, saisissez la commande suivante :

gcloud alpha builds triggers import --source=/tmp/trigger.yaml

2. La configuration de déclencheur contient les informations suivantes :

Champ	Valeur
Name (Nom)	commit-to-master-branch
Description	Push to master
Event (Événement)	Push to a branch
Repository (Dépôt)	my_hugo_site
Branch (regex) (Branche [expression régulière])	^master$ (assurez-vous que l'option "Invert Regex" [Inverser l'expression régulière] est décochée)
Build Configuration (Configuration de compilation)	Le fichier de configuration Cloud Build (yaml or json)
Cloud Build Configuration file location (Emplacement du fichier de configuration Cloud Build)	/ cloudbuild.yaml

Compte de service Cloud Build

Le compte de service Cloud Build doit être autorisé à utiliser Firebase pour déployer le site Web.

Cloud Build	Rôle	Description
[PROJECT_NUMBER@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	Accès complet en lecture/écriture aux ressources Hosting

Tester le pipeline

Maintenant que vous avez créé le pipeline, vous pouvez apporter une modification au site et la valider pour vérifier sa propagation.

1. Dans le shell Linux, saisissez la commande ci-dessous pour accéder au répertoire du dépôt :

cd ~/my_hugo_site

2. Modifiez le fichier config.toml et remplacez le titre :

Blogging with Hugo and Cloud Build

3. Dans le shell Linux, saisissez les commandes ci-dessous pour valider les modifications dans le dépôt et déclencher le pipeline Cloud Build :

git add . git commit -m "I updated the site title" git push -u origin master

4. Consultez l'historique de compilation pour connaître l'état de la compilation :

gcloud builds list

5. Cherchez la compilation en cours dans les journaux de compilation :

gcloud builds log $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD))

6. Récupérez l'URL de la compilation effectuée :

gcloud builds log $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD)) | grep "Hosting URL"

7. Accédez à l'URL d'hébergement pour voir les résultats. Vous pouvez également accéder à la console Firebase et examiner le projet pour trouver le nom de domaine.

Remarque : Il peut s'écouler quelques minutes avant que le CDN se mette à jour et que les informations du site soient modifiées. Remarque : Le site dispose d'un certificat SSL et est accessible à l'aide du protocole HTTPS (Hypertext Transfer Protocol Secure).

Cliquez sur Vérifier ma progression pour valider l'objectif. Cloud Build a bien été lancé

Félicitations !

Vous avez découvert la façon dont Cloud Build peut orchestrer un pipeline pour déployer rapidement des sites Web Hugo sur Firebase, qui fournit un CDN et un certificat SSL. Cloud Build vous permet d'adapter le processus à vos besoins. Les délais de déploiement courts vous permettent d'innover rapidement et de tester facilement les révisions de votre site Web. Pour en savoir plus, consultez la documentation de Cloud Build et Firebase.

Terminer votre quête

Cet atelier d'auto-formation fait partie de la quête Build Apps & Websites with Firebase. Une quête est une série d'ateliers associés qui constituent un parcours de formation. Si vous terminez cette quête, vous obtenez un badge attestant de votre réussite. Vous pouvez rendre publics les badges que vous recevez et ajouter leur lien dans votre CV en ligne ou sur vos comptes de réseaux sociaux. Inscrivez-vous à cette quête pour obtenir immédiatement les crédits associés. Découvrez toutes les quêtes disponibles dans le catalogue Google Cloud Skills Boost.

Atelier suivant

Continuez sur votre lancée en suivant l'atelier Assistant Google : créer une application avec Dialogflow et Cloud Functions, ou consultez ces autres suggestions :

• Importer des données dans une base de données Firestore
• Créer une application Web sans serveur à l'aide de Firebase

Formations et certifications Google Cloud

Les formations et certifications Google Cloud vous aident à tirer pleinement parti des technologies Google Cloud. Nos cours portent sur les compétences techniques et les bonnes pratiques à suivre pour être rapidement opérationnel et poursuivre votre apprentissage. Nous proposons des formations pour tous les niveaux, à la demande, en salle et à distance, pour nous adapter aux emplois du temps de chacun. Les certifications vous permettent de valider et de démontrer vos compétences et votre expérience en matière de technologies Google Cloud.

Dernière mise à jour du manuel : 11 décembre 2023

Dernier test de l'atelier : 11 décembre 2023

Copyright 2024 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.