Dist 29 gcp_serverless_web_app_development

© COPYRIGHT 2019 FIXER Inc.
GCP の Serverless で
Web アプリ開発
してみよう！
鈴木章太郎
株式会社 FIXER Technical Fellow, Evangelist
内閣官房政府 CIO 補佐官(法務省担当)

• 株式会社 FIXER Technical
Fellow, Evangelist
• 内閣官房政府 CIO 補佐官
（法務省担当）
• 元 Microsoft Technical
Evangelist
自己紹介 – 鈴木章太郎
Twitter : @shosuz

Agenda
•GCP って何？
•GCP の PaaS, Serverless, Container, mBaaS
•サンプルアプリご紹介
•まとめ

GCP って何？

Google Cloud
Platform
• 幅広いアプリケーションを
作成できるモジュール式の
クラウドベースのサービス
のセット
• Web アプリケーション
• API エンドポイント
• モバイルアプリケーション
• ビッグデータアプリケー
ション

GCP の
PaaS, Serverless,
Container, mBaaS

Google Cloud Platform
Resources and Services (1 of 2)
• アプリケーションの開発と展開のビルディングブロック
• コンピュート
• ストレージ
• ビッグデータ
• API サービス（エンドポイント、マネージ API）
• 各組織がアプリケーションの開発に集中できるようにする
• Google はインフラストラクチャを管理する

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

Web アプリケーションのトレンドの変化
• これまでの Web アプリケーションの構築
• .NET、Ruby on Rails、Django などのモノリシックな MVC フレームワークを用いた開発が一般的
• ここ数年、単機能の API サーバーを組み合わせて複雑なシステムを構築するマイクロサービス化
(主に新規構築)
• フロントエンドが HTML + JavaScript で実装され、バックエンドの API サーバーにリクエストする
ことでデータの永続化やビジネスロジックの実行を行う場合、アプリケーションサーバーは HTML
テンプレートのレンダリングなどを行う必要がない
• こうした考え方を突き詰めていった結果、アプリケーションサーバーを必要としないサーバーレスアーキ
テクチャが登場
• 関数をクラウド上で動作させるサービス
• AWS Lambda、Azure Functions、GCP Cloud Functions

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

GCP のサーバーレスコンピュート
Firebase
Functions
App
Engine
Apps
Cloud
Functions
Cloud
Run
Containers
Cloud Run
on GKE
完全サーバレス
管理クラスター無し
従量課金
GKE クラスター上
サーバレス
費用は GKE クラスター
に含む
mBaaS

PaaS の元祖、Google App Engine
• GCP のサービスの中でも歴史あるサービス
• 高いスケーラビリティと高いアベイラビリティ
• Google の多くのサービスは GAE 上で構築されている？
• GAE には大きく2種類の実行環境
• Standard Environment (GAE SE)
• ノンメンテナンス運用できる
• Flexible Environment (GAE FE)
• 柔軟性を保持したままメンテナンスを減らして運用できる

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

App Engine フレキ
シブル環境で .NET
を使用するための
クイックスタート
https://cloud.google.com/appengine/docs/flexible/dotne
t/quickstart?hl=ja

Cloud Functions
• GCP 上で JavaScript で書かれた関数を実行するためのサービス
• 関数はイベントベースで発火する形式
• Google Cloud Storage もしくは Google Cloud Pub/Sub からのイベン
トで呼び出される
• HTTP リクエスト経由での実行も可能
• JavaScript ランタイムとしては Node.js を使用
• 自動的にスケールする仕組み

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

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

Firebase とは Google の
アプリ開発プラットフォーム
https://firebase.google.com/?hl=ja
https://cloud.google.com/products/?hl=ja#firebase

Firebase のミッションは
アプリ開発者の成功を助けること
https://firebase.google.com/?hl=ja

Firebase の提供するサービス
アプリ品質の改善
Crashlytics
Performance
Monitoring
Test Lab
エンゲージメントを促進
Analytics
Predictions
Cloud
Messaging
Remote
Conﬁg
A/B Testing
Dynamic
Links
In-App
Messaging
より良いアプリの構築
Auth
Cloud
Functions
Cloud
Firestore
Cloud
Storage
Hosting
Realtime
Database
MLKit

