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. Incluir REGION_ID.r en las URL de App Engine es opcional en el caso de las apps existentes, y pronto será obligatorio para todas las apps nuevas.

A fin de garantizar una transición sin problemas, estamos actualizando App Engine de forma paulatina para usar los ID de región. Si aún no actualizamos tu proyecto de Google Cloud, no verás un ID de región para la app. Dado que el ID es opcional en las apps existentes, no es necesario que actualices las URL ni realices otros cambios una vez que el ID de región esté disponible en las apps existentes.

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

Para poder alojar tu sitio web en Google App Engine, haz lo siguiente:

Crea un proyecto nuevo de Cloud Console o recupera el ID del 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.
Instala y, luego, inicializa el SDK de Google Cloud:

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:

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

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 Cloud Console alternativo al que inicializaste como predeterminado en la herramienta 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

Qué sigue

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