Tweet
Tweet

Slide 1

Slide 1 text

ZappaでDBもパッケージした サーバーレスAPIを構築してみた Yasunori Kirimoto 2019.05.11 PyCon mini Sapporo 2019

Slide 2

Slide 2 text

GIS engineer, Web engineer dayjournal : Self-employed Yasunori Kirimoto MIERUNE Inc. : Co-founder

Slide 3

Slide 3 text

技術書典6で本だしました

Slide 4

Slide 4 text

Contents はじめに 環境構築 API開発 デプロイ 実装例

Slide 5

Slide 5 text

Introduction はじめに

Slide 6

Slide 6 text

Zappaを知っている方いますか

Slide 7

Slide 7 text

Zappaとは、AWSのLambdaやAPI Gateway等の サービスを利用し、Webアプリケーションを手軽に 構築できるPythonのサーバーレスフレームワーク

Slide 8

Slide 8 text

住所検索API

Slide 9

Slide 9 text

CHAPTER01 環境構築

Slide 10

Slide 10 text

: Pythonの仮想環境構築ツール pyenv virtualenv AWS CLI 事前準備 インストール & 設定 : Pythonのバージョン切り替えツール : AWSのコマンドラインツール

Slide 11

Slide 11 text

仮想環境構築

Slide 12

Slide 12 text

パッケージインストール

Slide 13

Slide 13 text

パッケージインストール

Slide 14

Slide 14 text

パッケージインストール

Slide 15

Slide 15 text

CHAPTER02 API開発

Slide 16

Slide 16 text

: API用のPythonファイル db.sqlite app.py API配信用ファイル一覧 : 住所検索用のSQLiteファイル

Slide 17

Slide 17 text

db.sqlite ・DBもパッケージしたAPIを構築するためSQLiteを利用 ・国土地理院の「住居表示住所」データを利用 ※ 電子国土基本図(地名情報)「住居表示住所」データを利用するためには、 国土地理院へ利用申請が必要です。

Slide 18

Slide 18 text

app.py

Slide 19

Slide 19 text

app.py

Slide 20

Slide 20 text

ローカル環境確認

Slide 21

Slide 21 text

ローカル環境確認

Slide 22

Slide 22 text

CHAPTER03 デプロイ

Slide 23

Slide 23 text

デプロイ環境構築

Slide 24

Slide 24 text

zappa_settings.json

Slide 25

Slide 25 text

デプロイ

Slide 26

Slide 26 text

デプロイ

Slide 27

Slide 27 text

デプロイ

Slide 28

Slide 28 text

デプロイ Lambda

Slide 29

Slide 29 text

デプロイ API Gateway

Slide 30

Slide 30 text

削除 & 更新 & ログ

Slide 31

Slide 31 text

その他設定

Slide 32

Slide 32 text

CHAPTER04 実装例

Slide 33

Slide 33 text

を利用した位置情報の可視化 フロントエンドとの連携 Angular を利用したリスト表示

Slide 34

Slide 34 text

Angularを利用したリスト表示

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Angular CLI & 環境設定 ・Angular v7.2.0 ・Angular Material v7.3.7 ・TypeScript v3.2.2 事前準備 インストール & 設定

Slide 37

Slide 37 text

変更ファイル一覧

Slide 38

Slide 38 text

/src/app/app.module.ts

Slide 39

Slide 39 text

/src/environments/environment.ts /src/environments/environment.prod.ts

Slide 40

Slide 40 text

/src/app/service/config.service.ts

Slide 41

Slide 41 text

/src/app/app.component.ts

Slide 42

Slide 42 text

/src/app/app.component.html

Slide 43

Slide 43 text

build dev

Slide 44

Slide 44 text

を利用した位置情報の可視化

Slide 45

Slide 45 text

Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.

Slide 46

Slide 46 text

事前準備 インストール & 設定 mapboxgljs-starter https://github.com/dayjournal/mapboxgljs-starter Install package

Slide 47

Slide 47 text

変更ファイル一覧

Slide 48

Slide 48 text

/_resouce/js/script.js

Slide 49

Slide 49 text

/_resouce/js/script.js

Slide 50

Slide 50 text

/_resouce/js/script.js

Slide 51

Slide 51 text

build dev

Slide 52

Slide 52 text

Conclusion まとめ

Slide 53

Slide 53 text

・Zappaで手軽にサーバーレスが可能 ・オプション以上の設定は別の方法を検討 ・DBのパッケージも可能（容量制限250MB） ・地図の可視化にも利用可能

Slide 54

Slide 54 text

@dayjournal_nori ありがとうございました！