文件 AEM AEM 教學課程 AEM as a Cloud Service 教學課程

本機開發設定

Last update: Wed Sep 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

適用對象：
Experience Manager as a Cloud Service

建立對象：

中繼
開發人員

了解如何設定本機開發環境，以便使用 AEM 通用編輯器來編輯 React 應用程式的內容。

先決條件

若要依照本教學課程內容進行，以下為必要條件：

基本的 HTML 和 JavaScript 技能。
必須在本機安裝以下工具：
- Node.js
- Git
- IDE 或程式碼編輯器，例如 Visual Studio Code
下載並安裝以下項目：
- AEM as a Cloud Service SDK：包含在本機執行 AEM Author 和 Publish 以進行開發所使用的 Quickstart Jar。
- 通用編輯器服務：通用編輯器服務的本機副本，具有部分功能，並可以從軟體分發入口網站下載。
- local-ssl-proxy：一個使用自我簽署憑證來進行本機開發的簡單本機 SSL HTTP Proxy。AEM 通用編輯器需要 React 應用程式的 HTTPS URL 才能將其載入編輯器中。

本機設定

請按照下列步驟設定本機開發環境：

AEM SDK

若要為 WKND Teams React 應用程式提供內容，請在本機 AEM SDK 中安裝下列封裝。

WKND Teams - 內容套件：包含內容片段模型、內容片段和存留的 GraphQL 查詢。
WKND Teams - 設定封裝：包含跨來源資源共用 (CORS) 和權杖驗證處理常式設定。CORS 讓非 AEM 網頁屬性可以進行瀏覽器型用戶端呼叫以存取 AEM 的 GraphQL API，而權杖驗證處理常式則用於驗證每個發送到 AEM 的請求。

React 應用程式

要設定 WKND Teams React 應用程式，請按照以下步驟操作：

原地複製 basic-tutorial 解決方案分支中的 WKND Teams React 應用程式。

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

導覽至 basic-tutorial 目錄並在程式碼編輯器中開啟目錄。

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

安裝相依性並啟動 React 應用程式。

code language-bash
`$ npm install $ npm start`

在瀏覽器中連結至 http://localhost:3000，開啟 WKND Teams React 應用程式。接著會顯示團隊成員清單及其詳細資訊。React 應用程式的內容由本機 AEM SDK 使用 GraphQL API (/graphql/execute.json/my-project/all-teams) 提供，而您可以使用瀏覽器的網路標籤驗證這件事。

通用編輯器服務

若要設定本機通用編輯器服務，請按照下列步驟操作：

從軟體分發入口網站下載最新版本的通用編輯器服務。

將所下載的 zip 檔案解壓縮並複製 universal-editor-service.cjs 檔案到名為 universal-editor-service 的新目錄。

code language-bash
`$ unzip universal-editor-service-vproduction-<version>.zip $ mkdir universal-editor-service $ cp universal-editor-service.cjs universal-editor-service`

在 universal-editor-service 目錄中建立 .env 檔案，並新增下列環境變數：

code language-bash
`# The port on which the Universal Editor service runs UES_PORT=8000 # Disable SSL verification UES_TLS_REJECT_UNAUTHORIZED=false`

啟動本機通用編輯器服務。

code language-bash
`$ cd universal-editor-service $ node universal-editor-service.cjs`

上述命令在 8000 連接埠上啟動通用編輯器服務，而您應該會看到以下輸出：

Either no private key or certificate was set. Starting as HTTP server
Universal Editor Service listening on port 8000 as HTTP Server

本機 SSL HTTP Proxy

AEM 通用編輯器必須安裝 React 應用程式才能透過 HTTPS 提供服務。我們設定一個使用自我簽署憑證的本機 SSL HTTP Proxy 進行本機開發。

請按照下列步驟設定本機 SSL HTTP Proxy 並透過 HTTPS 提供 AEM SDK 和通用編輯器服務：

全域安裝 local-ssl-proxy 封裝。

code language-bash
`$ npm install -g local-ssl-proxy`

啟動兩個本機 SSL HTTP Proxy 實例來執行下列服務：

為 AEM SDK 啟動的本機 SSL HTTP Proxy，使用連接埠 8443。
為通用編輯器服務啟動的本機 SSL HTTP Proxy，使用連接埠 8001。

code language-bash
`# 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`

更新 React 應用程式以便使用 HTTPS

若要讓 WKND Teams React 應用程式使用 HTTPS，請按照下列步驟操作：

在終端機中按下 Ctrl + C 來停止 React。

更新 package.json 檔案，將 HTTPS=true 環境變數包含在 start 指令碼中。

code language-json
`"scripts": { "start": "HTTPS=true react-scripts start", ... }`

更新 .env.development 檔案中的 REACT_APP_HOST_URI，以便使用 HTTPS 通訊協定以及 AEM SDK 的本機 SSL HTTP Proxy 連接埠。

code language-bash
`REACT_APP_HOST_URI=https://localhost:8443 ...`

更新 ../src/proxy/setupProxy.auth.basic.js 檔案以便使用搭配 secure: false 選項的寬鬆 SSL 設定。

code language-javascript

code language-javascript
... 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}` }) ); };

...
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 應用程式。