Alojar sitios web estáticos en App Engine

ID de región

El REGION_ID es un código abreviado que Google asigna en función de la región que selecciones al crear tu aplicación. El código no corresponde a un país o provincia, aunque algunos IDs de región pueden parecerse a los códigos de país y provincia que se usan habitualmente. En las aplicaciones creadas después de febrero del 2020, REGION_ID.r se incluye en las URLs de App Engine. En las aplicaciones creadas antes de esa fecha, el ID de región es opcional en la URL.

Más información sobre los IDs de región

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

Los sitios alojados en App Engine se alojan en el subdominio REGION_ID.r.appspot.com, como [my-project-id].uc.r.appspot.com. Una vez que hayas implementado tu sitio, puedes asignar tu propio nombre de dominio al sitio web alojado en App Engine.

Antes de empezar

Antes de alojar tu sitio web en App Engine, debes hacer lo siguiente:

  1. Crea un proyecto en la consola Google Cloud o recupera el ID de un proyecto que ya tengas para usarlo:

    Ir a la página Proyectos

  2. Instala y, a continuación, inicializa Google Cloud CLI:

    Descargar el SDK

Crear un sitio web para alojarlo en Google App Engine

Estructura básica del proyecto

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

  • app.yaml: configura los ajustes de tu aplicación de App Engine.
  • www/: directorio en el que se almacenan 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 de tu sitio.
    • images/: directorio opcional para almacenar imágenes.
    • index.html: un archivo HTML que muestra el contenido de su sitio web.
    • js/: directorio opcional para almacenar archivos JavaScript.
    • Otros directorios de recursos.

Crear el archivo app.yaml

El archivo app.yaml es un archivo de configuración que indica a App Engine cómo asignar URLs a tus archivos estáticos. En los pasos siguientes, añadirá controladores que cargarán www/index.html cuando alguien visite su sitio web. Todos los archivos estáticos se almacenarán en el directorio www y se llamarán desde él.

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

  1. Crea un directorio con el mismo nombre que el ID de tu proyecto. Puedes encontrar el ID de tu proyecto en la consola.
  2. En el directorio que acabas de crear, crea un archivo llamado app.yaml.

  3. Edita el archivo app.yaml y añade el elemento de controladores según los requisitos de tu sitio web. Por ejemplo, el archivo app.yaml del tiempo de ejecución de Python se puede crear 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 consultar más información de referencia sobre el archivo app.yaml en la app.yaml documentación de referencia.

Crear el archivo index.html

Crea un archivo HTML que se sirva cuando alguien vaya a la página raíz de tu sitio web. Guarda este archivo en tu 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>

Desplegar una aplicación en App Engine

Cuando despliegues los archivos de tu aplicación, tu sitio web se subirá a App Engine. Para desplegar tu 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 posibles

  • Incluye la marca --project para especificar un ID de proyecto de consola alternativo Google Cloud al que hayas inicializado como predeterminado en gcloud CLI. Ejemplo: --project [YOUR_PROJECT_ID]
  • Incluya la marca -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 cómo implementar tu aplicación desde la línea de comandos, consulta Implementar tu aplicación.

Visualizar la aplicación

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

gcloud app browse

Siguientes pasos

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