Dist 29 gcp_serverless_web_app_development

182 Views

October 25, 19

スライド概要

10/25
DIST #29
https://dist.connpass.com/event/147744/

profile-image

ヴイエムウェア株式会社 プリンシパルエンタープライズアーキテクト。Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic 等を通じて現職でも同様の活動を実施。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニット ソリューションアーキテクトを兼務。 2022年、企業向けに技術顧問、クラウド等開発技術トレーニング、技術マーケティング支援、エバンジェリスト業務、エバンジェリスト養成などを行う合同会社デベロッパーアドボケイトを設立、数社の技術顧問業務や、トレーニング等を実施。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

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

2.

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

3.

Agenda •GCP って何? •GCP の PaaS, Serverless, Container, mBaaS •サンプルアプリご紹介 •まとめ © COPYRIGHT 2019 FIXER Inc.

4.

GCP って何? © COPYRIGHT 2019 FIXER Inc.

5.

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

6.

GCP の PaaS, Serverless, Container, mBaaS © COPYRIGHT 2019 FIXER Inc.

7.

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

8.

Google Cloud Platform Resources and Services (2 of 2) Compute App Engine Container Engine (GKE) Storage Compute Engine Bigtable Cloud Storage Big Data BigQuery Pub/Sub © COPYRIGHT 2019 FIXER Inc. Dataflow Cloud SQL Cloud Datastore App Services Dataproc Datalab Prediction API Endpoints Translate API

9.

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

10.

Google Serverless - PaaS, mBaaS, Serverless, Containers Compute App Engine © COPYRIGHT 2019 FIXER Inc. Google Compute Container Engine Engine (GKE) Serverless Compute Cloud Functions Firebase App Engine Cloud Run Cloud Run on GKE

11.

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

12.

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

13.

Google App Engine (GAE) Apps https://cloud.google.com/appengine/?hl=ja https://cloud.google.com/appengine/docs/?hl=ja https://cloud.google.com/appengine/docs/theappengine-environments?hl=ja App Engine © COPYRIGHT 2019 FIXER Inc. https://cloud.google.com/appengine/docs/flexi ble/dotnet/?hl=ja https://cloud.google.com/appengine/docs/flexi ble/dotnet/quickstart?hl=ja

14.

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

15.

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

16.

Cloud Functions Functions https://cloud.google.com/functions/?hl=ja https://cloud.google.com/functions/docs/?hl=ja https://cloud.google.com/functions/docs/quickstarts?hl=ja https://cloud.google.com/functions/docs/quickstart-nodejs?hl=ja Cloud Functions © COPYRIGHT 2019 FIXER Inc.

17.

Google Cloud Run Containers https://cloud.google.com/run/?hl=ja https://cloud.google.com/run/docs/quickstarts/prebuilt-deploy?hl=ja Cloud Run Cloud Run on GKE 完全サーバレス 管理クラスター無し 従量課金 GKE クラスター上 サーバレス 費用は GKE クラスター に含む © COPYRIGHT 2019 FIXER Inc. https://cloud.google.com/run/docs/quickstarts/build-and-deploy

18.

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

19.

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

20.

Firebase の提供するサービス https://cloud.google.com/products/?hl=ja#firebase より良いアプリの構築 アプリ品質の改善 エンゲージメントを促進 Auth Cloud Storage Crashlytics Analytics Remote Config Cloud Functions Hosting Performance Monitoring Predictions A/B Testing Cloud Firestore Realtime Database Test Lab Cloud Messaging Dynamic Links ML Kit © COPYRIGHT 2019 FIXER Inc. In-App Messaging

21.

Firebase がサポートするプラットフォーム iOS © COPYRIGHT 2019 FIXER Inc. Android Web C++ Unity

22.

Firebase を利用した Web サービス開発 © COPYRIGHT 2019 FIXER Inc.

23.

典型的な Web サービスの構成 認証サービス iOS Compute Engine APIサーバー Compute Engine Android Web © COPYRIGHT 2019 FIXER Inc. データベース Compute Engine

24.

Web サービス開発者の悩みどころ © COPYRIGHT 2019 FIXER Inc.

25.

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

26.

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

27.

Cloud Firestore を利用した構成 Firebase Authentication iOS Cloud Firestore Android Web これまでのようなインフラ管理は不要! Cloud OnAir © COPYRIGHT 2019 FIXER Inc.

28.

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

29.

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

30.

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

31.

Firebase による サービス改善 © COPYRIGHT 2019 FIXER Inc.

32.

Web サービス改善の契機 機能 (Functional) © COPYRIGHT 2019 FIXER Inc. 非機能 (NonFunctional)

33.

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

34.

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

35.

FIXER Café アプリご紹介 © COPYRIGHT 2019 FIXER Inc.

36.

de:code 2019 ブレイクアウトセッション (2019.5.30) © COPYRIGHT 2019 FIXER Inc.

37.

© COPYRIGHT 2019 FIXER Inc.

38.

© COPYRIGHT 2019 FIXER Inc.

39.

Fixer Café アプリのアーキテクチャ OneSignal Push Notification Auth Design Figma API Browser (or PWA App) Hosting © COPYRIGHT 2019 FIXER Inc. Firebase Hosting Firebase Authentication Check Payment Firebase Functions Save Firebase DB Stripe

40.

Progressive Web Applications © COPYRIGHT 2019 FIXER Inc.

41.

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

42.

© COPYRIGHT 2019 FIXER Inc.

43.

Figma Progressive Web Framework Approachable Composing with Components © COPYRIGHT 2019 FIXER Inc.

44.

プロトタイピング © COPYRIGHT 2019 FIXER Inc.

45.

コンポーネントによる構成 © COPYRIGHT 2019 FIXER Inc.

46.

Vue.js Progressive Web Framework Approachable Composing with Components © COPYRIGHT 2019 FIXER Inc.

47.

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

48.

© COPYRIGHT 2019 FIXER Inc.

49.

HTML JavaScript CSS © COPYRIGHT 2019 FIXER Inc.

50.

Nuxt.js Vue.js Framework High Performance Modular © COPYRIGHT 2019 FIXER Inc.

51.

Firebase mBaaS Simple By Google © COPYRIGHT 2019 FIXER Inc.

52.

Fixer Café アプリのアーキテクチャ Firebase Authentication OneSignal Push Notification Design Figma API Browser (or PWA App) Hosting © COPYRIGHT 2019 FIXER Inc. Auth Firebase Hosting Check Payment Firebase Functions Save Firebase DB Stripe

53.

Firebase Authenticationの例 © COPYRIGHT 2019 FIXER Inc.

54.

© COPYRIGHT 2019 FIXER Inc.

55.

Express との併用 © COPYRIGHT 2019 FIXER Inc.

56.

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

57.

Firestore © COPYRIGHT 2019 FIXER Inc.

58.

Firestore シミュレータ © COPYRIGHT 2019 FIXER Inc.

59.

マイクロサービス アーキテクチャ スタイル © COPYRIGHT 2019 FIXER Inc.

60.

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

61.

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

62.

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

63.

© COPYRIGHT 2019 FIXER Inc.