Cette page a été traduite par l'API Cloud Translation.

Développement InnerLoop utilisant Cloud Workstations avec NodeJS

1. Présentation

Cet atelier présente des fonctionnalités conçues pour simplifier le workflow de développement des ingénieurs logiciel chargés de développer des applications NodeJS dans un environnement conteneurisé. En règle générale, le développement de conteneurs nécessite que l'utilisateur comprenne les détails des conteneurs et le processus de création de conteneurs. De plus, les développeurs doivent généralement interrompre leur flux et sortir de leur IDE pour tester et déboguer leurs applications dans des environnements distants. Grâce aux outils et technologies mentionnés dans ce tutoriel, les développeurs peuvent travailler efficacement avec des applications conteneurisées sans quitter leur IDE.

Objectifs de l'atelier

Dans cet atelier, vous allez découvrir des méthodes de développement avec des conteneurs dans Google Cloud, y compris:

Créer une application Nodejs de démarrage
Configurer l'application Node.js pour le développement de conteneurs
Coder un service REST simple CRUD
Déployer sur GKE
Déboguer un état d'erreur
Utiliser les points d'arrêt et les journaux
Déploiement à chaud des modifications vers GKE
Facultatif: Intégrer Cloud SQL pour la persistance du backend

2. Préparation

Configuration de l'environnement d'auto-formation

Connectez-vous à la console Google Cloud, puis créez un projet ou réutilisez un projet existant. (Si vous ne possédez pas encore de compte Gmail ou Google Workspace, vous devez en créer un.)

Le nom du projet est le nom à afficher pour les participants au projet. Il s'agit d'une chaîne de caractères non utilisée par les API Google. Vous pouvez le modifier à tout moment.
L'ID du projet est unique parmi tous les projets Google Cloud et non modifiable une fois défini. La console Cloud génère automatiquement une chaîne unique. généralement, vous ne vous souciez pas de ce que c’est. Dans la plupart des ateliers de programmation, vous devrez référencer l'ID du projet (il est généralement identifié comme PROJECT_ID). Si l'ID généré ne vous convient pas, vous pouvez en générer un autre au hasard. Vous pouvez également essayer la vôtre pour voir si elle est disponible. Il ne peut pas être modifié après cette étape et restera actif pendant toute la durée du projet.
Pour votre information, il existe une troisième valeur, le numéro de projet, utilisé par certaines API. Pour en savoir plus sur ces trois valeurs, consultez la documentation.

Vous devez ensuite activer la facturation dans la console Cloud pour utiliser les ressources/API Cloud. L'exécution de cet atelier de programmation est très peu coûteuse, voire sans frais. Pour arrêter les ressources afin d'éviter que des frais ne vous soient facturés au-delà de ce tutoriel, vous pouvez supprimer les ressources que vous avez créées ou l'ensemble du projet. Les nouveaux utilisateurs de Google Cloud peuvent participer au programme d'essai gratuit pour bénéficier d'un crédit de 300 $.

Démarrer l'éditeur Cloudshell

Cet atelier a été conçu et testé pour être utilisé avec l'éditeur Google Cloud Shell. Pour accéder à l'éditeur,

Accédez à votre projet Google à l'adresse https://console.cloud.google.com.
En haut à droite, cliquez sur l'icône de l'éditeur Cloud Shell.

Un nouveau volet s'ouvre au bas de la fenêtre.
Cliquez sur le bouton "Ouvrir l'éditeur"

L'éditeur s'ouvre avec un explorateur à droite et un éditeur dans la zone centrale
Un volet de terminal devrait également être disponible au bas de l'écran.
Si le terminal n'est PAS ouvert, utilisez la combinaison de touches Ctrl+ pour ouvrir une nouvelle fenêtre de terminal.

Configurer gcloud

Dans Cloud Shell, définissez l'ID de votre projet et la région dans laquelle vous souhaitez déployer votre application. Enregistrez-les en tant que variables PROJECT_ID et REGION.

export PROJECT_ID=$(gcloud config get-value project)
export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')

