ユニバーサルエディターを使用したローカル AEM 開発 local-dev-ue

ユニバーサルエディターが開発目的でローカルの AEM インスタンスでの編集に対応する方法を説明します。

概要 overview

ユニバーサルエディターサービスは、ユニバーサルエディターとバックエンドシステムを結び付けるものです。ユニバーサルエディター用にローカルで開発できるようにするには、ユニバーサルエディターサービスのローカルコピーを実行する必要があります。理由は、次のとおりです。

このドキュメントでは、ユニバーサルエディターを使用して AEM でローカルに開発を行えるよう、ユニバーサルエディターサービスのローカルコピーと共に HTTPS で AEM を実行する方法について説明します。

HTTPS で実行する AEM の設定 aem-https

HTTPS で保護された外側のフレーム内で、保護されていない HTTP フレームを読み込むことはできません。ユニバーサルエディターサービスは HTTPS 上で実行し、AEM または他のリモートページも HTTPS 上で実行する必要があります。

これを行うには、HTTPS で実行する AEM を設定する必要があります。開発目的で、自己署名証明書を使用できます。

使用できる自己署名付き証明書を含め、HTTPS で実行する AEM を設定する方法について詳しくは、このドキュメントを参照してください。

ユニバーサルエディターサービスのインストール install-ue-service

ユニバーサルエディターサービスは、ユニバーサルエディターの完全なコピーではなく、ローカル AEM 環境からの呼び出しがインターネット経由ではなく、制御する定義済みのエンドポイントからルーティングされることを保証する機能のサブセットにすぎません。

ユニバーサルエディターサービスのローカルコピーを実行するには、NodeJS バージョン 16 が必要です。

ユニバーサルエディターサービスは、ソフトウェア配布から使用できます。アクセス方法について詳しくは、ソフトウェア配布のドキュメントを参照してください。

universal-editor-service.cjs ファイルをソフトウェア配布からローカル開発環境に保存します。

HTTPS を使用してユニバーサルエディターサービスを実行するための証明書の作成 ue-https

ユニバーサルエディターサービスでは、開発環境の HTTPS で実行する証明書も必要です。

次のコマンドを実行します。

$ openssl req -newkey rsa:2048 -nodes -keyout key.pem -x509 -days 365 -out certificate.pem

このコマンドにより、key.pem および certificate.pem ファイルが生成されます。これらのファイルを universal-editor-service.cjs ファイルと同じパスに保存します。

ユニバーサルエディターサービスの設定 setting-up-service

ユニバーサルエディターサービスをローカルで実行するには、NodeJS で多数の環境変数を設定する必要があります。

universal-editor-service.cjs、key.pem および certificate.pem ファイルと同じパス上に、次のコンテンツが含まれる .env ファイルを作成します。

EXPRESS_PORT=8000
EXPRESS_PRIVATE_KEY=./key.pem
EXPRESS_CERT=./certificate.pem
NODE_TLS_REJECT_UNAUTHORIZED=0

変数の意味は次のとおりです。

ユニバーサルエディターサービスの実行 running-ue

ユニバーサルエディターサービスを開始するには、次のコマンドを実行します。

$ node ./universal-editor-service.cjs

ターミナルに次の内容が出力されます。

Universal Editor Service listening on port 8000 as HTTPS Server

サービスが HTTP サーバーではなく HTTPS サーバーを開始することを確認します。

（グローバルサービスではなく）ローカルのユニバーサルエディターサービスの使用 using-local-ue

ユニバーサルエディターは、ページが実装されている方法に基づいて、ページの編集に使用するユニバーサルエディターサービスを認識します。この処理は、ユニバーサルエディターで読み込まれたページのメタタグを使用して行われます。

ローカルのユニバーサルエディターサービスを使用してページを編集するには、次のメタタグを設定する必要があります。

<meta name="urn:adobe:aue:config:service" content="https://localhost:8000">

設定が完了すると、コンテンツ更新呼び出しがデフォルトのデフォルトのではなく、https://localhost:8000 に移動するのを確認できます。

ローカルユニバーサルエディターサービスを使用したページの編集 editing

ローカルで実行されるユニバーサルエディターサービスとローカルサービスを使用するために実装されたコンテンツページを使用して、エディターを起動できるようになりました。