Azure DevOps コードの共有の設定とビルド パイプラインの作成
この記事では、Microsoft Azure DevOps とのコード共有を設定し、Dynamics 365 Commerce オンライン機能拡張コードのビルド パイプラインを作成する方法について説明します。
Azure DevOps の機能を活用して、チームの作業計画、コード開発のコラボレーション、Dynamics 365 Commerce eコマースの展開パッケージの構築を自動化できるようにします。
この記事では、次のタスクを完了するために必要な手順について説明します:
- Commerce オンライン ソフトウェア開発キット (SDK) 用の GitHub リポジトリ (repo) を作成します。
- Commerce オンライン配置可能パッケージを生成するためのビルド パイプラインを作成および構成します。
Azure DevOps GitHub リポジトリを作成する
新しいまたは既存の Azure DevOps サービス サブスクリプションから、Azure DevOps GitHub リポジトリのプロジェクトを作成できます。 詳細については、Azure DevOps サービスを参照してください。 無料試用版の使用を開始するには、Azure DevOps の使用を開始するを参照してください。 Azure DevOps GitHub リポジトリを作成するには、次の手順を実行します。
組織に対して Azure DevOps サービスが設定された後に、新しい Azure DevOps プロジェクトを作成します。
プロジェクトの名前と説明を入力します。 Select プライベートまたはエンタープライズ可視性を選択して、組織および開発者がプロジェクトにアクセスできるようにします。
この例では、Git を使用して SDK コードを複製します。 Git は、自由に利用できるオープン ソース分散型バージョン管理システムです。 https://git-scm.com/downloads に移動して、最新のビルドをダウンロードしインストールします。 既定のインストール値はすべて受け入れることができるはずです。
Visual Studio Code をインストールします。 Visual Studio Code はデスクトップで実行される簡易ソース コード エディターで、Windows、macOS、および Linux で使用できます。 これには、JavaScript、TypeScript、および Node.js の組み込みサポートも含まれます。 https://code.visualstudio.com に移動して、安定したビルドをダウンロードしインストールします。 次にインストーラーを開き、使用許諾契約書に同意します。 既定のインストール値はすべて受け入れることができるはずです。
Commerce オンライン SDK を複製する SDK は、eコマース サイトを拡張するために必要なものをすべて提供します。 たとえば、このツールを使用して、新しいモジュール、データ アクション、およびテーマを作成できます。 SDK コンフィギュレーション パッケージは、次の GitHub リポジトリで利用できます: https://github.com/microsoft/Msdyn365.Commerce.Online。
開発コンピューターに SDK コンフィギュレーション パッケージを取得する方法は 2 種類あります。 パッケージは、GitHub リポジトリから直接ダウンロードするか、リポジトリを複製できます。
リポジトリを複製するには、次の手順に従います:
- コマンド プロンプト ウィンドウを管理者として開き、eコマース サイト コード (たとえば、c:\repos) を保持するディレクトリを作成します。
- 新しいディレクトリから、<YOUR_GIT_REPO> が GitHub リポジトリである、Git 複製 <YOUR_GIT_REPO> を入力します。 ユーザーは GitHub リポジトリから 1 度だけ引き出すので、ルートの下の非表示ディレクトリである .git フォルダーを削除できます。
次に例を示します。
md c:\repos cd c:\repos git clone https://github.com/microsoft/Msdyn365.Commerce.Online.git cd Msdyn365.Commerce.OnlineAzure DevOps GitHub プロジェクト リポジトリを複製します:
左側のナビゲーション ウィンドウのリポジトリで、ファイルを選択します。
コピー ボタンを選択して URL をコピーします。
コマンド プロンプト ウィンドウを管理者として開き、eコマース サイト コード (たとえば、c:\repos) を保持するディレクトリを作成します。
新しいディレクトリから、<AZURE_DEVOPS_GIT_REPO> が Azure DevOps GitHub プロジェクト リポジトリである、Git 複製 <AZURE_DEVOPS_GIT_REPO> を入力します。 Azure DevOps プロジェクトの名前を持つ、新しい空フォルダーが作成されます。
cd c:\repos git clone https://xxxxxx.dev.azure.com/<DevOpsProjectName>/_git/<DevOpsProjectName>
C:\repos\Msdyn365.Commerce.Online to C:\repos\<DevOpsProjectName> の内容をすべてコピーします。 非表示の .git フォルダーをコピーすることはできません。
Visual Studio Code で、c:\repos\<DevOpsProjectName> フォルダーを開きます。 左側のソース管理ボタンを選択すると、Visual Studio Code には確定する必要がある新しい変更が表示されます。
Git へのすべての変更をコミットするには、ソース管理: Git ウィンドウの上部にあるフィールドに説明を入力してから、上にあるチェック マーク記号を選択します。 すべての変更をステージして直接コミットするように求めるメッセージが表示されたら、はいを選択します。
チェック マーク記号の右側の省略記号 (...) を選択してから、表示されるメニューで、プッシュを選択して変更をレポジトリにプッシュします。
Azure DevOps で、新しいファイルが表示されるようになります。
Azure DevOps で新しいビルド パイプラインを作成およびコンフィギュレーションする
Azure DevOps で新しいビルド パイプラインを作成してコンフィギュレーションするには、次の手順に従います。
左ナビゲーション ウィンドウの、パイプラインの下で、パイプラインを選択してから、ページの主要部分でパイプラインの作成を選択します。
クラシック エディターを使用するを選択します。
リポジトリ フィールドで、 Azure DevOps GitHub リポジトリ プロジェクトを選択してから、続行を選択します。
テンプレートの選択で、空のジョブを選択します。
エージェント ジョブの横にある、プラス記号 (+) を選択して新しいエージェント ジョブを追加します。
右側のタスクの追加ウィンドウで、"PowerShell" を検索してから、PowerShell タスクで、追加を選択します。
ページの主要部分で、PowerShell スクリプトを選択します。 次に、右側の PowerShell ウィンドウの、タイプで、インラインを選択します。 次のスクリプトをスクリプト フィールドにコピーします。
yarn yarn msdyn365 pack
右側ウィンドウの、詳細クイック タブの、作業ディレクトリ フィールドに、$(Build.SourcesDirectory) と入力します。
エージェント ジョブの横にあるページの主要部分で、プラス記号 (+) を選択して新しいエージェント ジョブを追加します。
右側のタスクの追加ウィンドウで、 "コピー" を検索してから、ファイルをコピー タスクで、追加を選択します。
ページの主要部分で、ファイルのコピー タスクを選択してから、右側のファイルのコピー ウィンドウで、次の手順に従います:
- ソース フォルダー フィールドで、$(Build.SourcesDirectory) と入力します。
- コンテンツ フィールドに、*.zip と入力します。
- 対象フォルダー フィールドに、$(Build.ArtifactStagingDirectory) と入力します。
エージェント ジョブの横にあるページの主要部分で、プラス記号 (+) を選択して新しいエージェント ジョブを追加します。
右側のタスクの追加ウィンドウで、 "発行" を検索してから、パイプライン アーティファクトを発行タスクで、追加を選択します。
ページの主要部分で、パイプライン アーティファクトを発行タスクを選択します。 次に、パイプライン アーティファクトを発行ウィンドウで、次のステップに従います:
- ファイルまたはディレクトリ パス フィールドに $(Build.ArtifactStagingDirectory) を入力します。
- アーティファクト名 フィールドに、drop と入力します。
ツール バーで、保存 & キューを選択します。
パイプラインの実行ダイアログ ボックスで、エージェントの詳細フィールドが windows-2019 に設定されているのを確認してから、保存して実行を選択します。
JavaScript アプリの構築、テスト、および実行に通常使用するツール (npm、Node、Yarn、Gulp など) は、Azure Pipelines の Microsoft にホストされるエージェントにプリインストールされます。 プリインストールされている Node.js と npm の正確なバージョンについては、Microsoft にホストされるエージェントを参照してください。 これらのツールの特定のバージョンを Microsoft にホストされるエージェントにインストールするには、プロセスの最初に Node ツール インストーラー タスクを追加します。 Yarn および Node.js バージョン 16.x の両方とも windows-2019 エージェントにプリインストールされます。
メモ
オンライン SDK のバージョン 10.0.26 およびそれ以前には、Node バージョン 12.x が必要です。 エージェント上でこれをサポートするには、次の図に示すように、PowerShell のタスクの前にバージョン 12.x を指定する Node ツール インストーラー タスクを追加します。
エージェント ジョブ ログを監視して、ジョブが完了したタイミングを知ることができます。
ジョブが完了したら、左のナビゲーション ウィンドウの、パイプラインで、パイプラインを選択します。 次に、実行タブの、すべてのパイプラインを実行するで、パイプラインの実行を選択して、配置可能パッケージをダウンロードします。
概要の、アーティファクトの下で、1 発行済みを選択します。
ドロップ フォルダーを選択して展開し、パイプラインの実行の一部として作成された zip ファイルを表示します。 ダウンロード ボタンを選択してファイルをダウンロードします。
Node メモリ サイズを増やす
既定のメモリ設定は、ほとんどのカスタマイズ シナリオに十分対応できます。 ただし、アプリケーションにより多くの領域が必要な場合 (たとえば、"JavaScript のメモリ不足" ビルド エラーが表示される場合) は、次の例に示すように、--max_old_space_size=4096 を追加することで、package.json ファイルのスクリプト セクションで環境変数を指定できます。
"build": "SET NODE_OPTIONS=--max_old_space_size=4096 && yarn msdyn365b build --use-eslint",