Использование статических файлов

В отличии от традиционных систем размещения web ресурсов, платформа Google App Engine не может напрямую отдавать содержимое статических файлов из каталога с приложением, пока вы явно этого не укажите. Мы назвали файл с шаблоном index.html, но он не стал автоматически доступным по URL /index.html.

Однако может появиться множество причин, когда необходимо будет отдавать содержимое статических файлов напрямую в браузер пользователю. Изображения, файлы со стилями CSS, код JavaScript, видео и Flash ролики - это пример файлов, которые необходимо отдавать напрямую, минуя обработку приложением. Для того, чтобы сообщить платформе App Engine о необходимости передавать некоторые файлы напрямую, нет нужды создавать какие-либо обработчики.

Использование статических файлов

Откройте файл helloworld/app.yaml и замените его содержимое следующим:

application: helloworld
version: 1
runtime: python
api_version: 1

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /.*
  script: helloworld.py

Теперь секция handlers определяет два обработчика для URL. Когда App Engine получает запрос по URL, начинающийся на /stylesheets, она просматривает содержимое каталога stylesheets и если будет найден файл с сопоставимым именем, его содержимое будет отправлено пользователю. Все остальные URL, совпадающие с путем / будут обработаны приложением через скрипт helloworld.py.

По умолчанию, App Engine передает MIME-тип файла на основании расширения его имени. Например, для файла заканчивающееся на .css будет передан MIME-тип text/css. Однако при необходимости можно изменить это стандартное поведение, передав дополнительные опции для изменения MIME-типа.

Обработчик схем URL будет просматривать конфигурацию приложения в файле app.yaml сверху вниз. В нашем случае для статического контента шаблон /stylesheets будет срабатывать раньше шаблона /.*, так как расположен до него. Для изучения всех возможностей сопоставления адресов URL и дополнительных опциях, указываемых в файле app.yaml, смотрите руководство по app.yaml.

Создайте каталог helloworld/stylesheets. В нем создайте файл main.css со следующим содержимым:

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #DDDDDD;
}

В завершении отредактируйте файл helloworld/index.html и вставьте следующие строчки после тега <html>:

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

Обновите страницу приложения в своем браузере. Теперь новая версия использует таблицу стилей

Далее...

Пришло время показать наше приложение всему миру.

Перейти к Загрузка приложения.