Provisionner l'infrastructure utilisée dans cet atelier

Dans cet atelier, vous allez déployer du code sur GKE et accéder aux données stockées dans une base de données Cloud SQL. Le script de configuration ci-dessous prépare cette infrastructure pour vous.

Téléchargez le script d'installation et rendez-le exécutable.

wget https://raw.githubusercontent.com/GoogleCloudPlatform/container-developer-workshop/main/labs/nodejs/setup_with_cw.sh
chmod +x setup_with_cw.sh

Ouvrir le fichier setup_with_cw.sh et modifier les valeurs des mots de passe actuellement définis sur CHANGEME
Exécutez le script de configuration pour mettre en place un cluster GKE et une base de données Cloud SQL que vous utiliserez dans cet atelier.

./setup_with_cw.sh &

Cluster Cloud Workstations

Ouvrez Cloud Workstations dans la console Cloud. Attendez que le cluster affiche l'état READY.

Créer une configuration de stations de travail

Si votre session Cloud Shell a été déconnectée, cliquez sur "Reconnecter". puis exécutez la commande gcloud cli pour définir l'ID du projet. Remplacez l'exemple d'ID de projet ci-dessous par l'ID de votre projet Qwiklabs avant d'exécuter la commande.

gcloud config set project qwiklabs-gcp-project-id

Téléchargez et exécutez le script ci-dessous dans le terminal pour créer une configuration Cloud Workstations.

wget https://raw.githubusercontent.com/GoogleCloudPlatform/container-developer-workshop/main/labs/nodejs/workstation_config_setup.sh
chmod +x workstation_config_setup.sh
./workstation_config_setup.sh

Vérifiez les résultats dans la section "Configurations". La transition vers l'état PRÊT prend deux minutes.

Ouvrez Cloud Workstations dans la console et créez une instance.

Remplacez le nom par my-workstation et sélectionnez la configuration existante: codeoss-js.

Vérifiez les résultats dans la section "Stations de travail".

Lancer la station de travail

Démarrez et lancez la station de travail. Le démarrage de la station de travail prend quelques minutes.

Autorisez les cookies tiers en cliquant sur l'icône dans la barre d'adresse.

Cliquez sur "Site inactif ?".

Cliquez sur "Autoriser les cookies".

Une fois la station de travail lancée, l'IDE Code OSS s'affiche. Cliquez sur "Marquer comme terminé". sur la page "Premiers pas", l'IDE du poste de travail

3. Créer une application de démarrage Nodejs

Dans cette section, vous allez créer une application Node.js.

Ouvrez un nouveau terminal.

Dans Cloud Shell, créez un répertoire nommé mynodejsapp.

mkdir mynodejsapp

Cliquez sur le bouton "Allow" (Autoriser) si ce message s'affiche pour que vous puissiez copier et coller le contenu sur le poste de travail.

Accédez à ce répertoire et ouvrez-le en tant qu'espace de travail. L'éditeur sera alors actualisé en créant une configuration d'espace de travail dans le dossier que vous venez de créer.

cd mynodejsapp && code-oss-cloud-workstations -r --folder-uri="$PWD"

Ouvrez à nouveau un terminal. Installer Node et NPM à l'aide de NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
        
        # This loads nvm bash_completion
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  

nvm install stable

nvm alias default stable

4. Créer une application de démarrage

Initialiser l'application

Créez un fichier package.json en exécutant la commande suivante :

npm init

    Choose the `entry point: (index.js) src/index.js` and leave default values for the rest of the parameters. This will create the `package.json` file with following contents

