Dist 29 gcp_serverless_web_app_development

191 Views

October 25, 19

#google #gcp #gae #cloud run #cloud run on gke #gke #vue. #Google Cloud Platform #Serverless #Webアプリケーション開発 #Google App Engine #Firebase

スライド概要

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

Shotaro Suzuki

@shosuz

スライド一覧

FPT ジャパン　エグゼクティブエバンジェリスト独立行政法人　国立印刷局デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で13年間、テクニカルエバンジェリストとして .NET、C#、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動 (DevRel) 。Dell、Accenture、Elastic、VMware 等での DevRel 後、2024年11月1日より現職で DevRel 活動を開始。NVIDIA との戦略的協業 AI GPU クラウド、Azure/AWS/GC 上の AI ＆データ関連サービスのマーケティング、プリセールス、教育、関連新規サービス開発。元内閣官房 IT 総合戦略室政府 CIO 補佐官（兼務）、元デジタル庁ソリューションアーキテクト（兼務）。

またはPlayer版

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

（ダウンロード不可）

関連スライド

GitHub Copilot & Copilot Chat で Java コーディングを最大限効率化する-配布用

intellij spring starter github github copilot github copilot chat visual studio code java spring boot h2

Shotaro Suzuki 49.8K

Azure OpenAI Service 概要とサンプルアプリ等のご紹介

microsoft azure openai .net python javascript ai chatgpt azure openai service csharp

Shotaro Suzuki 45.7K

新たな AI 駆動開発の潮流(SWE Agent, AutoDev,Devin, GitHub Copilot Workspace等)

devin opendevin azure autodev github github copilot github copilot chat swe agent chatgpt openai python conda claude github copilot workspace gpt-4 gpt-4o agent github codespace

Shotaro Suzuki 24.7K

VSCode、GitHub Copilot Chat で Web アプリを開発してみよう - 2

vscode github github copilot github copilot chat codex mermaid visual studio code visual studio azure sql database azure cosmos db openai asp.net core azure cognitive seach csharp azure openai service prompt engineering signalr chat

Shotaro Suzuki 12K

.NET と Azure OpenAI Service を使ったインテリジェントアプリケーションを構築してみよう

.net azure azure openai service semantic kernel blazor webassembly blazor cosmos db azure cognitive search maui visual studio 2022 for mac

Shotaro Suzuki 10.1K

各ページのテキスト

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

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

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

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.

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.

https://cloud.google.com/appengine/docs/flexible/dotnet/quickstart?hl=ja

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.

19.

20.

Firebase の提供するサービス https://cloud.google.com/products/?hl=ja#firebase より良いアプリの構築アプリ品質の改善エンゲージメントを促進 Auth Cloud Storage Crashlytics Analytics Remote Conﬁg 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

https://cloud.google.com/products/?hl=ja#firebase

21.

22.

23.

24.

25.

https://firebase.google.com/products/firestore/?hl=ja

26.

https://firebase.google.com/products/firestore/?hl=ja

27.

28.

https://codelabs.developers.google.com/codelabs/firebase-web/index.html#0

29.

30.

https://qiita.com/taketakekaho/items/52b7c196ddbd4cb3c968

31.

32.

33.

34.

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

https://firebase.google.com/products/performance/?hl=ja

35.

36.

37.

38.

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.

41.

42.

43.

44.

45.

46.

47.

https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a

48.

49.

50.

51.

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.

54.

55.

56.

57.

58.

59.

60.

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.

63.