$30 off During Our Annual Pro Sale. View Details »

ZappaでDBもパッケージしたサーバーレスAPIを構築してみた

 ZappaでDBもパッケージしたサーバーレスAPIを構築してみた

PyCon mini Sapporo 2019 発表資料

Yasunori Kirimoto

May 11, 2019
Tweet

More Decks by Yasunori Kirimoto

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. Introduction
    はじめに

    View Slide

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

    View Slide

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

    View Slide

  8. 住所検索API

    View Slide

  9. CHAPTER01
    環境構築

    View Slide

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

    View Slide

  11. 仮想環境構築

    View Slide

  12. パッケージインストール

    View Slide

  13. パッケージインストール

    View Slide

  14. パッケージインストール

    View Slide

  15. CHAPTER02
    API開発

    View Slide

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

    View Slide

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

    View Slide

  18. app.py

    View Slide

  19. app.py

    View Slide

  20. ローカル環境確認

    View Slide

  21. ローカル環境確認

    View Slide

  22. CHAPTER03
    デプロイ

    View Slide

  23. デプロイ環境構築

    View Slide

  24. zappa_settings.json

    View Slide

  25. デプロイ

    View Slide

  26. デプロイ

    View Slide

  27. デプロイ

    View Slide

  28. デプロイ
    Lambda

    View Slide

  29. デプロイ
    API Gateway

    View Slide

  30. 削除 & 更新 & ログ

    View Slide

  31. その他設定

    View Slide

  32. CHAPTER04
    実装例

    View Slide

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

    View Slide

  34. Angularを利用したリスト表示

    View Slide

  35. View Slide

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

    View Slide

  37. 変更ファイル一覧

    View Slide

  38. /src/app/app.module.ts

    View Slide

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

    View Slide

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

    View Slide

  41. /src/app/app.component.ts

    View Slide

  42. /src/app/app.component.html

    View Slide

  43. build
    dev

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. 変更ファイル一覧

    View Slide

  48. /_resouce/js/script.js

    View Slide

  49. /_resouce/js/script.js

    View Slide

  50. /_resouce/js/script.js

    View Slide

  51. build
    dev

    View Slide

  52. Conclusion
    まとめ

    View Slide

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

    View Slide

  54. @dayjournal_nori
    ありがとうございました!

    View Slide