ローカル開発設定

basic-tutorial ソリューションブランチから WKND Teams React アプリを複製します。

$ git clone -b solution/basic-tutorial git@github.com:adobe/aem-guides-wknd-graphql.git

basic-tutorial ディレクトリに移動し、コードエディターで開きます。

$ cd aem-guides-wknd-graphql/basic-tutorial
$ code .

依存関係をインストールし、React アプリを起動します。

$ npm install
$ npm start

ブラウザーで WKND チームの React アプリ（http://localhost:3000）を開きます。 チームメンバーとその詳細のリストが表示されます。 React アプリのコンテンツは、GraphQL API （/graphql/execute.json/my-project/all-teams）を使用してローカル AEM SDK によって提供されます。これは、ブラウザーの「ネットワーク」タブを使用して確認できます。

ソフトウェア配布ポータルから最新バージョンのユニバーサルエディターサービスをダウンロードします。

ダウンロードした zip ファイルを解凍し、universal-editor-service.cjs ファイルを universal-editor-service という名前の新しいディレクトリにコピーします。

$ unzip universal-editor-service-vproduction-<version>.zip
$ mkdir universal-editor-service
$ cp universal-editor-service.cjs universal-editor-service

universal-editor-service ディレクトリ .env ファイルを作成し、次の環境変数を追加します。

# The port on which the Universal Editor service runs
EXPRESS_PORT=8000
# Disable SSL verification
NODE_TLS_REJECT_UNAUTHORIZED=0

ローカルのユニバーサルエディターサービスを開始します。

$ cd universal-editor-service
$ node universal-editor-service.cjs

local-ssl-proxy パッケージをグローバルにインストールします。

$ npm install -g local-ssl-proxy

次のサービス用のローカル SSL HTTP プロキシの 2 つのインスタンスを開始します。

• ポート 8443 のAEM SDK ローカル SSL HTTP プロキシ。
• ポート 8001 のユニバーサル エディターサービス ローカル SSL HTTP プロキシ。

# AEM SDK local SSL HTTP proxy on port 8443
$ local-ssl-proxy --source 8443 --target 4502

# Universal Editor service local SSL HTTP proxy on port 8001
$ local-ssl-proxy --source 8001 --target 8000

ターミナルで Ctrl + C を押して、React を停止します。

package.json ファイルを更新して、start スクリプトに HTTPS=true 環境変数を含めます。

"scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
}

AEM SDK の HTTPS プロトコルとローカル SSL HTTP プロキシポートを使用するように、.env.development ファイルの REACT_APP_HOST_URI を更新します。

REACT_APP_HOST_URI=https://localhost:8443
...

secure: false のオプションを使用して、リラックスした SSL 設定を使用するように ../src/proxy/setupProxy.auth.basic.js ファイルを更新します。

...
module.exports = function(app) {
app.use(
    ['/content', '/graphql'],
    createProxyMiddleware({
    target: REACT_APP_HOST_URI,
    changeOrigin: true,
    secure: false, // Ignore SSL certificate errors
    // pass in credentials when developing against an Author environment
    auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`
    })
);
};

React アプリを起動します。

$ npm start

ブラウザーでユニバーサルエディターhttps://experience.adobe.com/#/aem/editorを開きます。 プロンプトが表示されたら、Adobe IDを使用してログインします。

ユニバーサルエディターのサイト URL 入力フィールドに、WKND Teams React アプリの URL を入力して、「Open」をクリックします。

WKND チームの React アプリがユニバーサルエディターに読み込まれます ただし、まだコンテンツを編集することはできません。 ユニバーサルエディターを使用してコンテンツ編集を有効にするには、React アプリを実装する必要があります。