{
  "name": "mynodejsapp",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Ajouter un point d'entrée

Ouvrez et modifiez le fichier package.json dans l'IDE pour inclure la commande de démarrage dans le script "start": "node src/index.js",. Une fois la modification effectuée, les scripts devraient ressembler à l'extrait de code ci-dessous:

"scripts": {
    "start": "node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Ajouter la dépendance Express

Le code que nous allons ajouter utilise également express. Ajoutons donc cette dépendance à ce fichier package.json. Une fois toutes les modifications effectuées, le fichier package.json devrait donc ressembler à l'exemple ci-dessous.

{
 "name": "mynodejsapp",
 "version": "1.0.0",
 "description": "",
 "main": "src/index.js",
 "scripts": {
   "start": "node src/index.js",
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "express": "^4.17.3"
 }
}

Créer le fichier index.js

Créez un répertoire source appelé src en sélectionnant Nouveau dossier dans la vue de l'explorateur.

Créer un fichier src/index.js

par le code suivant :

const express = require('express');
const app = express();
const PORT = 8080;

app.get('/', (req, res) => {
    var message="Greetings from Node";
    res.send({ message: message });
  });

app.listen(PORT, () => {
  console.log(`Server running at: http://localhost:${PORT}/`);

});

Notez que le port est défini sur la valeur 8080.

Générer des fichiers manifestes

Skaffold fournit des outils intégrés pour simplifier le développement de conteneurs. Au cours de cette étape, vous allez initialiser Skaffold, qui créera automatiquement des fichiers YAML Kubernetes de base. Exécutez la commande ci-dessous pour commencer le processus.

Exécutez la commande suivante dans le terminal.

skaffold init --generate-manifests

Lorsque vous y êtes invité :

Saisissez 8080 comme port
Saisissez y pour enregistrer la configuration

Deux fichiers sont ajoutés à la visualisation de l'espace de travail, skaffold.yaml et deployment.yaml

Mettre à jour le nom de l'application

Actuellement, les valeurs par défaut incluses dans la configuration ne correspondent pas au nom de votre application. Mettez à jour les fichiers pour référencer le nom de votre application plutôt que les valeurs par défaut.

Modifier les entrées dans la configuration Skaffold

Ouvrir skaffold.yaml
Sélectionnez le nom de l'image actuellement défini sur package-json-image
Effectuez un clic droit et sélectionnez "Modifier toutes les occurrences"
Saisissez le nouveau nom mynodejsapp.

Modifier les entrées dans la configuration Kubernetes

Ouvrir le fichier deployment.yaml
Sélectionnez le nom de l'image actuellement défini sur package-json-image
Effectuez un clic droit et sélectionnez "Modifier toutes les occurrences"
Saisissez le nouveau nom mynodejsapp.

Notez que dans le fichier skaffold.yaml, la section build utilise buildpacks pour conteneuriser l'application. Ce code ne contient pas de Dockerfile, et le développeur n'a pas besoin de connaître Docker pour conteneuriser cette application.

De plus, la synchronisation à chaud est automatiquement activée entre l'éditeur et le conteneur en cours d'exécution par cette configuration Skaffold. Aucune configuration supplémentaire n'est requise pour activer la synchronisation à chaud.

5. Parcourir le processus de développement

Dans cette section, vous allez apprendre à utiliser le plug-in Cloud Code pour connaître les processus de base et valider la configuration de votre application de démarrage.

Cloud Code s'intègre à Skaffold pour simplifier votre processus de développement. Lors des étapes suivantes, Cloud Code et Skaffold créent automatiquement votre image de conteneur, la transfèrent vers Container Registry, puis déploient votre application sur GKE. Cela se produit en arrière-plan afin d'éliminer les détails du flux de développement. Cloud Code améliore également votre processus de développement en fournissant des fonctionnalités traditionnelles de débogage et de synchronisation à chaud avec le développement basé sur des conteneurs.

Cliquez sur l'icône Cloud Code et sélectionnez "Sign in to Google Cloud" (Se connecter à Google Cloud) :

Cliquez sur "Procéder à la connexion".

Vérifiez le résultat dans le terminal et ouvrez le lien:

Connectez-vous avec vos identifiants d'étudiant Qwiklabs.

Sélectionnez "Autoriser" :

Copiez le code de validation et revenez à l'onglet "Station de travail".

Collez le code de validation, puis appuyez sur Entrée.

Ajouter un cluster Kubernetes

Ajouter un cluster

Sélectionnez Google Kubernetes Engine:

Sélectionnez un projet.

Sélectionner "mycluster" créé lors de la configuration initiale.

Le cluster apparaît désormais dans la liste des clusters Kubernetes sous Cloud Code. Naviguez et explorez le cluster à partir de cette page.

Définir l'ID de projet actuel à l'aide de la CLI gcloud

Copiez l'ID de projet de cet atelier depuis la page Qwiklabs.

Depuis le terminal, exécutez la commande gcloud cli pour définir l'ID du projet. Remplacez l'exemple d'ID de projet avant d'exécuter la commande. SUBSTITUTEZ l'ID du projet avant d'exécuter la commande ci-dessous.

gcloud config set project qwiklabs-gcp-project-id

Déployer sur Kubernetes

Dans le volet situé en bas de l'éditeur Cloud Shell, sélectionnez Cloud Code .

Dans le panneau qui s'affiche en haut, sous SESSIONS DE DÉVELOPPEMENT, sélectionnez Exécuter sur Kubernetes. Si vous y êtes invité, sélectionnez "Oui" pour utiliser le contexte Kubernetes actuel.

Lorsque vous exécutez la commande pour la première fois, une invite s'affiche en haut de l'écran pour vous demander si vous voulez le contexte Kubernetes actuel. Sélectionnez "Oui" accepter et utiliser le contexte actuel.

Une invite s'affiche ensuite pour vous demander quel registre de conteneurs utiliser. Appuyez sur Entrée pour accepter la valeur par défaut fournie

Sélectionnez l'onglet "Output" (Sortie) dans le volet inférieur et Kubernetes: Run/Debug (Kubernetes : Exécuter/Déboguer) dans le menu déroulant pour afficher la progression et les notifications.

Sélectionnez "Kubernetes: Run/Debug - Détaillé". dans le menu déroulant du canal à droite pour afficher des informations supplémentaires et les journaux diffusés en direct depuis les conteneurs.

Revenez à la vue simplifiée en sélectionnant "Kubernetes: Run/Debug" (Kubernetes : Exécuter/Déboguer) dans le menu déroulant
Une fois la compilation et les tests terminés, l'onglet "Output" (Sortie) indique Resource deployment/mynodejsapp status completed successfully, et une URL s'affiche : "Forwarded URL from service demo-app: http://localhost:8080"
Dans le terminal Cloud Code, pointez sur l'URL affichée dans le résultat (http://localhost:8080), puis sélectionnez "Suivre le lien" dans l'info-bulle qui s'affiche.

La réponse sera:

{"message":"Greetings from Node"}

Actualisation à chaud

Accédez à src/index.js. Remplacez le code du message d'accueil par 'Hello from Node'

Notez immédiatement que dans la fenêtre Output (vue Kubernetes: Run/Debug), l'observateur synchronise les fichiers mis à jour avec le conteneur dans Kubernetes.

Update initiated
File sync started for 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
File sync succeeded for 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Update succeeded

Si vous passez à la vue Kubernetes: Run/Debug - Detailed, vous remarquerez qu'elle reconnaît les modifications apportées aux fichiers et redémarre le nœud.

files modified: [src/index.js]
Copying files:map[src/index.js:[/workspace/src/index.js]]togcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Syncing 1 files for gcr.io/myproject/mynodejsapp:latest@sha256:f554756b3b4d6c301c4b26ef96102227cfa2833270db56241248ae42baa1971a
Watching for changes...
[mynodejsapp]
[mynodejsapp]> mynodejsapp@1.0.0 start /workspace
[mynodejsapp]> node src/index.js
[mynodejsapp]
[mynodejsapp]Server running at: http://localhost:8080/

Actualisez votre navigateur pour voir les résultats mis à jour.

Débogage

Accédez à la vue de débogage et arrêtez le thread actuel .
Cliquez sur Cloud Code dans le menu du bas et sélectionnez Debug on Kubernetes pour exécuter l'application en mode debug.

Dans la vue Kubernetes Run/Debug - Detailed de la fenêtre Output, notez que Skaffold va déployer cette application en mode débogage.
La création et le déploiement de l'application prennent quelques minutes. Vous remarquerez qu'un débogueur est joint cette fois-ci.

Port forwarding pod/mynodejsapp-6bbcf847cd-vqr6v in namespace default, remote port 9229 -> http://127.0.0.1:9229
[mynodejsapp]Debugger attached.

La barre d'état inférieure passe du bleu à l'orange pour indiquer qu'elle est en mode débogage.

Dans la vue Kubernetes Run/Debug, vous remarquerez qu'un conteneur débogable a démarré.

**************URLs*****************
Forwarded URL from service mynodejsapp-service: http://localhost:8080
Debuggable container started pod/mynodejsapp-deployment-6bc7598798-xl9kj:mynodejsapp (default)
Update succeeded
***********************************

Utiliser des points d'arrêt

Ouvrir src/index.js
Recherchez l'instruction var message="Hello from Node";
Ajoutez un point d'arrêt à cette ligne en cliquant sur l'espace vide à gauche du numéro de ligne. Un indicateur rouge s'affiche pour indiquer que le point d'arrêt est défini.
Actualisez votre navigateur et notez que le débogueur arrête le processus au point d'arrêt et vous permet d'examiner les variables et l'état de l'application qui s'exécute à distance dans GKE.
Cliquez sur la section des variables jusqu'à ce que vous trouviez la variable "message".
Exécutez la ligne en appuyant sur Pas à pas sur .
Observez la valeur actuelle de la variable "message" remplacée par "Hello from Node".
Double-cliquez sur le nom de variable "target". Dans la fenêtre pop-up, remplacez la valeur par un autre élément, comme "Hi from Node".
Cliquez sur le bouton "Continuer" dans le panneau de configuration du débogage.
Examinez la réponse dans votre navigateur qui affiche à présent la nouvelle valeur que vous venez de saisir.
Arrêter le processus de débogage en appuyant sur le bouton d'arrêt . Pour supprimer le point d'arrêt, cliquez à nouveau dessus.

6. Développer un service REST CRUD simple

À ce stade, votre application est entièrement configurée pour le développement conteneurisé, et vous avez suivi le workflow de développement de base avec Cloud Code. Dans les sections suivantes, vous allez mettre en pratique ce que vous avez appris en ajoutant des points de terminaison de service REST se connectant à une base de données gérée dans Google Cloud.

Configurer des dépendances

Le code de l'application utilise une base de données pour conserver les données du service REST. Assurez-vous que les dépendances sont disponibles en ajoutant ce qui suit dans le fichier package.json.

Ajoutez deux autres dépendances pg et sequelize au fichier package.json pour créer une application CRUD dans Postgres. Après l'intégration des modifications, la section des dépendances ressemblerait à ceci.

    "dependencies": {
    "express": "^4.17.3",
    "pg": "^8.8.0",
    "sequelize": "^6.25.7"
  }

Coder le service REST

Ajouter le code d'application CRUD à cette application

wget -O app.zip https://github.com/GoogleCloudPlatform/container-developer-workshop/raw/main/labs/nodejs/app.zip

unzip app.zip

Ce code comporte

Dossier models contenant le modèle d'entité pour item
controllers avec le code qui effectue les opérations CRUD
Dossier routes, qui achemine des formats d'URL spécifiques vers différents appels
Dossier config contenant les détails de connectivité de la base de données

Notez que la configuration de la base de données dans le fichier db.config.js fait référence aux variables d'environnement qui doivent être fournies pour se connecter à la base de données. Vous devez également analyser la requête entrante pour encoder les URL.
Ajoutez l'extrait de code suivant dans src/index.js pour pouvoir vous connecter au code CRUD à partir de votre fichier JavaScript principal, juste avant la dernière section commençant par app.listen(PORT, () => {.

const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(
 bodyParser.urlencoded({
   extended: true,
 })
)
const db = require("../app/models");
db.sequelize.sync();
require("../app/routes/item.routes")(app);

Modifiez le déploiement dans le fichier deployment.yaml pour ajouter les variables d'environnement afin de fournir les informations de connectivité de la base de données.

Mettez à jour l'entrée de spécification à la fin du fichier pour qu'elle corresponde à la définition suivante

    spec:
      containers:
      - name: mynodejsapp
        image: mynodejsapp
        env:
        - name: DB_HOST
          value: ${DB_INSTANCE_IP}        
        - name: DB_PORT
          value: "5432"  
        - name: DB_USER
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: username
        - name: DB_PASS
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: password
        - name: DB_NAME
          valueFrom:
            secretKeyRef:
              name: gke-cloud-sql-secrets
              key: database

Remplacez la valeur DB_HOST par l'adresse de votre base de données.

export DB_INSTANCE_IP=$(gcloud sql instances describe mytest-instance \
    --format=json | jq \
    --raw-output ".ipAddresses[].ipAddress")

envsubst < deployment.yaml > deployment.new && mv deployment.new deployment.yaml

Déployer et valider l'application

Dans le volet situé en bas de l'éditeur Cloud Shell, sélectionnez Cloud Code, puis Debug on Kubernetes en haut de l'écran.
Une fois la compilation et les tests terminés, l'onglet "Output" (Sortie) indique Resource deployment/mynodejsapp status completed successfully, et une URL s'affiche : "Forwarded URL from service mynodejsapp: http://localhost:8080"
Ajoutez quelques éléments.

Depuis le terminal cloudshell, exécutez les commandes ci-dessous.

URL=localhost:8080
curl -X POST $URL/items -d '{"itemName":"Body Spray", "itemPrice":3.2}' -H "Content-Type: application/json"
curl -X POST $URL/items -d '{"itemName":"Nail Cutter", "itemPrice":2.5}' -H "Content-Type: application/json"

Testez la requête GET en exécutant la commande $URL/items dans le navigateur. Vous pouvez également exécuter la commande curl à partir de la ligne de commande

curl -X GET $URL/items

Test de suppression: essayez à présent de supprimer un élément en exécutant la commande ci-dessous. Si nécessaire, modifiez la valeur de l'attribut item-id.

curl -X DELETE $URL/items/1

    This throws an error message

{"message":"Could not delete Item with id=[object Object]"}

Identifier et corriger le problème

L'application s'exécute en mode débogage. Utilisez des points d'arrêt pour identifier le problème. Voici quelques conseils :

Nous savons qu'il y a un problème avec l'instruction DELETE, car celle-ci ne renvoie pas le résultat souhaité. Vous devez donc définir le point d'arrêt dans la méthode itemcontroller.js->exports.delete.
Exécutez une exécution étape par étape et observez les variables à chaque étape pour observer les valeurs des variables locales dans la fenêtre de gauche.
Pour observer des valeurs spécifiques comme request.params, ajoutez cette variable à la fenêtre de surveillance.

Notez que la valeur attribuée à id est undefined. Modifiez le code pour résoudre le problème.

L'extrait de code corrigé se présente comme suit :

// Delete a Item with the specified id in the request
exports.delete = (req, res) => {
    const id = req.params.id;

Une fois l'application redémarrée, réessayez en essayant de la supprimer.
Arrêtez la session de débogage en cliquant sur le carré rouge dans la barre d'outils de débogage .

7. Nettoyage

Félicitations ! Dans cet atelier, vous avez entièrement créé une application Node.js et vous l'avez configurée pour fonctionner en mode déploiement à chaud avec des conteneurs. Vous avez ensuite déployé et débogué votre application sur un cluster GKE distant en suivant le même parcours de développement que dans les piles d'applications traditionnelles.

Pour effectuer un nettoyage une fois l'atelier terminé:

Supprimer les fichiers utilisés dans l'atelier

cd ~ && rm -rf mynodejsapp && rm -f setup.sh

Supprimer le projet pour retirer toute l'infrastructure et toutes les ressources associées