Solution de démarrage rapide : application Web dynamique avec JavaScript

Last reviewed 2023-12-06 UTC

Ce guide vous aide à comprendre, à déployer et à utiliser la solution de démarrage rapide d'application Web dynamique avec Java. Cette solution montre comment créer et exécuter des sites Web dynamiques sur Google Cloud. Vous pouvez l'utiliser comme exemple de déploiement pour votre propre site Web dynamique sur Google Cloud, y compris sur les produits Google Cloud dont vous avez peut-être besoin et sur la manière dont ils doivent communiquer entre eux.

Ce guide de solution décrit le déploiement vers Google Cloud de l'application Web Parcours du développeur.

Le parcours du développeur est conçu à l'aide de TypeScript, Next.js et React, et illustre les techniques de génération statique et de rendu côté serveur pour le préaffichage des pages pouvant être mises en cache.

Ce document part du principe que vous maîtrisez les concepts de base du cloud, mais pas nécessairement Google Cloud. L'expérience de Terraform est utile.

Objectifs

Ce guide de solution vous aidera à mieux utiliser Google Cloud pour :

  • Déployez une application Web accessible au public dans Cloud Run
    • connecter une application à une base de données Google Cloud en suivant les pratiques de sécurité recommandées par Google Cloud (par exemple, utiliser des secrets et attribuer des autorisations selon le principe du moindre privilège, y compris les autorisations IAM appropriées) ;
    • déployer et utiliser les services de backend ;
    • modifier le contenu ou modifier l'application pour ajouter une fonctionnalité ;
    • effectuer une compilation et un redéploiement de manière sécurisée.
  • Explorer votre déploiement
  • Personnaliser votre application

Voici nos conseils :

  • Vous connaissez la programmation TypeScript et React.
  • Vous souhaitez utiliser des infrastructures cloud pour vos nouvelles applications JavaScript.
  • Vous connaissez les principes de connexion à la base de données, du CI/CD, du débogage et de la journalisation.
  • Vous connaissez les principes de base du développement de sites Web.

Produits utilisés

Voici un récapitulatif des produits Google Cloud intégrés par la solution Parcours du développeur :

  • Cloud Run : service entièrement géré qui vous permet de créer et de déployer des applications conteneurisées sans serveur. Cloud Run gère le scaling et d'autres tâches d'infrastructure afin que vous puissiez vous concentrer sur la logique métier de votre code.
  • Conçu pour le scaling automatique et les hautes performances, Firestore est une base de données de documents NoSQL qui simplifie le développement d'applications.
  • Cloud Load Balancing  : équilibrage de charge hautes performances et évolutif sur Google Cloud
  • Secret Manager : service qui vous permet de stocker des secrets, de les gérer et d'y accéder sous forme de blobs ou chaînes de texte binaires. Vous pouvez utiliser Secret Manager pour stocker les mots de passe de base de données, les clés API ou les certificats TLS requis par une application lors de son exécution.
  • Cloud Storage : service adapté aux entreprises qui fournit un stockage d'objets économique et sans limite pour divers types de données. Les données sont accessibles depuis l'intérieur et l'extérieur de Google Cloud et sont répliquées de manière géoredondante.
  • Cloud Build : service qui vous permet d'importer du code source à partir de dépôts ou d'espaces Cloud Storage, d'exécuter une compilation et de produire des artefacts tels que des conteneurs Docker ou des archives Java pour une livraison continue.

Architecture

Le schéma suivant montre l'architecture de la solution :

Schéma d'une application Web dynamique utilisant l'architecture JavaScript

Processus de requête

L'architecture comprend les composants suivants :

  1. Les utilisateurs de mobiles et les utilisateurs Web se connectent à l'application via une URL.
  2. Cloud CDN diffuse les éléments mis en cache s'ils sont disponibles. Si ce n'est pas le cas, la requête est acheminée vers Cloud Load Balancing.
  3. Pour les éléments statiques, Cloud Load Balancing extrait les données du bucket Cloud Storage.
  4. Pour les ressources dynamiques, Cloud Load Balancing dirige les requêtes vers Cloud Run.
  5. Les valeurs sensibles sont fournies à Cloud Run à l'aide de variables d'environnement stockées dans Secret Manager.
  6. Cloud Run interroge les données utilisateur de Firestore, qui est un backend de base de données NoSQL pour l'application Web.

Coût

Pour obtenir une estimation du coût des ressources Google Cloud utilisées par l'application Web dynamique avec JavaScript, consultez l'estimation précalculée dans le Simulateur de coût Google Cloud.

Utilisez l'estimation comme point de départ pour calculer le coût de votre déploiement. Vous pouvez modifier l'estimation afin qu'elle reflète les modifications de configuration que vous prévoyez d'apporter aux ressources utilisées dans la solution.

L'estimation précalculée est basée sur des hypothèses pour certains facteurs, y compris les suivants :

  • Emplacements Google Cloud où les ressources sont déployées.
  • La durée d'utilisation des ressources.

Avant de commencer

