Aloja un sitio web estático en App Engine

ID de región

REGION_ID es un código abreviado que Google asigna en función de la región que eliges cuando creas la app. El código no corresponde a un país ni a una provincia, aunque algunos ID de región puedan parecer similares a los códigos de país y provincia que se suelen usar. En el caso de las apps creadas después de febrero de 2020, REGION_ID.r se incluye en las URL de App Engine. En el caso de las apps existentes creadas antes de esta fecha, el ID de región es opcional en la URL.

Obtén más información acerca de los ID de región.

Puedes usar App Engine para alojar un sitio web estático. Las páginas web estáticas pueden incluir tecnologías del lado del cliente, como HTML, CSS y JavaScript. Alojar un sitio estático en App Engine puede costar menos que usar un proveedor de hosting tradicional, ya que un entorno estándar de App Engine proporciona un nivel gratuito.

Los sitios alojados en App Engine se encuentran en el subdominio REGION_ID.r.appspot.com, como [my-project-id].uc.r.appspot.com. Después de que implementes el sitio, puedes asignar tu propio nombre de dominio al sitio web alojado en App Engine.

Antes de comenzar

Antes de alojar tu sitio web en App Engine:

  1. Crea un proyecto nuevo de la consola de Google Cloud o recupera el ID del proyecto existente para usarlo:

    Ir a la página Proyectos

    .

  2. Instala y, luego, inicializa Google Cloud CLI:

    Descarga el SDK

Crea un sitio web para alojar en Google App Engine

Estructura básica para el proyecto

En esta guía, se usa la siguiente estructura para el proyecto:

  • app.yaml: Establece la configuración de tu aplicación de App Engine
  • www/: Directorio para almacenar todos los archivos estáticos, como HTML, CSS, imágenes y JavaScript
    • css/: Directorio para almacenar hojas de estilo
      • style.css: Hoja de estilo básica que da formato al aspecto del sitio
    • images/: Directorio opcional para almacenar imágenes
    • index.html: Un archivo HTML que muestra contenido para el sitio web
    • js/: Directorio opcional para almacenar archivos de JavaScript
    • Otros directorios de recursos

Crea el archivo app.yaml

El archivo app.yaml es un archivo de configuración que le indica a App Engine cómo asignar URL a los archivos estáticos. En los pasos siguientes, agregarás controladores que cargarán www/index.html cuando un usuario visite tu sitio web, y todos los archivos estáticos se almacenarán en el directorio www y se llamarán desde allí.

Crea el archivo app.yaml en el directorio raíz de la aplicación:

  1. Crea un directorio que tenga el mismo nombre que el ID del proyecto. Puedes encontrar el ID del proyecto en Console.
  2. En el directorio que acabas de crear, crea un archivo con el nombre app.yaml.

  3. Edita el archivo app.yaml y agrega el elemento handlers según los requisitos de tu sitio web. Por ejemplo, el archivo app.yaml para el entorno de ejecución de Python puede crearse de la siguiente manera:

    runtime: python39

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

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

Puedes encontrar más información de referencia sobre el archivo app.yaml en la documentación de referencia de app.yaml.

Crea el archivo index.html

Crea un archivo HTML que se entregará cuando un usuario navegue a la página principal del sitio web. Almacena este archivo en el directorio 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>

Implementa la aplicación en App Engine

Cuando implementes los archivos de la aplicación, el sitio web se subirá a App Engine. Para implementar la aplicación, ejecuta el siguiente comando desde el directorio raíz de tu aplicación donde se encuentra el archivo app.yaml:

gcloud app deploy

Marcas opcionales:

  • Incluye la marca --project para especificar un ID del proyecto alternativo de la consola de Google Cloud al que inicializaste como predeterminado en la CLI de gcloud. Ejemplo: --project [YOUR_PROJECT_ID]
  • Incluye el marcador -v para especificar un ID de versión; de lo contrario, se generará uno automáticamente. Ejemplo: -v [YOUR_VERSION_ID]

Para obtener más información sobre la implementación de la app desde la línea de comandos, consulta Implementa tu aplicación.

Visualiza tu aplicación

Para iniciar el navegador y ver la app en https://PROJECT_ID.REGION_ID.r.appspot.com, ejecuta el comando siguiente:

gcloud app browse

¿Qué sigue?

Entrega tu sitio web alojado en App Engine desde un dominio personalizado.