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 programación 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 utilizar carpetas, pero recuerda que todas las rutas de archivo y las URL están relacionadas 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, con el elemento <static-files>.

En el siguiente ejemplo, una configuración básica appengine-web.xml trata a todos los archivos HTML en el 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>

Puede haber varios elementos <include path> que hagan referencia a distintos directorios y distintos tipos de archivos. 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 deseamos mostrar logo.jpg desde el directorio webapp/images, la etiqueta <img> tendría el URI de origen <img src="/images/logo.jpg">.

Cómo forzar HTTPS para todo el contenido estático

A pesar de que App Engine admite entregar contenido con HTTP o HTTPS, deberías utilizar HTTPS. Para configurar URL seguras, debes agregar un elemento <security-constraint> al archivo web.xml de tu proyecto. A continuación, se muestra un ejemplo de <security-constraint>:

<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>

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

Cómo implementar en App Engine

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

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

mvn appengine:deploy

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

gcloud app browse

Próximos pasos

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.