Download as PDF, PPTX
Uploaded byShotaro Suzuki
Dist 29 gcp_serverless_web_app_development
10/25 DIST #29 https://dist.connpass.com/event/147744/
More Related Content
![[Cloud OnAir] Apigee でかんたん API 管理 2019年12月12日 放送](https://cdn.slidesharecdn.com/ss_thumbnails/1212-191212033259-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Cloud OnAir] Google Compute Engine に Deep Dive！ 基本から運用時のベストプラクティスまで 2018年7月1...](https://cdn.slidesharecdn.com/ss_thumbnails/uuuuuu-180719094903-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Cloud OnAir] 事例紹介 : 株式会社マーケティングアプリケーションズ 〜クラウドへのマイグレーションとその後〜 2020年12月17日 放送](https://cdn.slidesharecdn.com/ss_thumbnails/ppp-201221033858-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Dist 29 gcp_serverless_web_app_development
![[AC11] サーバー管理よ、サヨウナラ。サーバーレスアーキテクチャの意義と実践](https://cdn.slidesharecdn.com/ss_thumbnails/ac11-170602094618-thumbnail.jpg?width=640&height=640&fit=bounds)
Dist 29 gcp_serverless_web_app_development
- 1. © COPYRIGHT 2019FIXER Inc. GCP の Serverless で Web アプリ開発 してみよう！ 鈴木 章太郎 株式会社 FIXER Technical Fellow, Evangelist 内閣官房 政府 CIO 補佐官(法務省担当)
- 2. • 株式会社 FIXERTechnical Fellow, Evangelist • 内閣官房 政府 CIO 補佐官 （法務省担当） • 元 Microsoft Technical Evangelist 自己紹介 – 鈴木章太郎 Twitter : @shosuz
- 3. © COPYRIGHT 2019FIXER Inc. Agenda •GCP って何？ •GCP の PaaS, Serverless, Container, mBaaS •サンプルアプリご紹介 •まとめ
- 4. © COPYRIGHT 2019FIXER Inc. GCP って何？
- 5. © COPYRIGHT 2019FIXER Inc. Google Cloud Platform • 幅広いアプリケーションを 作成できるモジュール式の クラウドベースの サービス のセット • Web アプリケーション • API エンドポイント • モバイルアプリケーション • ビッグデータアプリケー ション
- 6. © COPYRIGHT 2019FIXER Inc. GCP の PaaS, Serverless, Container, mBaaS
- 7. © COPYRIGHT 2019FIXER Inc. Google Cloud Platform Resources and Services (1 of 2) • アプリケーションの開発と展開のビルディングブロック • コンピュート • ストレージ • ビッグデータ • API サービス（エンドポイント、マネージ API） • 各組織がアプリケーションの開発に集中できるようにする • Google はインフラストラクチャを管理する
- 8. © COPYRIGHT 2019FIXER 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 2019FIXER Inc. Web アプリケーションのトレンドの変化 • これまでの Web アプリケーションの構築 • .NET、Ruby on Rails、Django などのモノリシックな MVC フレームワークを用いた開発が一般的 • ここ数年、単機能の API サーバーを組み合わせて複雑なシステムを構築するマイクロサービス 化 (主に新規構築) • フロントエンドが HTML + JavaScript で実装され、バックエンドの API サーバーにリクエストする ことでデータの永続化やビジネスロジックの実行を行う場合、 アプリケーションサーバーは HTML テンプレートのレンダリングなどを行う必要がない • こうした考え方を突き詰めていった結果、 アプリケーションサーバーを必要としないサーバーレスアーキ テクチャが登場 • 関数をクラウド上で動作させるサービス • AWS Lambda、Azure Functions、GCP Cloud Functions
- 10. © COPYRIGHT 2019FIXER 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 2019FIXER Inc. GCP のサーバーレスコンピュート Firebase Functions App Engine Apps Cloud Functions Cloud Run Containers Cloud Run on GKE 完全サーバレス 管理クラスター無し 従量課金 GKE クラスター上 サーバレス 費用は GKE クラスター に含む mBaaS
- 12. © COPYRIGHT 2019FIXER Inc. PaaS の元祖、Google App Engine • GCP のサービスの中でも歴史あるサービス • 高いスケーラビリティと高いアベイラビリティ • Google の多くのサービスは GAE 上で構築されている？ • GAE には大きく2種類の実行環境 • Standard Environment (GAE SE) • ノンメンテナンス運用できる • Flexible Environment (GAE FE) • 柔軟性を保持したままメンテナンスを減らして運用できる
- 13. © COPYRIGHT 2019FIXER 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 2019FIXER Inc. App Engine フレキ シブル環境で .NET を使用するための クイックスタート https://cloud.google.com/appengine/docs/flexible/dotne t/quickstart?hl=ja
- 15. © COPYRIGHT 2019FIXER Inc. Cloud Functions • GCP 上で JavaScript で書かれた関数を実行するためのサービス • 関数はイベントベースで発火する形式 • Google Cloud Storage もしくは Google Cloud Pub/Sub からのイベン トで呼び出される • HTTP リクエスト経由での実行も可能 • JavaScript ランタイムとしては Node.js を使用 • 自動的にスケールする仕組み
- 16. © COPYRIGHT 2019FIXER 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 2019FIXER 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 2019FIXER Inc. Firebase とは Google の アプリ開発プラットフォーム https://firebase.google.com/?hl=ja https://cloud.google.com/products/?hl=ja#firebase
- 19. © COPYRIGHT 2019FIXER Inc. Firebase のミッションは アプリ開発者の成功を助けること https://firebase.google.com/?hl=ja https://cloud.google.com/products/?hl=ja#firebase
- 20. © COPYRIGHT 2019FIXER 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 2019FIXER Inc. Firebase がサポートするプラットフォーム iOS Android C++Web Unity
- 22. © COPYRIGHT 2019FIXER Inc. Firebase を利用した Web サービス開発
- 23. © COPYRIGHT 2019FIXER Inc. 典型的な Web サービスの構成 iOS Android Web APIサーバー Compute Engine 認証サービス Compute Engine データベース Compute Engine
- 24. © COPYRIGHT 2019FIXER Inc. Web サービス開発者の悩みどころ
- 25. © COPYRIGHT 2019FIXER Inc. もっと便利な手段があるはず… https://firebase.google.com/products/firestore/?hl=ja Cloud Firestore
- 26. © COPYRIGHT 2019FIXER Inc. Cloud Firestore とは マルチ リージョン対応 強整合性 サーバーレス 容易な同期 オフライン モード 大規模にスケールすることができる サーバーレスの NoSQL リアルタイム データベース https://firebase.google.com/products/firestore/?hl=ja
- 27. © COPYRIGHT 2019FIXER Inc. Cloud Firestore を利用した構成 Cloud OnAir iOS Android Web Cloud Firestore FirebaseAuthentication これまでのようなインフラ管理は不要！
- 28. © COPYRIGHT 2019FIXER Inc. Firebase を 利用した Web サービス 開発 https://codelabs.developers.google.com/codelabs/firebase-web/index.html#0
- 29. © COPYRIGHT 2019FIXER Inc. アーキテクチャ Cloud Shell ユーザ認証 デプロイ ・コマンド実行 ・コード記述 ・ローカルで動作確認 Cloud FirestoreFirebase Hosting データ保存 リアルタイム更新 Webアプリに アクセス Firebase Authentication 操作
- 30. © COPYRIGHT 2019FIXER Inc. https://qiita.com/taketakekaho/items/52b7c196ddbd4cb3c968 Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン
- 31. © COPYRIGHT 2019FIXER Inc. Firebase による サービス改善
- 32. © COPYRIGHT 2019FIXER Inc. Web サービス改善の契機 機能 (Functional) 非機能 (Non- Functional)
- 33. © COPYRIGHT 2019FIXER Inc. Web サイトのパフォーマンスが劣化すると 利益やコンバージョンに対して影響がでる可能性がある パフォーマンスがビジネスに与える影響
- 34. © COPYRIGHT 2019FIXER Inc. • アプリの起動時間や HTTP/S ネットワーク リクエストなど を自動的に測定する • アプリのパフォーマンスの改善が 見込める状況を見抜く • アプリに合わせて Performance Monitoring をカスタマイズする • JavaScript SDK を組み込むだけで 利用可能 ※ Web 向けは Beta 版 Performance Monitoring https://firebase.google.com/products/performance/?hl=ja
- 35. © COPYRIGHT 2019FIXER Inc. FIXER Café アプリご紹介
- 36. © COPYRIGHT 2019FIXER Inc. de:code 2019 ブレイクアウトセッション (2019.5.30)
- 37. © COPYRIGHT 2019FIXER Inc.
- 38. © COPYRIGHT 2019FIXER Inc.
- 39. © COPYRIGHT 2019FIXER 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é アプリのアーキテクチャ
- 40. © COPYRIGHT 2019FIXER Inc. Progressive Web Applications
- 41. © COPYRIGHT 2019FIXER Inc. Cashe API: オフラインのサポート Push API: プッシュ通知 Background Sync: バッググラウンド処理 manifest.json: スマートフォンへのトップへのアイコン追加 Web App
- 42. © COPYRIGHT 2019FIXER Inc.
- 43. © COPYRIGHT 2019FIXER Inc. Figma Progressive Web Framework Approachable Composing with Components
- 44. © COPYRIGHT 2019FIXER Inc. プロトタイピング
- 45. © COPYRIGHT 2019FIXER Inc. コンポーネントによる構成
- 46. © COPYRIGHT 2019FIXER Inc. Vue.js Progressive Web Framework Approachable Composing with Components
- 47. © COPYRIGHT 2019FIXER Inc. SPA(Single Page Application)の基本 – Qiita https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a より 従来 SPA SPA とは? Vue.js とは?
- 48. © COPYRIGHT 2019FIXER Inc.
- 49. © COPYRIGHT 2019FIXER Inc. HTML JavaScript CSS
- 50. © COPYRIGHT 2019FIXER Inc. Nuxt.js Vue.js Framework High Performance Modular
- 51. © COPYRIGHT 2019FIXER Inc. Firebase mBaaS Simple By Google
- 52. © COPYRIGHT 2019FIXER 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é アプリのアーキテクチャ
- 53. © COPYRIGHT 2019FIXER Inc. Firebase Authenticationの例
- 54. © COPYRIGHT 2019FIXER Inc.
- 55. Express との併用 © COPYRIGHT2019 FIXER Inc.
- 56. © COPYRIGHT 2019FIXER Inc. セキュリティルール API を使った操作 REST API スキーマAPIの作成 SQL APIサーバー DB © COPYRIGHT 2019 FIXER Inc. Firestore と従来の API サーバ
- 57. © COPYRIGHT 2019FIXER Inc.© COPYRIGHT 2019 FIXER Inc. Firestore
- 58. © COPYRIGHT 2019FIXER Inc. Firestore シミュレータ © COPYRIGHT 2019 FIXER Inc.
- 59. © COPYRIGHT 2019FIXER Inc. マイクロサービス アーキテクチャ スタイル © COPYRIGHT 2019 FIXER Inc.
- 60. © COPYRIGHT 2019FIXER Inc. 商品管理 支払い ・・・ おすすめ機能 マイクロサービス アーキテクチャ スタイルに沿って実装 © COPYRIGHT 2019 FIXER Inc.
- 61. © COPYRIGHT 2019FIXER Inc. • Firebase とは Google のアプリ開発プラットフォーム • Cloud Firestore を始めとした Firebase サービスを Web サービス に組み 込むことにより、インフラの管理を大幅に軽減 • Performance Monitoring をウェブサイトに組み込むこと により自動的にメトリクスを収集 Firebase を利用してアプリケーションにフォーカス Firebase を使ってみよう！ Google 謹製 ハンズオンコンテンツ Cloud Firestore Web Codelab Firebase Performance Monitoring for Web
- 62. © COPYRIGHT 2019FIXER Inc. まとめ •Google Cloud Platform を使ってみよう！ •PaaS, mBaaS, Container, …順番に触ってみよう！ •まずは無料版から試しましょう！
- 63. © COPYRIGHT 2019FIXER Inc.