eコマースオンライン拡張機能の開発を開始する

[アーティクル]
03/08/2023

この記事では、Microsoft Dynamics 365 Commerce オンラインソフトウェア開発キット (SDK) を使用して、eコマースのカスタマイズ開発を開始するのに役立つ概要を示します。

オンライン SDK を使用して、eコマースモジュール、データアクション、およびテーマを開発およびデバッグできます。 Windows 10 のどの環境にもインストールして使用でき、展開済の Commerce 環境は必要ではありません。ただし、ライブクラウド環境 ("Dev"、"Test"、"UAT"、"Prod" など) に接続すると役立つ場合もあります。これにより、環境を展開したり不安定にしたりせずに、クラウド環境に対するより深いデバッグや変更のテストを実行できます。

Commerce プラットフォームを拡張する場合の一般的なプロセスには、次のアクションが含まれます:

必要な開発ツールをインストールします。
最新のオンライン SDK をインストールします。
オプション: コード共有およびビルド管理用の Azure DevOps ビルドパイプラインを設定します。
必要に応じて、モジュール、データアクション、およびテーマをビルドおよび拡張します。
モックデータを使用して、モジュール、データアクション、テーマをテストします。
オプション: クラウド環境に対する変更をテストします。
変更すべての Commerce コンフィギュレーションパッケージをビルドします。
コンフィギュレーションパッケージをクラウド環境に展開します。

アーキテクチャの概要

Commerce 機能拡張の開発を開始する前に、Commerce アーキテクチャについて学んでおくことことをお勧めします。 Dynamics 365 Commerce アーキテクチャの概要およびeコマースアーキテクチャの概要などは、手始めに学べる記事です。また、eコマースコンポーネントの記事では、モジュール、データアクション、テーマなど、主要な拡張可能な eコマースコンポーネントの概要を説明しています。

ローカルオンライン SDK 開発環境を設定する

開発システム要件

開発環境を設定する前に、環境が Dynamics 365 Commerce オンライン拡張機能環境のシステム要件で指定されている最小要件を満たしていることを確認してください。

開発ツールおよびオンライン SDK をインストールする

Commerce 開発では、JavaScript ランタイム用の Node.js、依存関係の管理用 Yarn、ソース編集用 Visual Studio Code など、いくつかの無料のオープンソースツールを使用しています。これらの各ツールのインストール方法の詳細については、開発環境の設定を参照してください。この記事では、開発中のモジュールをテストおよびプレビューするノードアプリを実行する方法について説明し、モジュールの作成と複製に使用されるコマンドラインインターフェイス (CLI) ツールについても説明します。

クラウドホスト Commerce 環境に対して開発する

オンライン SDK を使用すると、展開済みの Commerce 環境を使用せずに、モジュール、データアクション、およびテーマを開発およびデバッグできます。 eコマースの Web サイトをデバッグしたり、"Dev"、"Test"、"UAT"、"Prod" 環境などのライブクラウド環境に対して構成変更をテストしたりする必要がある可能性があります。このセクションでは、クラウドホスト Commerce 環境に対して、開発環境を構成する方法について説明します。

SDK 環境 .env ファイルを構成する

オンライン SDK には、ルートフォルダーの .env ファイルが含まれています。このファイルには、クラウド環境に対して開発環境を構成するために使用できるいくつかの環境変数があります。各環境変数の詳細については、開発 (.env) ファイルの構成を参照してください。

クラウド環境に対して構成する

.env ファイルがクラウド環境を指すよう設定する方法の詳細については、レベル 1の Commerce 開発環境に対するデバッグを参照してください。この記事では、.env ファイルにある各変数に対して正しい URL を設定するのに役立つガイダンスについても説明します。

設定できる主なシナリオは 2 種類あります。 1 つ目は、.env ファイルをクラウド Retail Server に向ける場合、2 つ目はクラウド eコマースサイトに向ける場合です。

クラウドホスト Retail Server に対して構成する

クラウドホスト Retail Server を指すよう開発環境を構成することで、ライブデータに対してモジュールとデータアクションをデバッグできます。サーバーが構成された後、すべてのデータアクション呼び出しから直接サーバーに行き、実際のデータが環境開発に渡されます。この設定により、モジュールの表示方法を簡単に確認できます。それ以外の場合は、モジュールを表示するためにモックデータを使用する必要があります。詳細については、モックデータを使用してモジュールをテストするおよびモックを使用してデータアクションをテストするを参照してください。

.env ファイルには、クラウドベース Retail Server の URL をポイントする必要がある MsDyn365Commerce_BASEURL 変数が含まれます。また、特定のチャネルおよびチャネルの作業単位番号 (OUN) をポイントする必要があります。

次の例では、特定の Retail Server、チャネル、および OUN をポイントする .env ファイルを示します。

...
MSDyn365Commerce_BASEURL=https://e-comdevtestf1d01de665c744a7devret.cloud.retail.dynamics.com/
MSDyn365Commerce_CHANNELID=68719478279
MSDyn365Commerce_CATALOGID=0
MSDyn365Commerce_OUN=128
...

メモ

Commerce は複数のカタログをサポートしないため、カタログ ID 変数、MSDyn365Commerce_CATALOGID は常に 0 (ゼロ) に設定する必要があります。

クラウドホスト eコマースサイトに対して構成する

クラウドホスト eコマースサイト指すよう開発環境を設定することもできます。この方法で、Commerce サイトビルダーで作成された eコマースページは、ローカル Node.js JavaScript サーバーの下のローカル環境で表示できます。この設定は、モジュール、データアクション、およびテーマへの変更をライブサイトに影響を与えることなくライブページに対してテストできるので便利です。たとえば、任意の eコマースページに対してローカルで行ったモジュールビュー変更を、ライブの eコマースサイトやその顧客ビューに影響を与えずにテストできます。

Commerce サイトページは、Commerce コンテンツ管理システム (CMS) に JavaScript Object Notation (JSON) ファイルとして格納され、モックファイルとして保存および使用されす。 JSON ファイルには、モジュールの内訳とそのコンフィギュレーション値が含まれます。これらのコンフィギュレーション値はページを表示するのに使用されます。このシナリオでは、ローカル開発環境ではローカルモジュールを表示します。そのため、変更をすばやくテストおよび反復処理できます。

ページモックをモジュールのテストに使用する方法の詳細については、ページモックを使用したテストモジュールを参照してください。この記事では、?item=nodeserviceproxy:true クエリ文字列パラメータを使用して、ライブページからモックページを作成する方法について説明します。

JSON ファイルの次の例では、MSDyn365_HOST 変数が Commerce 環境を指すよう設定する方法について示します。

MSDyn365_HOST=www.fabrikam.com
MSDyn365Commerce_BASEURL=https://e-comdevtestf1d01de665c744a7devret.cloud.retail.dynamics.com/
MSDyn365Commerce_CHANNELID=68719478279
MSDyn365Commerce_CATALOGID=0
MSDyn365Commerce_OUN=128
...

MSDyn365_HOST 変数が Commerce 環境を指すよう設定する方法の詳細については、レベル 1 の Commerce 開発環境に対するデバッグを参照してください。

モジュール、データアクション、およびテーマを変更する

Commerce 開発環境を設定した後、カスタムモジュール, データアクションおよびテーマをビルドする準備が整いました。

パッケージの作成と展開

すべての変更が完了したら、zip ファイルパッケージをビルドし、Microsoft Dynamics Lifecycle Services (LCS) にアップロードできます。その後、パッケージが展開されたクラウドホスト環境での変更をすべて確認できます。詳細情報と手順については、パッケージコンフィギュレーションとオンライン環境への配置を参照してください。