Pour déployer cette solution, vous devez d'abord disposer d'un projet Google Cloud et de certaines autorisations IAM.

Créer ou choisir un projet Google Cloud

Lors du déploiement de la solution, vous devez choisir le projet Google Cloud dans lequel les ressources vont être déployées. Vous pouvez créer un projet ou utiliser un projet existant pour le déploiement.

Si vous souhaitez créer un projet, faites-le avant de commencer le déploiement. L'utilisation d'un nouveau projet permet d'éviter les conflits avec les ressources précédemment provisionnées, telles que les ressources utilisées pour les charges de travail de production.

Pour créer un projet, procédez comme suit :

  1. In the Google Cloud console, go to the project selector page.

    Go to project selector

  2. Click Create project.

  3. Name your project. Make a note of your generated project ID.

  4. Edit the other fields as needed.

  5. Click Create.

Obtenir les autorisations IAM requises

Pour démarrer le processus de déploiement, vous devez disposer des autorisations IAM (Identity and Access Management) répertoriées dans le tableau suivant.

Si vous avez créé un projet pour cette solution, vous disposez du rôle de base roles/owner dans ce projet et de toutes les autorisations nécessaires. Si vous ne disposez pas du rôle roles/owner, demandez à votre administrateur de vous accorder ces autorisations (ou des rôles qui les incluent).

Autorisation IAM requise Rôle prédéfini incluant les autorisations requises

serviceusage.services.enable

Administrateur Service Usage
(roles/serviceusage.serviceUsageAdmin)

iam.serviceAccounts.create

Administrateur de compte de service
(roles/iam.serviceAccountAdmin)

resourcemanager.projects.setIamPolicy

Administrateur de projet IAM
(roles/resourcemanager.projectIamAdmin)
config.deployments.create
config.deployments.list
Administrateur Cloud Infrastructure Manager
(roles/config.admin)
iam.serviceAccount.actAs Utilisateur du compte de service
(roles/iam.serviceAccountUser)

À propos des autorisations temporaires du compte de service

Si vous démarrez le processus de déploiement via la console, Google crée un compte de service pour déployer la solution en votre nom (et pour supprimer le déploiement ultérieurement si vous le souhaitez). Certaines autorisations IAM sont attribuées temporairement à ce compte de service. En d'autres termes, les autorisations sont révoquées automatiquement une fois les opérations de déploiement et de suppression de la solution terminées. Nous vous recommandons de supprimer le compte de service après avoir supprimé le déploiement, comme décrit plus loin dans ce guide.

Afficher les rôles attribués au compte de service

Ces rôles sont listés ici si un administrateur de votre projet ou de votre organisation Google Cloud a besoin de ces informations.

  • roles/datastore.owner
  • roles/iam.serviceAccountAdmin
  • roles/iam.serviceAccountUser
  • roles/resourcemanager.projectIamAdmin
  • roles/run.admin
  • roles/`roles/secretmanager.admin
  • roles/storage.admin
  • roles/compute.networkAdmin
  • roles/compute.admin

Déployer la solution

Pour vous aider à déployer cette solution avec un minimum d'efforts, une configuration Terraform est fournie dans GitHub. La configuration Terraform définit toutes les ressources Google Cloud requises pour la solution.

Vous pouvez déployer la solution en utilisant l'une des méthodes suivantes :

  • Via la console : utilisez cette méthode si vous souhaitez essayer la solution avec la configuration par défaut et voir comment elle fonctionne. Cloud Build déploie toutes les ressources requises pour la solution. Lorsque vous n'avez plus besoin de la solution déployée, vous pouvez la supprimer via la console. Toutes les ressources que vous créez après le déploiement de la solution devront peut-être être supprimées séparément.

    Pour utiliser cette méthode de déploiement, suivez les instructions de la section Déployer via la console.

  • À l'aide de la CLI Terraform : utilisez cette méthode si vous souhaitez personnaliser la solution, ou automatiser le provisionnement et la gestion des ressources à l'aide de l'approche Infrastructure as Code (IaC). Téléchargez la configuration Terraform depuis GitHub, personnalisez éventuellement le code si nécessaire et déployez la solution à l'aide de la CLI Terraform. Après avoir déployé la solution, vous pouvez continuer à la gérer à l'aide de Terraform.

    Pour utiliser cette méthode de déploiement, suivez les instructions de la section Déployer à l'aide de la CLI Terraform.

Déployer via la console

Pour déployer la solution préconfigurée, suivez la procédure suivante.

  1. Dans le catalogue des solutions Google Cloud pour un démarrage rapide, accédez à la solution Application Web dynamique avec JavaScript.

    Accéder à la solution d'application Web dynamique avec JavaScript

  2. Examinez les informations fournies sur la page, telles que l'estimation du coût de la solution et le temps de déploiement estimé.

  3. Lorsque vous êtes prêt à déployer la solution, cliquez sur Déployer.

    Un volet de configuration détaillé s'affiche.

  4. Effectuez les étapes décrites dans le volet de configuration.

    Notez le nom que vous saisissez pour le déploiement. Ce nom sera requis ult