Héberger un site Web statique sur App Engine

ID de la région

Le REGION_ID est un code abrégé que Google attribue en fonction de la région que vous sélectionnez lors de la création de votre application. Le code ne correspond pas à un pays ou une province, même si certains ID de région peuvent ressembler aux codes de pays et de province couramment utilisés. Pour les applications créées après février 2020, REGION_ID.r est inclus dans les URL App Engine. Pour les applications existantes créées avant cette date, l'ID de région est facultatif dans l'URL.

En savoir plus sur les ID de région

Vous pouvez utiliser App Engine pour héberger un site Web statique. Les pages Web statiques peuvent contenir des technologies côté client telles que HTML, CSS et JavaScript. Il peut s'avérer moins coûteux d'héberger votre site statique sur App Engine que d'utiliser un fournisseur d'hébergement classique, car l'environnement standard App Engine propose une version gratuite.

Les sites hébergés sur App Engine sont hébergés sur le sous-domaine REGION_ID.r.appspot.com, tel que [my-project-id].uc.r.appspot.com. Une fois que vous avez déployé votre site, vous pouvez mapper votre propre nom de domaine à votre site Web hébergé par App Engine.

Avant de commencer

Avant de pouvoir héberger votre site Web sur App Engine, vous devez effectuer les opérations suivantes :

  1. Créez un projet de console Google Cloud ou récupérez l'ID d'un projet existant que vous souhaitez utiliser:

    Accéder à la page Projets

  2. Installez et initialisez Google Cloud CLI :

    Télécharger le SDK

Créer un site Web à héberger sur Google App Engine

Structure de base du projet

Ce guide utilise la structure suivante pour le projet :

  • app.yaml : fichier permettant de configurer les paramètres de votre application App Engine
  • www/ : répertoire dans lequel stocker tous vos fichiers statiques (HTML, CSS, images et JavaScript)
    • css/ : répertoire dans lequel stocker des feuilles de style
      • style.css : feuille de style de base qui gère la mise en forme et l'apparence de votre site
    • images/ : répertoire facultatif dans lequel stocker des images
    • index.html : fichier HTML qui affiche le contenu de votre site Web
    • js/ : répertoire facultatif dans lequel stocker des fichiers JavaScript
    • Autres annuaires d'éléments

Créer le fichier app.yaml

Le fichier app.yaml est un fichier de configuration qui indique à App Engine comment mapper les URL aux fichiers statiques. Dans les étapes suivantes, vous allez ajouter des gestionnaires qui chargeront le fichier www/index.html lorsqu'un internaute visitera votre site Web. Tous les fichiers statiques seront stockés dans le répertoire www et appelés à partir de celui-ci.

Créez le fichier app.yaml dans le répertoire racine de votre application :

  1. Créez un répertoire portant le même nom que votre ID de projet. Vous pouvez trouver cet ID dans la console.
  2. Dans le répertoire que vous venez de créer, créez un fichier nommé app.yaml.

  3. Modifiez le fichier app.yaml et ajoutez l'élément "handlers" en fonction des exigences de votre site Web. Par exemple, le fichier app.yaml pour l'environnement d'exécution Python peut être créé comme suit :

    runtime: python39

handlers:
- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /(.*)
  static_files: www/\1
  upload: www/(.*)

Vous trouverez plus d'informations sur le fichier app.yaml dans la documentation de référence sur le fichier app.yaml.

Créer le fichier index.html

Créez un fichier HTML qui sera diffusé lorsque quelqu'un accédera à la page racine de votre site Web. Stockez ce fichier dans votre répertoire www.

<html>
  <head>
    <title>Hello, world!</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>
      This is a simple static HTML file that will be served from Google App
      Engine.
    </p>
  </body>
</html>

Déployer l'application sur App Engine

Lorsque vous déployez les fichiers d'application, votre site Web est chargé sur App Engine. Pour déployer votre application, exécutez la commande suivante à partir du répertoire racine de l'application dans lequel se trouve le fichier app.yaml :

gcloud app deploy

Indicateurs facultatifs :

  • Incluez l'option --project pour spécifier un ID de projet de console Google Cloud différent de celui que vous avez initialisé par défaut dans gcloud CLI. Exemple : --project [YOUR_PROJECT_ID]
  • Incluez l'option -v pour spécifier un ID de version. Si vous omettez cet ID, un ID est généré automatiquement. Exemple : -v [YOUR_VERSION_ID]

Pour en savoir plus sur le déploiement de votre application à partir de la ligne de commande, consultez la section Déployer votre application.

Afficher votre application

Pour lancer votre navigateur et afficher l'application à l'adresse https://PROJECT_ID.REGION_ID.r.appspot.com, exécutez la commande suivante :

gcloud app browse

Étapes suivantes

Diffusez un site Web hébergé par App Engine à partir d'un domaine personnalisé.