Aloja un sitio web estático en Google App Engine

ID de región

REGION_ID es un código abreviado que Google asigna en función de la región que seleccionas 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 Google App Engine para alojar un sitio web estático. Las páginas estáticas pueden incluir tecnologías del extremo 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 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 Google App Engine:

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

    Ir a la página Proyectos

    Sugerencia: Puedes recuperar una lista de tus ID de proyectos existentes con la herramienta de línea de comandos de gcloud.

  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 agrégale el siguiente código:

    runtime: python27
api_version: 1
threadsafe: true

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 de la consola alternativo 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 acerca de cómo implementar la app desde la línea de comandos, consulta Implementa una app de Python 2.

Visualiza tu aplicación

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

gcloud app browse

Próximos pasos

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