Entrega archivos estáticos

En esta página, se muestra cómo entregar un CSS como archivo estático.

A diferencia de un entorno de hosting web tradicional, Google App Engine no entrega archivos directamente desde el directorio del código fuente de tu aplicación, a menos que esté configurado para hacerlo. Sin embargo, tal vez debas entregar archivos estáticos como imágenes, CSS y código JavaScript directamente al navegador web. Puedes indicar a App Engine que entregue archivos específicos sin crear tus propios controladores.

Esta página forma parte de un instructivo de varias páginas. Si deseas comenzar desde el principio y ver las instrucciones para la configuración, consulta Cómo crear un libro de visitas.

Define controladores

En la siguiente muestra de código, se definen dos controladores nuevos para las URL en el archivo app.yaml:

  1. Cuando App Engine recibe una solicitud con una URL que comienza con /stylesheets, mapea el resto de la ruta de acceso a los archivos en el directorio stylesheets y, si se encuentra un archivo apropiado, el contenido del archivo se muestra al cliente.

  2. Todas las demás URL coinciden con la ruta de acceso /.* y se controlan con la secuencia de comandos helloworld.php.

    app.yaml 
    runtime: php55
api_version: 1

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /.*
  script: helloworld.php

Los patrones de ruta de acceso del controlador de URL se prueban en el orden en que aparecen en app.yaml. En este caso, el patrón /stylesheets coincidirá antes que el patrón /.* para las rutas de acceso apropiadas. Para obtener más información sobre el mapeo de URL y otras opciones que puedes especificar en app.yaml, consulta la referencia de app.yaml.

Agrega la hoja de estilo

En el código de muestra siguiente, se crea un archivo CSS y, luego, se agrega a la aplicación.

  1. En la muestra de código, se agrega el siguiente contenido al archivo main.css en el directorio helloworld/stylesheets:

    stylesheets/main.css 
    body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #DDDDDD;
}

    De forma predeterminada, App Engine entrega archivos estáticos mediante un tipo MIME basado en la extensión del nombre de archivo. Por ejemplo, un archivo con un nombre que termina en .css se entregará con un tipo de MIME de text/css. Puedes configurar tipos de MIME explícitos mediante la configuración mime_type cuando configures tus controladores en el archivo de configuración app.yaml.

  2. Para usar la hoja de estilo en tu aplicación, la muestra de código inserta las líneas siguientes luego de la línea <html> de la parte superior:

    helloworld.php 
    <head>
  <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
</head>