ZappaでKappaを表示してみた - 俺のアウトプット

このエントリは、AWS #2 Advent Calendar 2018 の23日目です。

Zappaとは

Amazon API Gateway と AWS Lambda でWebアプリケーションを簡単に構築、デプロイできるPython用のサーバーレスフレームワークです。
FlaskやDjango、Bottleなど WSGI に対応したフレームワーク上で作成したアプリケーションを、Lambdaで利用できます。

Zappa.io や Zappatista! が実際に Zappa を使ってWebサイトを構築しています。

Kappaとは

頭にお皿を乗せた緑色の妖怪。キュウリが大好き。
一部の河童は地下で強制的に寿司を…略

環境構築

前準備として、ローカル環境に以下の環境を構築します。

AWS Credential 設定
pyenv + pyenv-virtualenv 環境
Python 3.6

Flask

ミニマムなFlaskアプリを準備します。

$ pip install flask

画面に Hello World を表示するだけのサンプルです。

hello.py

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello World'

# We only need this for local development.
if __name__ == '__main__':
    app.run()

ローカル上で確認をします。

$ python hello.py

ブラウザ上で http://127.0.0.1:5000/ にアクセスして Hello World が表示されることを確認します。

Zappa

Zappa をインストール、構築します。

$ pip install zappa
$ zappa init

███████╗ █████╗ ██████╗ ██████╗  █████╗
╚══███╔╝██╔══██╗██╔══██╗██╔══██╗██╔══██╗
  ███╔╝ ███████║██████╔╝██████╔╝███████║
 ███╔╝  ██╔══██║██╔═══╝ ██╔═══╝ ██╔══██║
███████╗██║  ██║██║     ██║     ██║  ██║
╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝     ╚═╝  ╚═╝

Welcome to Zappa!

Zappa is a system for running server-less Python web applications on AWS Lambda and AWS API Gateway.
This `init` command will help you create and configure your new Zappa deployment.
Let's get started!

Your Zappa configuration can support multiple production stages, like 'dev', 'staging', and 'production'.

今回は全てデフォルト、Enterキーを押します。

環境
- What do you want to call this environment (default 'dev'): {Enterキー}
デプロイ時に利用するS3バケット名
- What do you want to call your bucket? (default 'zappa-*********'): {Enterキー}
関数名
- Where is your app's function? (default 'hello.hello.app'): {Enterキー}
グローバル展開するか
- Would you like to deploy this application globally? (default 'n') [y/n/(p)rimary]: {Enterキー}
確認
- Does this look okay? (default 'y') [y/n]: {Enterキー}

zappa_settings.json が作成されます。

{
    "dev": {
        "app_function": "hello.hello.app",
        "aws_region": "ap-northeast-1",
        "profile_name": "default",
        "project_name": "zappa-sample",
        "runtime": "python3.6",
        "s3_bucket": "zappa-*********"
    }
}

ここまでで、ディレクトリ構造は下記のようになります。

zappa-sample/
├── .python-version
├── hello
│   └── hello.py
└── zappa_settings.json

デプロイ

それではdev環境にデプロイしてみましょう。

$ zappa deploy dev

成功(Deployment complete)すると、URLが表示されるので、ブラウザで確認をします。
デプロイ簡単ですね。

更新

テンプレートの利用

Flaskアプリをテンプレートから読み込むように変更します。
templates ディレクトリに index.html を用意します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
</head>
<body>
  <p>{{ message }}</p>
</body>
</html>

hello.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', message="Merry Christmas!!")

# We only need this for local development.
if __name__ == '__main__':
    app.run()

ディレクトリ構造

zappa-sample/
├── .python-version
├── hello
│   ├── hello.py
│   └── templates
│       └── index.html
└── zappa_settings.json

updateコマンドで、dev環境に更新を反映します。

$ zappa update dev

Merry Christmas!!

文字が変わったでしょうか？

静的ファイルの利用

今度は画像ファイルを表示してみます。 staticディレクトリに画像ファイルを配置します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
</head>
<body>
  <p>{{ message }}</p>
  <img src="{{ url_for('static', filename='youkai_kappa.png') }}">
</body>
</html>

ディレクトリ構造

zappa-sample/
├── .python-version
├── hello
│   ├── hello.py
│   ├── static
│   │   └── youkai_kappa.png
│   └── templates
│       └── index.html
└── zappa_settings.json

f:id:kitsugi:20181222223705p:plain

ZappaでKappaを表示できました！！

静的ファイルは、S3上に配置する方が低コストです。
Flaskの場合だと、Flask-S3 を利用すれば、簡単に実現できます。

アンデプロイ

undeploy で削除します。

$ $ zappa undeploy dev

まとめ

語呂がよかったので勢いで書きましたが、虚しくなってきたので、このへんで勘弁してください。

参考

Zappa
- Github
- スライド