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

PyCon mini Sapporo 2019 発表資料

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