ローカル開発環境を設定

Edge Delivery Services で配信される web サイトを迅速に開発するには、ローカル開発環境が不可欠です。この環境では、ローカルで開発されたコードを使用しながら、Edge Delivery Services からコンテンツを取得するので、開発者はコードの変更を即座に確認できます。このような設定により、高速で反復的な開発とテストがサポートされます。

Edge Delivery Services の web サイトプロジェクトの開発ツールとプロセスは、web 開発者にとって使いやすいように設計されており、高速で効率的な開発エクスペリエンスを実現します。

開発トポロジ

このビデオでは、ユニバーサルエディターで編集できる Edge Delivery Services の web サイトプロジェクトの開発トポロジの概要について説明します。

前提条件

開発を開始する前に、次をマシンにインストールします。

GitHub リポジトリのクローンを作成

ローカル開発環境に AEM Edge Delivery Services のコードプロジェクトを含む、新しいコードプロジェクトの章で作成した GitHub リポジトリのクローンを作成します。

$ cd ~/Code
$ git clone git@github.com:<YOUR_ORG>/aem-wknd-eds-ue.git

プロジェクトのルートとして機能する Code ディレクトリに新しい aem-wknd-eds-ue フォルダーが作成されます。マシン上の任意の場所にプロジェクトのクローンを作成できますが、このチュートリアルではルートディレクトリとして ~/Code を使用します。

プロジェクトの依存関係のインストール

プロジェクトフォルダーに移動し、npm install を使用して必要な依存関係をインストールします。Edge Delivery Services プロジェクトでは、Webpack や Vite などの従来の Node.js ビルドシステムは使用されませんが、ローカル開発には引き続きいくつかの依存関係が必要です。

# ~/Code/aem-wknd-eds-ue

$ npm install

AEM CLI をインストールします。

AEM CLI は、Edge Delivery Services ベースの AEM web サイトの開発を効率化するように設計された Node.js コマンドラインツールであり、web サイトの迅速な開発とテストのローカル開発サーバーを提供します。

AEM CLI をインストールするには、次を実行します。

# ~/Code/aem-wknd-eds-ue

$ npm install @adobe/aem-cli

AEM CLI は、npm install --global @adobe/aem-cli を使用してグローバルにインストールすることもできます。

ローカル AEM 開発サーバーの起動

aem up コマンドを実行すると、ローカル開発サーバーが起動し、サーバーの URL へのブラウザーウィンドウが自動的に開きます。このサーバーは、Edge Delivery Services 環境へのリバースプロキシとして機能し、開発にローカルコードベースを使用しながら、そこからコンテンツを提供します。

$ cd ~/Code/aem-wknd-eds-ue
$ aem up

    ___    ________  ___                          __      __
   /   |  / ____/  |/  /  _____(_)___ ___  __  __/ /___ _/ /_____  _____
  / /| | / __/ / /|_/ /  / ___/ / __ `__ \/ / / / / __ `/ __/ __ \/ ___/
 / ___ |/ /___/ /  / /  (__  ) / / / / / / /_/ / / /_/ / /_/ /_/ / /
/_/  |_/_____/_/  /_/  /____/_/_/ /_/ /_/\__,_/_/\__,_/\__/\____/_/

info: Starting AEM dev server version x.x.x
info: Local AEM dev server up and running: http://localhost:3000/
info: Enabled reverse proxy to https://main--aem-wknd-eds-ue--<YOUR_ORG>.aem.page

AEM CLI により、ブラウザーで web サイト http://localhost:3000/ が開きます。プロジェクトの変更は web ブラウザーに自動的にホットリロードされますが、コンテンツの変更にはプレビュー環境に公開し、web ブラウザーを更新する必要があります。

Web サイトで 404 ページが表示される場合は、新しいコードプロジェクトで更新された fstab.yaml または paths.json が誤って設定されているか、変更が main 分岐にコミットされていない可能性があります。

JSON フラグメントの作成

AEM ボイラープレート XWalk テンプレートを使用して作成された Edge Delivery Services プロジェクトは、ユニバーサルエディターでのブロックオーサリングを有効にする JSON 設定に依存します。

AEM ボイラープレート XWalk プロジェクトテンプレートには、JSON フラグメントへの変更を検出し、git commit 時に適切な component-*.json ファイルにコンパイルする Husky の pre-commit フックが含まれます。

次の NPM スクリプトは、npm run 経由で手動で実行して JSON ファイルを作成できますが、husky の pre-commit フックによって自動的に処理されるので、通常は必要ありません。

# ~/Code/aem-wknd-eds-ue

npm run build:json

リンティング

リンティングにより、変更を main 分岐に結合する前に Edge Delivery Services プロジェクトに必要なコードの品質と一貫性が確保されます。

NPM スクリプトは、npm run 経由で実行できます。次に例を示します。

# ~/Code/aem-wknd-eds-ue

$ npm run lint

リンティングの問題を自動的に修正

次の scripts をプロジェクトの package.json に追加し、npm run 経由で実行して、リンティングの問題を自動的に解決できます。

# ~/Code/aem-wknd-eds-ue

$ npm run lint:fix

これらのスクリプトは、AEM ボイラープレート XWalk テンプレートに事前設定されていませんが、package.json ファイルに追加できます。

{
  ...
  "scripts": [
    ...,
    "lint:js:fix": "npm run lint:js -- --fix",
    "lint:css:fix": "npm run lint:css -- --fix",
    "lint:fix": "npm run lint:js:fix && npm run lint:css:fix",
    ...
  ]
  ...
}