開発環境の設定

  • [アーティクル]

この記事では、Microsoft Dynamics 365 Commerce の開発環境を設定する方法について説明します。

Dynamics 365 Commerce オンライン機能拡張開発用の開発環境を設定するには、Microsoft Visual Studio Code、Node.js、Yarn という 3 つの無料ツールをインストールする必要があります。 Dynamics 365 Commerce オンライン ソフトウェアの開発キット (SDK) をインストールする必要もあります。 これらのツールは任意の順序でインストールできます。

Visual Studio Code をインストールする

Visual Studio Code などのソース コード エディターを使用することをお勧めします。 Visual Studio Code は、Microsoft Windows デスクトップ上で実行される、簡易ソース コード エディターです。 これには、JavaScript、TypeScript、および Node.js の組み込みサポートがあります。

Visual Studio Code サイトに移動して、最新のビルドをダウンロードしインストールします。 インストールが完了した後、Visual Studio Code が自動的に開き、次のスクリーン ショットのようになります。

Visual Studio Code。

Node.js をインストールする

Node.js は、Chrome の V8 JavaScript エンジンに構築される JavaScript ランタイムです。

バージョン 16.x は、オンライン SDK ブートローダー パッケージ 1.27 以降で現在サポートされているバージョンです。 オンライン SDK ブートローダー パッケージ 1.26 以前を使用している場合は、Node 12.x をインストールする必要があります。 インストーラーは、Node.js Web サイトで検索できます。

その他プロジェクトに対して Node.js の他のバージョンに依存している場合は、各バージョンが独立した環境で実行されるのを保証するために Node バージョン マネージャー (nvm) を使用することをお勧めします。

Yarn をインストールする

Yarn は依存関係管理ツールで、eコマースを拡張するために必要な最新のパッケージをすべて使用できるよう保証します。

現在、サポートされているバージョンはバージョン 1.x のみです。 インストーラーは、Yarn Web サイトで検索できます。 新しいバージョンがサポートされる時点で、このドキュメントが更新されます。

オンライン SDK およびモジュール ライブラリをインストールする

オンライン SDK は、新しいモジュール、データ アクション、およびテーマでオンライン チャンネルを拡張するために必要なものすべてを提供します。

SDK コンフィギュレーション パッケージは、Msdyn365.Commerce.Online GitHub レポジトリ (repo) を通じて利用できます。 開発コンピューター上のローカル フォルダーにリポジトリをダウンロードまたは複製します。 レポジトリを複製するには、次のコマンドを使用します。 (このコマンドは、インストールされた Git ツールがある場合にのみ機能します。)

git clone https://github.com/microsoft/Msdyn365.Commerce.Online.git

メモ

yarn コマンドを実行するまで、SDK およびモジュール ライブラリ全体はダウンロードされインストールされることはありません。 詳細については、この記事の後にある SDK 依存関係のダウンロード セクションを参照してください。

レポジトリを複製した場合は、.git フォルダー (ルートの下の非表示ディレクトリ) を削除することができます。 Yarn は、更新された依存関係をプルダウンするために使用します。

コンフィギュレーションの変更を管理するには、ソース コード リポジトリを使用することをお勧めします。 Git など、多数のオプションを選択できます。

SDK 依存関係をダウンロードする

SDK 依存関係パッケージをダウンロードするには、次の手順に従います。

  1. コマンド プロンプトで、eコマース SDK のルート フォルダー (次の例の c:\repos\Msdyn365.Commerce.Online) に移動します。

  2. 必要な最新の依存関係パッケージをすべて取得するには、yarn コマンドを実行します。

    重要

    この手順は、package.json ファイルに対する任意の更新が完了した後に実行する必要があります。

    c:\repos\Msdyn365.Commerce.Online>yarn

    このコマンドを実行するのに数分間かかる場合があります。

Node アプリを実行する

Node アプリを実行するには、次の手順に従います。

  1. yarn start コマンドを実行して、Node アプリを開きます。

    c:\repos\Msdyn365.Commerce.Online>yarn start

    このコマンドを実行するのに最大 1 分かかる場合があります。 完了すると、サーバーが起動したかどうかを示す出力が表示されます。 出力には、割り当てられたポート番号も表示されます (既定では 4000 ですが、.env ファイルでも値を変更できます)。

  2. Node アプリが正常に実行されていることをテストするには、Web ブラウザで次の URL を開きます:

    • https://localhost:4000/version
    • https://localhost:4000/_sdk/allmodules

  3. Node アプリを閉じるには、コマンド プロンプトで、Ctrl + C キーを 2 回押します。

新しいモジュールの作成

新しいモジュールを追加するには、yarn msdyn365 add-module MODULE_NAME コマンドを実行します。 たとえば、次のコマンドは product-feature という名前のモジュールを作成します。

c:\repos\Msdyn365.Commerce.Online>yarn msdyn365 add-module product-feature

このコマンドを実行するのに数秒かかる場合があります。 \src\modules\product-feature の下に新しいモジュールが追加されます。

既存のモジュール ライブラリ モジュールを複製する

使用可能なモジュール ライブラリ モジュールのいくつかは、複製される可能性があります。 これらのモジュールには、カルーセル、コンテンツ ブロック、ヘッダー モジュールが含まれます。 複製されたモジュールは、モジュールのコピーであり、新しい名前が付いています。 モジュール ライブラリ モジュールとは異なり、複製されたモジュールは定期的なサービス更新を受けられません。 モジュールを複製してレイアウトを変更する代わりに、モジュールのビューを拡張することもできます。

たとえば、コンテンツ ブロック モジュールを変更するには、yarn msdyn365 clone MODULE_LIBRARY_MODULE_NAME NEW_MODULE_NAME コマンドを実行してソース コードをプルダウンします。 次に例を示します。

c:\repos\Msdyn365.Commerce.Online>yarn msdyn365 clone content-block super-content-block

新しいモジュールは、\src\modules\super-content-block の下で検索できます。

メモ

モジュールを複製した後、コード内の参照を修正する必要が生じる場合があります。 yarn start を実行して、修正する必要がある任意のエラーを強調表示できます。

モジュールを確認する

ローカル Web ブラウザーで特定のモジュール (product-feature など) をプレビューするには、次の手順に従います。

  1. コマンド プロンプトで、SDK のルートから yarn start コマンドを実行することで Node アプリを開きます。

    c:\repos\Msdyn365.Commerce.Online>yarn start

  2. Web ブラウザーで、次の URL を開きます。 "type=MODULE_NAME" クエリ文字列パラメーターでのモジュール名に注意してください。

    • https://localhost:4000/modules?type=product-feature
    • https://localhost:4000/modules?type=content-block
    • https://localhost:4000/modules?type=super-content-block

SSL 証明書を追加する

Dynamics 365 オンライン SDK は、localhost に対して機能するローカル環境を開発およびテストするための自己署名 SSL 証明書をインストールします。 これらのファイルは、SDK フォルダーの下にある .ssl フォルダーで検索できます。 注記: これらのファイルを生成するには、yarn start を少なくとも 1 度は実行する必要があります。

開発環境に新しい証明書をインストールするには、パブリック キー (cert.pem) およびプライベート キー (key.pem) ファイルを独自のファイルに置き換えます。

追加リソース

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

Dynamics 365 Commerce オンライン機能拡張の開発環境用のシステム要件

開発環境 (.env) ファイルのコンフィギュレーション

Commerce クラウド環境に対して eコマース開発環境をコンフィギュレーションする

Azure DevOps コードの共有の設定とビルド パイプラインの作成