2019-06-03 「Google Cloud で実践する Web アプリ開発」行ってきたメモ

GCP gcpwebapp

おしながき

https://developers-jp.googleblog.com/2019/05/google-cloud-web.html

17:30 受付開始
18:00 ～ 18:05　オープニング
18:05 ～ 18:35　Web フロントエンド開発最新動向
　　　　　　　 グーグル合同会社　宇都宮 佑亮
18:35 ～ 19:05　GCP のサーバーレスサービス紹介
　　　　　　　 グーグル・クラウド・ジャパン合同会社　篠原 一徳　
19:05 ～ 19:20　休憩　
19:20 ～ 19:50　 リクルートにおけるWebパフォーマンス改善の取り組み
株式会社リクルートテクノロジーズ　新井 智士 氏
19:50 ～ 20:20　インフラ管理不要の Firebase と GKE で実現するモバイルアプリ開発
株式会社Ginco 西川 達哉 氏
20:20 ～ 20:30　クロージング17:30 受付開始
18:00 ～ 18:05　オープニング
18:05 ～ 18:35　Web フロントエンド開発最新動向
　　　　　　　 グーグル合同会社　宇都宮 佑亮
18:35 ～ 19:05　GCP のサーバーレスサービス紹介
　　　　　　　 グーグル・クラウド・ジャパン合同会社　篠原 一徳　
19:05 ～ 19:20　休憩　
19:20 ～ 19:50　 リクルートにおけるWebパフォーマンス改善の取り組み
株式会社リクルートテクノロジーズ　新井 智士 氏
19:50 ～ 20:20　インフラ管理不要の Firebase と GKE で実現するモバイルアプリ開発
株式会社Ginco 西川 達哉 氏
20:20 ～ 20:30　クロージング
20:30 ～ 21:30　懇親会

オープニング

  • ちょっと遅れる
  • 今回は実験的な取り組み
    • とくにフロントエンドとバックエンドの両方を同日にやったこととか
  • 「無音シャッターカメラを」というアナウンス。素晴らしい。
  • 厳し目に締めたけど満席！とのこと。

18:05 ～ 18:35　Web フロントエンド開発最新動向 グーグル合同会社　宇都宮 佑亮 さん

  • AMPとかそのあたり
    • スライドタイトル読み上げ、めっちゃ発音いいｗ
  • FirefoxPhoneが自販機$7で買える！？
  • FCP6秒、TTI9秒が中央値
    • なるほどこれは結構世の中がひどい
  • Preload,DNS Prefech,・・・
  • 1stStep 画像はCDN使おう
  • でも半年後にリグレッション
  • そこでPerformance Budget
    • HTMLやスクリプトのサイズに制限を設ける
      • ここまではやっていいよ、の基準
    • SRE的な発想かな？
  • Chrome UX Report！
  • Google Search Report
  • Lighthouse！LightWallet！
  • 事例）proxx.app
    • Chromeエンジニアが開発、廉価な端末でも高速！
      • 3G回線でも快適
    • ワーカースレッドを活用している
  • Portals機能を使ったトランジション、となりのヤングジャンプとはてな
  • PWAの話
    • Trusted Web Activities
    • PWAをAndroidアプリに埋め込む
    • Desktop PWA
      • huluの例
  • WebAuthnの話
    • Yahoo!JAPANの事例
      • もう採用していたっけ？さすがだ
  • ShapeDetectionAPIを組み込む事例
    • FaceDetectorやBarcodeDetector
    • Web Percepton Toolkitとして公開中！
  • web.dev
    • ベストプラクティスを紹介してます！

AMPの話！

  • 4月にAMP Conf Tokyo開催
    • Yahooトラベルの事例
  • WebPackaging：AMP PackagerまたはCloudflareで
  • AMPでカスタムJS載せられるようにするよ！
    • より複雑なUXを提供できるよ
    • トライアル受付中
  • Accelerated Mobile Pages、の略称だったが、”AMP”になるそうです
  • 今後：GoogleSearchとのインテグレーション
  • 今後：AMP for e-Mail
  • YoutubeのAMPチャンネル見てね！

18:35 ～ 19:05　GCP のサーバーレスサービス紹介 グーグル・クラウド・ジャパン合同会社　篠原 一徳 さん

  • 打って変わってバックエンドの話
    • スライドも一気に親近感湧く感じにはｗ
  • Kazuuさん。社員証もKazuuらしい。
  • サーバレスって
    • no infra management
    • managed security
    • pay as you go
  • GCPのサーバレスはフルスタック！！
    • 考えること
      • どこでうごかす？（コンピュート
      • データベース
      • 非同期処理
      • 静的コンテンツ
      • コード管理、ビルド、デプロイ
      • モニタリング・ロギング・APM
    • 今日は上から4つを
      • 下2つも聞きたいなぁ

