182 Views
October 25, 19
スライド概要
10/25
DIST #29
https://dist.connpass.com/event/147744/
ヴイエムウェア株式会社 プリンシパルエンタープライズアーキテクト。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年、企業向けに技術顧問、クラウド等開発技術トレーニング、技術マーケティング支援、エバンジェリスト業務、エバンジェリスト養成などを行う合同会社デベロッパーアドボケイトを設立、数社の技術顧問業務や、トレーニング等を実施。
GCP の Serverless で Web アプリ開発 してみよう! 鈴木 章太郎 株式会社 FIXER Technical Fellow, Evangelist 内閣官房 政府 CIO 補佐官(法務省担当) © COPYRIGHT 2019 FIXER Inc.
自己紹介 – 鈴木章太郎 • 株式会社 FIXER Technical Fellow, Evangelist • 内閣官房 政府 CIO 補佐官 (法務省担当) • 元 Microsoft Technical Evangelist Twitter : @shosuz
Agenda •GCP って何? •GCP の PaaS, Serverless, Container, mBaaS •サンプルアプリご紹介 •まとめ © COPYRIGHT 2019 FIXER Inc.
GCP って何? © COPYRIGHT 2019 FIXER Inc.
Google Cloud Platform • 幅広いアプリケーションを 作成できるモジュール式の クラウドベースの サービス のセット • Web アプリケーション • API エンドポイント • モバイルアプリケーション • ビッグデータアプリケー ション © COPYRIGHT 2019 FIXER Inc.
GCP の PaaS, Serverless, Container, mBaaS © COPYRIGHT 2019 FIXER Inc.
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.
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
GCP のサーバーレスコンピュート Functions Cloud Functions © COPYRIGHT 2019 FIXER Inc. Apps App Engine Containers Cloud Run Cloud Run on GKE 完全サーバレス 管理クラスター無し 従量課金 GKE クラスター上 サーバレス 費用は GKE クラスター に含む mBaaS Firebase
PaaS の元祖、Google App Engine • GCP のサービスの中でも歴史あるサービス • 高いスケーラビリティと高いアベイラビリティ • Google の多くのサービスは GAE 上で構築されている? • GAE には大きく2種類の実行環境 • Standard Environment (GAE SE) • ノンメンテナンス運用できる • Flexible Environment (GAE FE) • 柔軟性を保持したままメンテナンスを減らして運用できる © COPYRIGHT 2019 FIXER Inc.
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
App Engine フレキ シブル環境で .NET を使用するための クイックスタート https://cloud.google.com/appengine/docs/flexible/dotne t/quickstart?hl=ja © COPYRIGHT 2019 FIXER Inc.
Cloud Functions • GCP 上で JavaScript で書かれた関数を実行するためのサービス • 関数はイベントベースで発火する形式 • Google Cloud Storage もしくは Google Cloud Pub/Sub からのイベン トで呼び出される • HTTP リクエスト経由での実行も可能 • JavaScript ランタイムとしては Node.js を使用 • 自動的にスケールする仕組み © COPYRIGHT 2019 FIXER Inc.
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.
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
Firebase とは Google の アプリ開発プラットフォーム https://firebase.google.com/?hl=ja https://cloud.google.com/products/?hl=ja#firebase © COPYRIGHT 2019 FIXER Inc.
Firebase のミッションは アプリ開発者の成功を助けること https://firebase.google.com/?hl=ja https://cloud.google.com/products/?hl=ja#firebase © COPYRIGHT 2019 FIXER Inc.
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
Firebase がサポートするプラットフォーム iOS © COPYRIGHT 2019 FIXER Inc. Android Web C++ Unity
Firebase を利用した Web サービス開発 © COPYRIGHT 2019 FIXER Inc.
典型的な Web サービスの構成 認証サービス iOS Compute Engine APIサーバー Compute Engine Android Web © COPYRIGHT 2019 FIXER Inc. データベース Compute Engine
Web サービス開発者の悩みどころ © COPYRIGHT 2019 FIXER Inc.
もっと便利な手段があるはず… Cloud Firestore https://firebase.google.com/products/firestore/?hl=ja © COPYRIGHT 2019 FIXER Inc.
Cloud Firestore とは https://firebase.google.com/products/firestore/?hl=ja 大規模にスケールすることができる サーバーレスの NoSQL リアルタイム データベース マルチ リージョン対応 強整合性 © COPYRIGHT 2019 FIXER Inc. サーバーレス 容易な同期 オフライン モード
Cloud Firestore を利用した構成 Firebase Authentication iOS Cloud Firestore Android Web これまでのようなインフラ管理は不要! Cloud OnAir © COPYRIGHT 2019 FIXER Inc.
Firebase を 利用した Web サービス 開発 © COPYRIGHT 2019 FIXER Inc. https://codelabs.developers.google.com/codelabs/firebase-web/index.html#0
アーキテクチャ ユーザ認証 Firebase Authentication Webアプリに アクセス 操作 デプロイ Cloud Shell © COPYRIGHT 2019 FIXER Inc. リアルタイム更新 データ保存 Firebase Hosting ・コマンド実行 ・コード記述 ・ローカルで動作確認 Cloud Firestore
Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン https://qiita.com/taketakekaho/items/52b7c196ddbd4cb3c968 © COPYRIGHT 2019 FIXER Inc.
Firebase による サービス改善 © COPYRIGHT 2019 FIXER Inc.
Web サービス改善の契機 機能 (Functional) © COPYRIGHT 2019 FIXER Inc. 非機能 (NonFunctional)
パフォーマンスがビジネスに与える影響 Web サイトのパフォーマンスが劣化すると 利益やコンバージョンに対して影響がでる可能性がある © COPYRIGHT 2019 FIXER Inc.
Performance Monitoring https://firebase.google.com/products/performance/?hl=ja • アプリの起動時間や HTTP/S ネットワーク リクエストなど を自動的に測定する • アプリのパフォーマンスの改善が 見込める状況を見抜く • アプリに合わせて Performance Monitoring をカスタマイズする • JavaScript SDK を組み込むだけで 利用可能 ※ Web 向けは Beta 版 © COPYRIGHT 2019 FIXER Inc.
FIXER Café アプリご紹介 © COPYRIGHT 2019 FIXER Inc.
de:code 2019 ブレイクアウトセッション (2019.5.30) © COPYRIGHT 2019 FIXER Inc.
© COPYRIGHT 2019 FIXER Inc.
© COPYRIGHT 2019 FIXER Inc.
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
Progressive Web Applications © COPYRIGHT 2019 FIXER Inc.
Cashe API: オフラインのサポート Web App Push API: プッシュ通知 Background Sync: バッググラウンド処理 manifest.json: スマートフォンへのトップへのアイコン追加 © COPYRIGHT 2019 FIXER Inc.
© COPYRIGHT 2019 FIXER Inc.
Figma Progressive Web Framework Approachable Composing with Components © COPYRIGHT 2019 FIXER Inc.
プロトタイピング © COPYRIGHT 2019 FIXER Inc.
コンポーネントによる構成 © COPYRIGHT 2019 FIXER Inc.
Vue.js Progressive Web Framework Approachable Composing with Components © COPYRIGHT 2019 FIXER Inc.
SPA とは? Vue.js とは? 従来 SPA SPA(Single Page Application)の基本 – Qiita https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a より © COPYRIGHT 2019 FIXER Inc.
© COPYRIGHT 2019 FIXER Inc.
HTML JavaScript CSS © COPYRIGHT 2019 FIXER Inc.
Nuxt.js Vue.js Framework High Performance Modular © COPYRIGHT 2019 FIXER Inc.
Firebase mBaaS Simple By Google © COPYRIGHT 2019 FIXER Inc.
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
Firebase Authenticationの例 © COPYRIGHT 2019 FIXER Inc.
© COPYRIGHT 2019 FIXER Inc.
Express との併用 © COPYRIGHT 2019 FIXER Inc.
Firestore と従来の API サーバ API を使った操作 セキュリティルール DB APIサーバー SQL REST API APIの作成 © COPYRIGHT 2019 FIXER Inc. スキーマ
Firestore © COPYRIGHT 2019 FIXER Inc.
Firestore シミュレータ © COPYRIGHT 2019 FIXER Inc.
マイクロサービス アーキテクチャ スタイル © COPYRIGHT 2019 FIXER Inc.
マイクロサービス アーキテクチャ スタイルに沿って実装 商品管理 支払い ・・・ おすすめ機能 © COPYRIGHT 2019 FIXER Inc.
Firebase を利用してアプリケーションにフォーカス • Firebase とは Google のアプリ開発プラットフォーム • Cloud Firestore を始めとした Firebase サービスを Web サービス に組み 込むことにより、インフラの管理を大幅に軽減 • Performance Monitoring をウェブサイトに組み込むこと により自動的にメトリクスを収集 Firebase を使ってみよう! © COPYRIGHT 2019 FIXER Inc. Google 謹製 ハンズオンコンテンツ Cloud Firestore Web Codelab Firebase Performance Monitoring for Web
まとめ • Google Cloud Platform を使ってみよう! • PaaS, mBaaS, Container, …順番に触ってみよう! • まずは無料版から試しましょう! © COPYRIGHT 2019 FIXER Inc.
© COPYRIGHT 2019 FIXER Inc.