Firebase がサポートするプラットフォーム
iOS Android C++Web Unity

Firebase を利用した
Web サービス開発

典型的な Web サービスの構成
iOS
Android
Web
APIサーバー
Compute Engine
認証サービス
Compute Engine
データベース
Compute Engine

Web サービス開発者の悩みどころ

もっと便利な手段があるはず…
https://firebase.google.com/products/firestore/?hl=ja
Cloud Firestore

Cloud Firestore とは
マルチリージョン対応
強整合性
サーバーレス容易な同期オフライン
モード
大規模にスケールすることができる
サーバーレスの NoSQL リアルタイムデータベース
https://firebase.google.com/products/firestore/?hl=ja

Cloud Firestore を利用した構成
Cloud OnAir
iOS
Android
Web
Cloud Firestore
FirebaseAuthentication
これまでのようなインフラ管理は不要！

Firebase を
利用した
Web サービス
開発
https://codelabs.developers.google.com/codelabs/firebase-web/index.html#0

アーキテクチャ
Cloud Shell
ユーザ認証
デプロイ
・コマンド実行
・コード記述
・ローカルで動作確認
Cloud FirestoreFirebase Hosting
データ保存
リアルタイム更新
Webアプリに
アクセス
Firebase
Authentication
操作

https://qiita.com/taketakekaho/items/52b7c196ddbd4cb3c968
Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン

Firebase による
サービス改善

Web サービス改善の契機
機能
(Functional)
非機能
(Non-
Functional)

Web サイトのパフォーマンスが劣化すると
利益やコンバージョンに対して影響がでる可能性がある
パフォーマンスがビジネスに与える影響

• アプリの起動時間や HTTP/S
ネットワークリクエストなど
を自動的に測定する
• アプリのパフォーマンスの改善が
見込める状況を見抜く
• アプリに合わせて Performance
Monitoring をカスタマイズする
• JavaScript SDK を組み込むだけで
利用可能
※ Web 向けは Beta 版
Performance Monitoring
https://firebase.google.com/products/performance/?hl=ja

FIXER Café アプリご紹介

de:code 2019 ブレイクアウトセッション (2019.5.30)

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é アプリのアーキテクチャ

Progressive
Web
Applications

Cashe API:
オフラインのサポート
Push API:
プッシュ通知
Background Sync:
バッググラウンド処理
manifest.json:
スマートフォンへのトップへのアイコン追加
Web App

Figma
Progressive Web Framework
Approachable
Composing with Components

プロトタイピング

コンポーネントによる構成

Vue.js
Progressive Web Framework
Approachable
Composing with Components

SPA(Single Page Application)の基本 – Qiita
https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a より
従来 SPA
SPA とは? Vue.js とは?

HTML
JavaScript
CSS

Nuxt.js
Vue.js Framework
High Performance
Modular

Firebase
mBaaS
Simple
By Google

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é アプリのアーキテクチャ

Firebase Authenticationの例

Express との併用

セキュリティルール
API を使った操作
REST API
スキーマAPIの作成
SQL
APIサーバー DB
Firestore と従来の API サーバ

Firestore シミュレータ

マイクロサービスアーキテクチャスタイル

商品管理
支払い
・・・
おすすめ機能
マイクロサービスアーキテクチャスタイルに沿って実装

• Firebase とは Google のアプリ開発プラットフォーム
• Cloud Firestore を始めとした Firebase サービスを Web サービス
に組み込むことにより、インフラの管理を大幅に軽減
• Performance Monitoring をウェブサイトに組み込むこと
により自動的にメトリクスを収集
Firebase を利用してアプリケーションにフォーカス
Firebase を使ってみよう！
Google 謹製
ハンズオンコンテンツ
Cloud Firestore Web Codelab
Firebase Performance Monitoring for Web

まとめ
•Google Cloud Platform を使ってみよう！
•PaaS, mBaaS, Container, …順番に触ってみよう！
•まずは無料版から試しましょう！

Dist 29 gcp_serverless_web_app_development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Dist 29 gcp_serverless_web_app_development

Similar to Dist 29 gcp_serverless_web_app_development (20)

More from Shotaro Suzuki

More from Shotaro Suzuki (20)

Recently uploaded

Recently uploaded (14)

Dist 29 gcp_serverless_web_app_development