コンピュート

  • Functions,Apps,Containers
  • 使い分けチャートあるよ！見てね！
  • Functions
    • イベントドリブン
    • ランタイム制約あり
  • AppEngine
    • 対抗はHeroku、Elastic Beanstalk
    • こちらもランタイム制約あり
    • Firestore、CloudMemoryStore、Cloud Tasksを組み合わせてFront/BackのAppEngineを連携させよう
    • デプロイメントオプションあるよ！
      • B/G,Canary,A/B
    • 裏はDockerなのでDocker制約はある（らしい）
  • CloudRun
    • Knativeベース
    • CloudRunとCloudRun on GKE
      • 現状、無印CloudRunは1vCPU,mem2GBという制約あり
    • スマート水道メーターさんの事例をユースケースとして紹介
      • WebAppというかIoT
      • このときはCloudRunがCloudSQLに接続できなかったのでGAE使った（今はできる）
    • コンテナが必須、デプロイの検討が必要なところが考慮ポイント

ストレージ

  • Firestore
  • CloudSQL
  • Spanner
    • 水平スケールできる
      • CAP定理を超える謎の技術
    • 既存DBとの整合性、リージョン間レプリケーションの提供エリアは注意

非同期処理

  • Cloud Tasks
    • Pub/Subとの違い
      • スケジュール実行もできる！
      • レート制御もできる！
      • タスクの再試行ができる！
      • HTTP/S Auth（IAM）ターゲット！

静的コンテンツ

  • CloudStrage、デフォルトで3600Secのキャッシュ利いてるよ！

19:20 ～ 19:50　 リクルートにおけるWebパフォーマンス改善の取り組み 株式会社リクルートテクノロジーズ　新井 智士 さん

  • 本日はリクルートの取り組みとSUUMOの取り組みの紹介
  • 性能改善の取り組み！
  • SUUMOは2009年からあるサービス、多くの機能追加
    • 過去Webパフォーマンス改善はやってきているが・・・
    • 改善がゴールになっている案件・・・
    • 属人化
    • なかなか定着しない！！！
  • これまでのWebパフォーマンスは「秒間どれくらい返せるか」とか
  • 今はコンテンツもリッチ、端末スペックや回線もバラバラ
    • サーバのレスポンス性能だけでは不十分！
    • HttpArchives.orgを見てみよう！
    • 感覚的にも8割9割はフロントエンドがボトルネックになってきてる
  • 多くの人に使ってもらうサービスとして、コントロールすべきもの！！

SUUMOでの取り組み

  • パフォーマンスバジェットと性能改善ハッカソン
  • 改善、維持、予防の順番で

性能改善ハッカソン

  • まずLighthouseで計測
  • 1日で一気にやる
    • ここでもweb.dev
    • web.dev/fast
  • ポイントは
    • とにかくLighthouseの点数を上げる！
    • 範囲を狭める（数ページで）
    • 現場の開発の人も巻き込む
  • 効果として
    • サービスに関する前提知識がほぼ不要なので、業務知識が少ないメンバーも貢献できる！
    • 普段触れないところに触れられる
    • 性能への意識改善（現場を巻き込んだ効果）
  • 代表的な劣化項目
    • 読み込む必要のない画面外項目
    • 表示サイズのアンマッチ（でかい画像なのに表示はサムネイルぐらいとか）
    • 古いCSS
    • などなど
  • 「パフォーマンスバジェットのご紹介」読もう
    • まずはレポーティングに使っている
    • 機能追加するときにその分なにを削る？みたいなツールにもなる
  • パフォーマンス計測ツール

19:50 ～ 20:20　インフラ管理不要の Firebase と GKE で実現するモバイルアプリ開発　株式会社Ginco 西川 達哉 さん

モバイルアプリの技術選定

  • フロント2名、バック2名
  • 開発スケジュールは5ヶ月！！！
  • GKEとFirebaseを選択
  • BCのバックエンドで大事なこと
    • 可用性、バージョンアップのしやすさ、作って壊してをやりやすい
    • そこでGKE
      • Stackdriverでロギングモニタリング自動！
    • 送金用と履歴用のノードを分けると24ノード！
    • それがさらにDev,Staging,Prodと3環境！
  • ブロックエクスプローラ、フロントエンドで大事なこと
    • BCノードは高負荷に耐えられない
    • 可用性、バージョンアップのしやすさ、作って壊してをやりやすい
      • 同じ！
      • BCのAPIによらない柔軟な実装をしたい
    • 最初はGAE+CloudDatastoreでやってた
    • Firestoreを直で（！？）
  • Firestoreの話
    • アクセスキーでアクセスできちゃうので・・・・の話
      • 以下はTwitterより
        • Firestoreの闇
        • FirebaseはValidation書くのがわかりやすくていい
  • その他イベントドリブン
    • 更新されたらPush通知とか
    • クラッシュログをGithubのIssueとSlack通知（！？）
      • Issueすごいことになりそうだけどな・・・
    • 行動履歴とか
    • 強制アップデートとか
      • RemoteConfig
    • Stackdriver
      • GKEとCloudFunctionsは自動
        • いいなぁ
      • Alert設定、Error Reporting

まとめ

  • Firebaseはクライアントエンジニア主体の開発体制にできるのがいい！