最初にテキストバージョン、次に音声バージョンを提供します。
GMTC 2021 プレゼンテーション「ByteDance による Serverless を活用したフロントエンド開発モードのアップグレード」
WeChat リンク
2021 年 7 月 7 日、ByteDance Web Infra の王磊によるもの
以下は私のメモです。一部は原文、一部は考察です。原文の部分には注釈があります。
サーバーレスは新しい概念ではありませんし、大手企業にとっては新しいものでもありません。大手企業には独自の BaaS システムがあります。FaaS は比較的簡単ですが、背後のインフラはカスタマイズする必要があります。この考え方で見てみましょう。
概要#
原文：以下の 6 つの側面から今日の内容を紹介します。
- まず、フロントエンドの責任と課題をまとめます。
- 次に、ByteDance の一般的なビジネス形態を紹介します。
- ByteDance の伝統的な開発モデルと課題について説明します。
- 次に、私たちがどのように Serverless を活用してフロントエンドの開発モデルをアップグレードしたかを紹介します。
- 安定性を確保するために、監視と運用にも多くの作業を行いました。
- 最後に、簡単にまとめと展望を行います。
1. 仕事の内容が多い#
最初の部分は予想通りで、仕事の内容が広がりました。デザイナー - フロントエンド - SSR/BFF/ マイクロフロントエンド / クロスプラットフォーム、一体化、サーバーレス。
BFF からマイクロフロントエンドへの進化については理解していません。
知識体系の部分では、伝統的なフレームワークの知識に加えて、ビルドツールやバックエンドも必要です。Redis/mq/ オブジェクトストレージ、モニタリングとアラートなどを補完する必要があります。主にバックエンドと運用の知識を補完する必要があります。
2. ビジネス形態が多様#
2 番目の部分も予想通りで、toC + toB、CSR+SSR+BFF を避けることはできません。マイクロフロントエンドは非常に重要です。グローバル企業として、グローバル展開は避けられませんので、分散データ同期も避けられません。
3. 要件と課題#
3 番目の部分では、Web 開発の問題を例に挙げています。ここで詳しく見てみましょう。
CSR+BFF
- CSR はフロントエンドの基本的なデプロイメントであり、拡張は CDN + k8s クラスタデプロイメントです。
- ビジネスのポイント：オブジェクトストレージの処理、ログイン認証、AB テスト、クラスタの運用
- BFF のデプロイメントは k8s クラスタを避けることはできません
- ビジネスのポイント：権限、運用、トラフィック制御、ドメイン接続（おそらく DNS 一式）
- デプロイメントシステム
- プロジェクト管理、リリースシステム、旅行管理、AB 管理
ここでもあまり新しいものはありませんが、一般的なフロントエンドにとっては非常に大きく、難しいものです。問題はあまりにも大きいため、Serverless が登場しました。
さて、アイデアを出してみましょう。
4. sls ベースのソリューション#
4 番目の部分は、Serverless ベースの開発モデルについてです。
コンセプトの整合性と拡張性#
Serverless の業界の実践：
- すでに FaaS があります。スケジューリング、コールドスタートなど
- BaaS の組み合わせ
- クラウド関数、Node フレームワーク、ランタイムなど
それでは、一つの Serverless ベースのフロントエンドソリューションを作りましょう。ソリューションを作るためには、まず図を描く必要があります：アーキテクチャの階層図 + ライフサイクルのルートマップ。
続けて、プラットフォームの能力を提供するために、一般的な能力を使いやすく、DX フレンドリーにする必要があります（nuxt.js がその一例です）。
では、どのようなプラットフォームの能力がありますか？
テキストの説明は読まなくても大丈夫です。プラットフォーム化を掘り下げましょう。DDDD。まずはアーキテクチャ、次に実装。
この部分は modern.js と似ています。SSR を開始する場合、ワンクリックで完了します。実際は難しいですが、nuxt.js のように、CSR/SSR/SSG モードを選択できるようにし、api ディレクトリを自動マッピングします。デプロイアーティファクトはオンラインの設定を使用し、ルーティングとドメインを割り当てます。
アーキテクチャの階層図が登場します：
ここには多くのテキストがありますが、左側はアーキテクチャの図、右側はライフサイクルとデータフローの説明です。
アーキテクチャの説明が終わったら、CICD について話しました。私は Coding の能力に基づいていますが、コードの提出 - コンパイル - リント - セキュリティチェック - レビューテストの承認 - ライトハウスのパフォーマンスチェック - レビューの承認でオンラインになります。
サービスのパイプライン、設定ファイルとプロセスの相互変換。
そして、実装に移りましょう。
CSR の実装#
まずは通常の CSR です。アーティファクトは自動的に CDN にアップロードされ、es5 と es6 の 2 つのバージョンがあります。なぜ分けるのか、ESM のためですか？デプロイのプロセスでは、プラットフォーム制御図があります。おそらく
- ドメインの割り当て
- オブジェクトストレージのフォルダを選択
- パブリッシュを選択
図を示します。
なるほど、es6 は後で動的な polyfill のためで、ua に基づいて動的に返されます。ちょっとhttps://polyfill.io/ のような感じですね、動的に補完します。やはり大手企業は考えることをすべて使いますね。
SSR の実装#
ルートの割り当て時に、SSR とマイクロフロントエンドモジュールを選択できます。Nuxt の設定モードの変化に対応していると思います。
ユーザーが SSR にアクセスする場合は、まず Redis をチェックし、それでもダメなら対応するサービスをサービスディスカバリ（分散アーキテクチャ）で探します。異常な場合は CSR でフォールバックする必要があります。
BFF の実装#
ああ、わかりました。既存の知識に関連付けます。Nuxt の Nitro API ディレクトリ、先ほどの SSR は SSR です。コンパイル後のアーティファクトには bff ファイルがあり、対応するサービスが表示されます。デプロイされたサービスには BFF サービスがあります。
分けてみましたが、ここまで理解できました。
SSR サービスディスカバリは RPC 呼び出しを使用し、CSR は HTTP 呼び出しを使用します。通常の方法です。
マイクロフロントエンドの実装#
マイクロフロントエンドは、1 つのページに別のシステムのページを組み込むことです。ここでは説明しません。内部の成果物はGarfish マイクロフロントエンドシステムになります。技術的な成果物は micro-app/wujie と同様です。
大手企業の目標は、スムーズな運用ですので、プロジェクトの基盤を準備します。
目標の選択肢は、CSP/SSR/BFF/ マイクロフロントエンドアプリを開発することです。このように開発すれば、同じように提供できます。マイクロフロントエンドには親子モジュールの関係、マイクロフロントエンドメニューなどの機能が追加されます。
親子モジュールの関係を推測すると、ルートコンテナと対応する URL ルートを定義する必要があります。彼にはページがあり、関連付けを申請して統一的に関連付ける必要があります。役割がよくわかりません。
後者のマイクロフロントエンドについては、メニューが設定可能であることを意味します。メニューはエントリーポイントですから、メニューにマッチするページは空です。動的な認証が必要ですので、かつての悪夢を思い出します。
ここまで理解できました。トラフィックが入ってきたら、まずゲートウェイ - コンテナページ - マイクロフロントエンドに移動します。
5. モニタリングと運用#
フロントエンドでこれだけのことをやっているので、負荷と運用を見る必要があります。k8s があるので、簡単になりました。パネルモニタリング、モニタリングアラートソリューション、自動リスタートとロールバック、おそらくプロファイリングもあります。
まずは指標を定義し、ルールエンジンで閾値を設定します。
- 404 アラート
- 5xx アラート
- QPS 超過アラート
- SSR 失敗アラート
アラートがあれば、処理するためにポップアップが表示されます。問題があれば、どのように対処しますか
- 知っている、処理しない
- 30 分間ブロック、6 時間ブロック
- ブロック解除
- これは正しいアラート、間違ったアラート、処理が必要です。トラッキングを報告する
- コンテンツをコピーして助けを求める
指標があれば、ビッグスクリーンを作成できます。私は警戒心が強いです。負荷効果を試してみましょう。
ログはログシステムに接続する必要があります。ログシステムの統合は個別の管理とフィルタリングを行います。つまり、大量のデータの情報探索です。リンクトレースを実現することを目指しています。
問題が発生した場合、現場を保護してデバッグする方法は？ここで少し盲点がありますが、おそらくリモートソースマップ、フレームグラフ分析、彼らはカスタムの alinode のようなものを持っていることを認めています、ノードランタイムデバッグ。
スナップショット / CPU プロファイルの分析は少し黒魔術です、わかりません、尊重します。
6. 総括と展望#
将来の Serverless の発展：
- ランタイムはコールドスタート、ダイナミックなスケーリングをより良く処理する必要があります
- より良い BaaS プラットフォームの構築
- Serverless+、つまり一つのサービス
彼らのインフラチーム
- APM プラットフォーム
- テストインフラ
- ローコード
- クロスプラットフォームソリューション
- Web 開発エンジン
- エンジニアリングプラットフォーム
- モバイルミドルウェア
- Serverless
- Node.js アーキテクチャ
- Web IDE
- マイクロフロントエンドソリューション
- デザインオプス
読了後の感想#
大手企業はさすがですね、非常に率直で真実です。深く掘り下げています。
自慢することもますます上手になりましたし、彼らが何を話しているのか予想できるようになりました。嬉しいです！