Mais conteúdo relacionado
Semelhante a Dist 29 gcp_serverless_web_app_development (20)
Mais de Shotaro Suzuki (20)
Dist 29 gcp_serverless_web_app_development
- 1. © COPYRIGHT 2019 FIXER Inc.
GCP の Serverless で
Web アプリ開発
してみよう!
鈴木 章太郎
株式会社 FIXER Technical Fellow, Evangelist
内閣官房 政府 CIO 補佐官(法務省担当)
- 2. • 株式会社 FIXER Technical
Fellow, Evangelist
• 内閣官房 政府 CIO 補佐官
(法務省担当)
• 元 Microsoft Technical
Evangelist
自己紹介 – 鈴木章太郎
Twitter : @shosuz
- 3. © COPYRIGHT 2019 FIXER Inc.
Agenda
•GCP って何?
•GCP の PaaS, Serverless, Container, mBaaS
•サンプルアプリご紹介
•まとめ
- 5. © COPYRIGHT 2019 FIXER Inc.
Google Cloud
Platform
• 幅広いアプリケーションを
作成できるモジュール式の
クラウドベースの サービス
のセット
• Web アプリケーション
• API エンドポイント
• モバイルアプリケーション
• ビッグデータアプリケー
ション
- 7. © COPYRIGHT 2019 FIXER Inc.
Google Cloud Platform
Resources and Services (1 of 2)
• アプリケーションの開発と展開のビルディングブロック
• コンピュート
• ストレージ
• ビッグデータ
• API サービス(エンドポイント、マネージ API)
• 各組織がアプリケーションの開発に集中できるようにする
• Google はインフラストラクチャを管理する
- 8. © COPYRIGHT 2019 FIXER Inc.
Google Cloud Platform Resources and Services (2 of 2)
BigQuery
Big Data
Pub/Sub Dataflow Dataproc Datalab
App Services
EndpointsPrediction API Translate API
Compute
Compute EngineApp Engine Container Engine
(GKE)
Storage
Cloud
Storage
Cloud SQL Cloud
Datastore
Bigtable
- 9. © COPYRIGHT 2019 FIXER Inc.
Web アプリケーションのトレンドの変化
• これまでの Web アプリケーションの構築
• .NET、Ruby on Rails、Django などのモノリシックな MVC フレームワークを用いた開発が一般的
• ここ数年、単機能の API サーバーを組み合わせて複雑なシステムを構築するマイクロサービス 化
(主に新規構築)
• フロントエンドが HTML + JavaScript で実装され、バックエンドの API サーバーにリクエストする
ことでデータの永続化やビジネスロジックの実行を行う場合、 アプリケーションサーバーは HTML
テンプレートのレンダリングなどを行う必要がない
• こうした考え方を突き詰めていった結果、 アプリケーションサーバーを必要としないサーバーレスアーキ
テクチャが登場
• 関数をクラウド上で動作させるサービス
• AWS Lambda、Azure Functions、GCP Cloud Functions
- 10. © COPYRIGHT 2019 FIXER Inc.
Google Serverless - PaaS, mBaaS, Serverless, Containers
Compute
Compute
Engine
App
Engine
Google
Container
Engine
(GKE)
Cloud Run on GKEFirebase
Cloud
Run
Cloud
Functions
App
Engine
Serverless
Compute
- 11. © COPYRIGHT 2019 FIXER Inc.
GCP のサーバーレスコンピュート
Firebase
Functions
App
Engine
Apps
Cloud
Functions
Cloud
Run
Containers
Cloud Run
on GKE
完全サーバレス
管理クラスター無し
従量課金
GKE クラスター上
サーバレス
費用は GKE クラスター
に含む
mBaaS
- 12. © COPYRIGHT 2019 FIXER Inc.
PaaS の元祖、Google App Engine
• GCP のサービスの中でも歴史あるサービス
• 高いスケーラビリティと高いアベイラビリティ
• Google の多くのサービスは GAE 上で構築されている?
• GAE には大きく2種類の実行環境
• Standard Environment (GAE SE)
• ノンメンテナンス運用できる
• Flexible Environment (GAE FE)
• 柔軟性を保持したままメンテナンスを減らして運用できる
- 13. © COPYRIGHT 2019 FIXER Inc.
Google App Engine (GAE)
App
Engine
Apps
https://cloud.google.com/appengine/?hl=ja
https://cloud.google.com/appengine/docs/?hl=ja
https://cloud.google.com/appengine/docs/the-
appengine-environments?hl=ja
https://cloud.google.com/appengine/docs/flexi
ble/dotnet/?hl=ja
https://cloud.google.com/appengine/docs/flexi
ble/dotnet/quickstart?hl=ja
- 14. © COPYRIGHT 2019 FIXER Inc.
App Engine フレキ
シブル環境で .NET
を使用するための
クイックスタート
https://cloud.google.com/appengine/docs/flexible/dotne
t/quickstart?hl=ja
- 15. © COPYRIGHT 2019 FIXER Inc.
Cloud Functions
• GCP 上で JavaScript で書かれた関数を実行するためのサービス
• 関数はイベントベースで発火する形式
• Google Cloud Storage もしくは Google Cloud Pub/Sub からのイベン
トで呼び出される
• HTTP リクエスト経由での実行も可能
• JavaScript ランタイムとしては Node.js を使用
• 自動的にスケールする仕組み
- 16. © COPYRIGHT 2019 FIXER Inc.
Cloud Functions
Functions
Cloud
Functions
https://cloud.google.com/functions/?hl=ja
https://cloud.google.com/functions/docs/?hl=ja
https://cloud.google.com/functions/docs/quickstart-nodejs?hl=ja
https://cloud.google.com/functions/docs/quickstarts?hl=ja
- 17. © COPYRIGHT 2019 FIXER Inc.
Google Cloud Run
Cloud
Run
Containers
Cloud Run
on GKE
完全サーバレス
管理クラスター無し
従量課金
GKE クラスター上
サーバレス
費用は GKE クラスター
に含む
https://cloud.google.com/run/docs/quickstarts/build-and-deploy
https://cloud.google.com/run/?hl=ja
https://cloud.google.com/run/docs/quickstarts/prebuilt-deploy?hl=ja
- 18. © COPYRIGHT 2019 FIXER Inc.
Firebase とは Google の
アプリ開発プラットフォーム
https://firebase.google.com/?hl=ja
https://cloud.google.com/products/?hl=ja#firebase
- 19. © COPYRIGHT 2019 FIXER Inc.
Firebase のミッションは
アプリ開発者の成功を助けること
https://firebase.google.com/?hl=ja
https://cloud.google.com/products/?hl=ja#firebase
- 20. © COPYRIGHT 2019 FIXER Inc.
Firebase の提供するサービス
アプリ品質の改善
Crashlytics
Performance
Monitoring
Test Lab
エンゲージメントを促進
Analytics
Predictions
Cloud
Messaging
Remote
Config
A/B Testing
Dynamic
Links
In-App
Messaging
より良いアプリの構築
Auth
Cloud
Functions
Cloud
Firestore
Cloud
Storage
Hosting
Realtime
Database
MLKit
https://cloud.google.com/products/?hl=ja#firebase
- 21. © COPYRIGHT 2019 FIXER Inc.
Firebase がサポートするプラットフォーム
iOS Android C++Web Unity
- 23. © COPYRIGHT 2019 FIXER Inc.
典型的な Web サービスの構成
iOS
Android
Web
APIサーバー
Compute Engine
認証サービス
Compute Engine
データベース
Compute Engine
- 25. © COPYRIGHT 2019 FIXER Inc.
もっと便利な手段があるはず…
https://firebase.google.com/products/firestore/?hl=ja
Cloud Firestore
- 26. © COPYRIGHT 2019 FIXER Inc.
Cloud Firestore とは
マルチ リージョン対応
強整合性
サーバーレス 容易な同期 オフライン
モード
大規模にスケールすることができる
サーバーレスの NoSQL リアルタイム データベース
https://firebase.google.com/products/firestore/?hl=ja
- 27. © COPYRIGHT 2019 FIXER Inc.
Cloud Firestore を利用した構成
Cloud OnAir
iOS
Android
Web
Cloud Firestore
FirebaseAuthentication
これまでのようなインフラ管理は不要!
- 28. © COPYRIGHT 2019 FIXER Inc.
Firebase を
利用した
Web サービス
開発
https://codelabs.developers.google.com/codelabs/firebase-web/index.html#0
- 29. © COPYRIGHT 2019 FIXER Inc.
アーキテクチャ
Cloud Shell
ユーザ認証
デプロイ
・コマンド実行
・コード記述
・ローカルで動作確認
Cloud FirestoreFirebase Hosting
データ保存
リアルタイム更新
Webアプリに
アクセス
Firebase
Authentication
操作
- 30. © COPYRIGHT 2019 FIXER Inc.
https://qiita.com/taketakekaho/items/52b7c196ddbd4cb3c968
Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン
- 32. © COPYRIGHT 2019 FIXER Inc.
Web サービス改善の契機
機能
(Functional)
非機能
(Non-
Functional)
- 33. © COPYRIGHT 2019 FIXER Inc.
Web サイトのパフォーマンスが劣化すると
利益やコンバージョンに対して影響がでる可能性がある
パフォーマンスがビジネスに与える影響
- 34. © COPYRIGHT 2019 FIXER Inc.
• アプリの起動時間や HTTP/S
ネットワーク リクエストなど
を自動的に測定する
• アプリのパフォーマンスの改善が
見込める状況を見抜く
• アプリに合わせて Performance
Monitoring をカスタマイズする
• JavaScript SDK を組み込むだけで
利用可能
※ Web 向けは Beta 版
Performance Monitoring
https://firebase.google.com/products/performance/?hl=ja
- 39. © COPYRIGHT 2019 FIXER Inc.
Firebase
Functions
Firebase Hosting Firebase DB
Stripe
Browser (or PWA App)
Firebase
Authentication
OneSignal
Hosting
Push Notification
PaymentAPI
Auth
Check
Save
Design
Figma
Fixer Café アプリのアーキテクチャ
- 41. © COPYRIGHT 2019 FIXER Inc.
Cashe API:
オフラインのサポート
Push API:
プッシュ通知
Background Sync:
バッググラウンド処理
manifest.json:
スマートフォンへのトップへのアイコン追加
Web App
- 43. © COPYRIGHT 2019 FIXER Inc.
Figma
Progressive Web Framework
Approachable
Composing with Components
- 46. © COPYRIGHT 2019 FIXER Inc.
Vue.js
Progressive Web Framework
Approachable
Composing with Components
- 47. © COPYRIGHT 2019 FIXER Inc.
SPA(Single Page Application)の基本 – Qiita
https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a より
従来 SPA
SPA とは? Vue.js とは?
- 50. © COPYRIGHT 2019 FIXER Inc.
Nuxt.js
Vue.js Framework
High Performance
Modular
- 52. © COPYRIGHT 2019 FIXER Inc.
Firebase
Functions
Firebase
Hosting
Firebase DB
Stripe
Browser (or PWA App)
Firebase
Authentication
OneSignal
Hosting
Push Notification
PaymentAPI
Auth
Check
Save
Design
Figma
Fixer Café アプリのアーキテクチャ
- 56. © COPYRIGHT 2019 FIXER Inc.
セキュリティルール
API を使った操作
REST API
スキーマAPIの作成
SQL
APIサーバー DB
© COPYRIGHT 2019 FIXER Inc.
Firestore と従来の API サーバ
- 59. © COPYRIGHT 2019 FIXER Inc.
マイクロサービス アーキテクチャ スタイル
© COPYRIGHT 2019 FIXER Inc.
- 60. © COPYRIGHT 2019 FIXER Inc.
商品管理
支払い
・・・
おすすめ機能
マイクロサービス アーキテクチャ スタイルに沿って実装
© COPYRIGHT 2019 FIXER Inc.
- 61. © COPYRIGHT 2019 FIXER Inc.
• Firebase とは Google のアプリ開発プラットフォーム
• Cloud Firestore を始めとした Firebase サービスを Web サービス
に組み 込むことにより、インフラの管理を大幅に軽減
• Performance Monitoring をウェブサイトに組み込むこと
により自動的にメトリクスを収集
Firebase を利用してアプリケーションにフォーカス
Firebase を使ってみよう!
Google 謹製
ハンズオンコンテンツ
Cloud Firestore Web Codelab
Firebase Performance Monitoring for Web
- 62. © COPYRIGHT 2019 FIXER Inc.
まとめ
•Google Cloud Platform を使ってみよう!
•PaaS, mBaaS, Container, …順番に触ってみよう!
•まずは無料版から試しましょう!