Comenzar: cómo entregar contenido estático

Obtén más información sobre cómo entregar de forma segura contenido estático, como archivos HTML, CSS, además de imágenes del entorno estándar de Google App Engine.

Antes de comenzar

  1. Configura tu entorno de desarrollo y crea tu proyecto de App Engine.

  2. Si utilizas un nombre del dominio personalizado para tu sitio web, sigue las instrucciones a fines de agregar un dominio personalizado a tu proyecto.

Cómo entregar a una página web

App Engine puede entregar contenido estático como páginas HTML y recursos multimedia como imágenes. El contenido estático es todo lo que no se ejecutará como JSP o Servlets.

El siguiente ejemplo es una página HTML básica que muestra un mensaje de bienvenida.

<!DOCTYPE html>
<html>
  <head>
    <title>The App Engine Blog</title>
  </head>
  <body>
    <h1>Welcome to the App Engine Blog</h1>
    <p>This is being served by App Engine!</p>
  </body>
</html>

Dónde ubicar tus archivos estáticos

Debes ubicar los archivos entregados estáticos dentro del directorio webapp de tu app. Puedes usar carpetas, pero recuerda que todos los URI y las rutas de acceso a archivos están relacionados con el directorio webapp.

Después de elegir una ubicación para los archivos estáticos, debes definir su ubicación en el archivo appengine-web.xml mediante el elemento <static-files>.

En el siguiente ejemplo, con una configuración appengine-web.xml básica se consideran todos los archivos HTML del directorio webapp como archivos estáticos.

<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <threadsafe>true</threadsafe>
  <runtime>java8</runtime>
  <static-files>
    <include path="/**.html" >
    </include>
  </static-files>
</appengine-web-app>

Puedes tener varios elementos <include path> que hagan referencia a diferentes directorios y tipos de archivo. A continuación, ampliamos el ejemplo anterior:

<static-files>
  <include path="/**.html" >
  </include>
  <include path="/images/**.jpg" >
  </include>
</static-files>

Ahora todos los archivos con la extensión .jpg en el directorio webapp/images/ se tratarán como archivos estáticos.

En el ejemplo anterior, si quisiéramos mostrar logo.jpg del directorio webapp/images, la etiqueta <img> tendría el URI de origen <img src="/images/logo.jpg">.

Fuerza HTTPS para todo el contenido estático

Aunque App Engine admite entregar contenido mediante HTTP o HTTPS, debes usar HTTPS. Para configurar URL seguras, debes agregar un elemento <security-constraint> al web.xml de tu proyecto. A continuación, se muestra un <security-constraint> de ejemplo:

<security-constraint>
    <web-resource-collection>
        <web-resource-name>blog</web-resource-name>
        <url-pattern>/*</url-pattern>
    </web-resource-collection>
    <user-data-constraint>
        <transport-guarantee>CONFIDENTIAL</transport-guarantee>
    </user-data-constraint>
</security-constraint>

Mediante <transport-guarantee>CONFIDENTIAL</transport-guarantee>, todas las solicitudes se redireccionan de forma automática al URI de HTTPS del contenido estático.

Implementa en App Engine

Puedes implementar tu aplicación en App Engine con Maven.

Ve al directorio raíz de tu proyecto y escribe lo siguiente:

mvn package appengine:deploy -Dapp.deploy.projectId=PROJECT_ID

Reemplaza PROJECT_ID por el ID de tu proyecto de Cloud. Si tu archivo pom.xml ya especifica tu ID del proyecto, no necesitas incluir la propiedad -Dapp.deploy.projectId en el comando que ejecutas.

Luego de que Maven implemente tu aplicación, escribe lo siguiente para abrir una pestaña del navegador web de forma automática en tu nueva aplicación:

gcloud app browse

Qué sigue

Los archivos estáticos se pueden utilizar para entregar imágenes, hojas de estilo en cascada y contenido HTML estático a través de App Engine. Para ampliar tus conocimientos, puedes consultar cómo manejar los datos del usuario a través de formularios de HTML.