ビルド前および稼働開始のベストプラクティスチェックリスト

コンポーザブルストアフロントの旅の始まりへようこそ。このチェックリストは、プロジェクトのタイムラインに大きな影響を与える可能性のある重要なポイントをまとめたものです。これら 4 つのベストプラクティスに焦点を当てることで、Progressive Web App (PWA) Kit サイトの構築、立ち上げ、監視に伴う複雑さを軽減し、一般的な落とし穴を回避するための準備が整います。このチェックリストを使用して計画を立てることで、スムーズなデプロイを実現してください。

特に明記されていない限り、このチェックリストのポイントはすべて、コンポーザブルストアフロントで 100% 構築されているサイト、または段階的なヘッドレスロールアウトのいずれかのサイトに適用されます。

カスタマイズに関しては、お客様がコントロールできる立場にあります。ビジネスニーズを満たすために必要なカスタマイズの範囲を理解します。ただし、以下の例で説明するように、高度にカスタマイズされたサイトにはより多くの労力が必要であることを覚えておいてください。

  • Retail React App で利用できるデザインと機能をよく理解します。Retail React App で利用できない機能を構築する必要があります。
  • 既存の React コンポーネントを可能な限り使用します。PWA Kit は React を使用しているため、ユーザーはコンポーネントの React エコシステムにアクセスできます。カスタム作業を行う場合は、その作業のための Chakra コンポーネントがあるかどうかを確認してください。Chakra コンポーネントがない場合は、オープンソースバージョンを探してください。オープンソースバージョンがない場合は、コンポーネントを自分でビルドします。
  • 当社の API が、必要なカスタム機能をサポートしており、必要なデータを返すことを確認します。当社の API が対応していない場合は、次のことができます。
    • データを返すカスタム API を作成する。または、
    • フックを使用して API レスポンスを拡張する。
  • サイトのカートリッジとインテグレーションがヘッドレス実装で動作することを確認します。PWA Kit サイトでそれらを使用するには、カスタム API またはフックを使用して機能を公開できます。

次の手順に従って、安定したスケーラブルなサイトのための強固な基盤を築きます。

  • 本番の Managed Runtime (MRT) 環境の数を決定します。より多くの環境をもつことで、より多くの制御が可能になります。しかし、環境が増えれば増えるほど、すべての環境を管理するのは運用上複雑になります。たとえば、5 つのブランドがすべて同じ MRT 環境からサービスを受けている場合、常にそれらを一緒に更新する必要があります。環境が少ないということは、運用上のオーバーヘッドが少ないということです。Managed Runtime の概要を参照してください。
  • 埋め込みコンテンツ配信ネットワーク (eCDN) とサードパーティの CDN のどちらを使用するかを決定します。サードパーティー CDN を使用する場合を参照してください。サードパーティの CDN を使用する場合は、ベンダーのドキュメントで詳細を確認してください。
  • URL 戦略を決定します。ほとんどの顧客は、既存の URL を保持することを選択します。現在使用している URL が新しいサイトに存在しなくなる場合は、その URL をリダイレクトする計画を立てます。Google Search Console ツールやその他のランキングツールに登録して、ロールアウトが SEO ランキングに与える影響をモニタリングします。ルーティングを参照してください。
  • ハイブリッド (段階的なヘッドレス) ロールアウトの目標、範囲、タイムラインを決定します。サイトがハイブリッドモードである時間が長くなるほど、関連する操作の複雑さに費やす時間が長くなることに注意してください。100% コンポーザブルサイトへの移行期限を設定します。段階的なヘッドレスロールアウトを参照してください。

以下の手法を適用して、サイトの効率とユーザーエクスペリエンスを最適化します。

  • URL に ?__server_only パラメーターを追加して、エントリページ (ホームページ、カテゴリ一覧ページ、商品一覧ページ、および商品詳細ページ) のサーバー側レンダリングを確認します。サーバーでレンダリングされたページにクローラーのための十分なデータがあること、およびサーバーとクライアント間のレイアウトのずれが小さいこと (理想的には存在しないこと) を確認します。これにより、SEO ランキングが向上し、モバイルデバイスでエントリページがすばやく読み込まれることを確認し、買い物客の体験を向上させることができます。
  • Lighthouse CI を使用してパフォーマンステストを設定します。パフォーマンステストは、実装の途中で開始します。これにより、PWA Kit サイトを立ち上げるずっと前に、(現在のサイトと比較して) パフォーマンスの低下を特定して修正できます。
  • 非本番 MRT 環境への継続的なコードのデプロイを設定します。開発作業の早い段階から、MRT にデプロイされたコードのテストを開始して、サイトの機能が期待どおりに動作することを確認します。こうすることで、後でコストのかかるやり直しを回避できます。オートメーションユーザーを参照してください。

以下のツールのいずれかを使用して、サイトのパフォーマンスを一貫して監視することを計画してください。また、これらのツールによって生成されたデータが、予想される結果に基づいて正しいことを確認します。

  • Log Center では、エラーとメトリクスを確認できます。通知を設定すると、ストアフロントが正常に機能していないことを把握し、調査することができます。
  • アクティブデータを使用して、サイトのメトリクスをモニタリングします。これにより、買い物客の行動を分析できるため、買い物客の体験を向上させ、商品提供を最適化して売上を伸ばすことができます。
  • B2C Commerce の Reports & Dashboards は、経時的なトレンドを特定し、B2C Commerce データに基づいてビジネスに関する意思決定をスマートに行うために使用できるデータを提供します。

コンポーザブルストアフロントでサイトを構築するために推奨されるデベロッパーのワークフローの残りの手順を確認します。コンポーザブルストアフロントの使用開始を参照してください。