従来のウェブホスティング環境とは違い、 Google App Engine では、そのための設定をしなければアプリケーションソースのディレクトリ外にあるファイルを直接扱うことはできません。
前回テンプレートファイルにindex.htmlと名前をつけましたが、URL/index.htmlにあるファイルは自動的に使えるようになるわけではありません。
しかし、多くの場合はウェブブラウザに静的ファイルを直接送信したいことでしょう。 通常は画像・CSS スタイルシート・ JavaScript コード・動画・ Flash アニメーションはアプリケーションと一緒に保存され、ブラウザへ直接送信されます。 App Engine では、独自のハンドラをコーディングすることなく、特定のファイルを送信することができます。
guestbook/app.yaml を編集し、中身を以下のように書き換えてください:
version: 1 runtime: python27 api_version: 1 threadsafe: true # Handlers match in order, put above the default handler. handlers: - url: /stylesheets static_dir: stylesheets - url: /.* script: guestbook.app libraries: - name: webapp2 version: latest - name: jinja2 version: latest
新たに追加した handlers 項目では、URLに関する二つのハンドラを定義しています。
App Engine がURLが /stylesheetsで始まるリクエストを受信した時、URLの残りの部分を stylesheetsディレクトリ内にあるファイル名と照らし合わせます。
合致するファイルが見つかった場合は、そのファイルの内容がクライアントへ返されます。
合致しなかった URL でも全て/.*パスに合致するので、guestbookモジュールのappオブジェクトで処理されます。
既定では、 App Engine はファイルの拡張子に基づいた MIME タイプを使って静的ファイルを送信します。
例えば、名前が .css で終わるファイルはtext/cssの MIME タイプとして扱われます。
app.yamlでハンドラを設定する場合、
mime_type設定を使って明示的にMIME タイプを設定できます。
URL ハンドラのパスパターンはapp.yamlに記述された上から下の順番に精査されます。
今回の場合は、/.*のURLパターンと合致する前に/stylesheetsのURLパターンに合致します。
URLマッピングとapp.yamlで設定できる他のオプションについての情報は、app.yaml リファレンスを参照してください。
注意: You can specify http_headers settings in the
static directory handler to supply custom headers in the responses returned by the handler. This is
useful, for example, for including the `Access-Control-Allow-Origin` header required to support
CORS.
詳細情報については、静的ファイルハンドラのページのhttp_headersに関するドキュメントを参照してください。
guestbook/stylesheets/ディレクトリを作成してください。この新ディレクトリ内で、以下の内容のmain.cssという名前のファイルを新規作成してください。:
body {
font-family: Verdana, Helvetica, sans-serif;
background-color: #DDDDDD;
}
最後に、guestbook/index.html を編集して以下のコードを<html>タグと<body>タグの間の一番上に挿入してください。:
<head> <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" /> </head>
ブラウザでページを再読み込みしてください。この新バージョンではスタイルシートを使用しています。
完成したアプリケーションを世界へ公開する時が来ました。