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

本機開發設定

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

undefined
undefined

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

先決條件

依照本教學課程操作，須具備下列條件：

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

本機設定

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

AEM SDK

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

WKND Teams — 內容套件：包含內容片段模型、內容片段和持續的GraphQL查詢。
WKND Teams — 設定封裝：包含跨原始資源共用(CORS)和權杖驗證處理常式設定。 CORS有助於非AEM Web屬性對AEM的GraphQL API發出瀏覽器式使用者端呼叫，而Token Authentication Handler則用於向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應用程式。它會顯示專案團隊成員及其詳細資訊的清單。本機AEM SDK會使用GraphQL API (/graphql/execute.json/my-project/all-teams)提供React應用程式的內容，您可以使用瀏覽器的網路標籤進行驗證。

Universal Editor服務

若要設定 local Universal Editor服務，請遵循下列步驟：

從軟體發佈入口網站下載最新版的Universal Editor服務。

解壓縮下載的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 EXPRESS_PORT=8000 # Disable SSL verification NODE_TLS_REJECT_UNAUTHORIZED=0`

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

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

上述命令會啟動連線埠8000上的Universal Editor服務，您應該會看到下列輸出：

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 Universal Editor需要透過HTTPS提供React應用程式。讓我們設定使用自我簽署憑證進行本機開發的本機SSL HTTP Proxy。

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

全域安裝local-ssl-proxy套件。

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

為下列服務啟動本機SSL HTTP Proxy的兩個執行個體：

連線埠8443上的AEM SDK本機SSL HTTP Proxy。
通訊埠8001上的Universal Editor服務本機SSL HTTP Proxy。

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檔案以在start指令碼中包含HTTPS=true環境變數。

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

更新.env.development檔案中的REACT_APP_HOST_URI，以使用AEM SDK的HTTPS通訊協定和本機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應用程式。

code language-bash
`$ npm start`

驗證設定

使用上述步驟設定本機開發環境後，讓我們驗證設定。

本機驗證

請確定下列服務是透過HTTPS在本機執行，您可能需要接受瀏覽器中自我簽署憑證的安全性警告：

https://localhost:3000上的WKND Teams React應用程式
https://localhost:8443上的AEM SDK
https://localhost:8001上的通用編輯器服務

在通用編輯器中載入WKND Teams React應用程式

讓我們在通用編輯器中載入WKND Teams React應用程式以驗證設定：

在瀏覽器中開啟通用編輯器https://experience.adobe.com/#/aem/editor 。如果出現提示，請使用您的Adobe ID登入。
在通用編輯器的網站URL輸入欄位中輸入WKND Teams React應用程式URL，然後按一下Open。
WKND Teams React應用程式會在Universal Editor 中載入，但您尚無法編輯內容。您需要檢測React應用程式，以使用通用編輯器來啟用內容編輯。

下一步

瞭解如何檢測React應用程式以編輯內容。

recommendation-more-help

4859a77c-7971-4ac9-8f5c-4260823c6f69