dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

Google App Engine Python Tutorialのメモ(5)

Google App Engine Python
（追記）その他のメモ

Chapter8 Using Static Files

Unlike a traditional web hosting environment, Google App Engine does not serve files directly out of your application's source directory unless configured to do so.
We named our template file index.html, but this does not automatically make the file available at the URL /index.html.

従来のWebホスティング環境と違い、GAEでは適切に設定してあげない限り、静的ファイルを利用することができない。
たとえば前回のテンプレートファイルmain_page.htmlについても、ソースファイルがあるURLにアクセスしても自動的に表示できるわけではない。

というわけで、設定します。

app.yamlを以下のように編集します。

app.yaml

application: your-app-id
version: 1
runtime: python27
api_version: 1
threadsafe: TRUE

libraries:
- name: django
  version: "1.5"

builtins:
- django_wsgi: on

handlers:
- url: /static
  static_dir: static

- url: /.*
  script: wsgi.application

公式チュートリアルではstylesheetsというディレクトリ名ですが、一般的な静的ファイル用ディレクトリ名であるstaticにします。

そして、プロジェクト直下にstatic/cssディレクトリを作り、さらにその中にmain.cssを作成します。

projectのルートディレクトリ
├── __init__.py
├── app.yaml
├── guestbook
│   ├── README.md
│   ├── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── settings.py
├── static    .......................← NEW!!
│   └── css
│       └── main.css
├── templates
│   └── guestbook
│       └── main_page.html
├── urls.py
└── wsgi.py

main.cssには以下のように記述します。

main.css

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

そして、テンプレートファイルmain_page.htmlに以下を追記します。

main_page.html

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

画面をリロードするとスタイルが反映されてます。

このChapterはこれだけ。