使用AEM Publish服務進行生產部署

在本教學課程中，您將設定本機環境，以模擬從製作例項發佈到發佈例項的內容。您也會使用GraphQL API從AEM發佈環境中產生React應用程式的生產組建，並設定為使用內容。在過程中，您將學習如何有效使用環境變數，以及如何更新AEM CORS設定。

必備條件

本教學課程是多部分教學課程的一部分。假定已完成前幾部分中概述的步驟。

目標

了解如何：

了解AEM製作和發佈架構。
了解管理環境變數的最佳實務。
了解如何正確設定AEM以進行跨原始資源共用(CORS)。

製作發佈部署模式

完整的AEM環境由製作、發佈和Dispatcher組成。內部使用者可在「作者」服務建立、管理和預覽內容。發佈服務會視為「即時」環境，且通常是使用者與之互動的環境。內容在Author服務上經過編輯和核准後，會分發至Publish服務。

AEM無頭式應用程式最常見的部署模式是讓生產版本的應用程式連線至AEM發佈服務。

高級部署模式

上圖描述了此通用部署模式。

內容作者使用AEM作者服務來建立、編輯及管理內容。
內容作者和其他內部使用者可直接在作者服務上預覽內容。可設定應用程式的預覽版本，以連線至製作服務。
內容一經核准後，即可已發佈至AEM Publish服務。
最終用戶與應用程式的生產版本交互。生產應用程式會連線至發佈服務，並使用GraphQL API來請求和使用內容。

本教學課程會將AEM Publish例項新增至目前的設定，以模擬上述部署。在舊版章節中， React應用程式會直接連線至Author例項，以作為預覽。 React應用程式的生產組建會部署至連接至新發佈執行個體的靜態Node.js伺服器。

最後，將運行三台本地伺服器：

http://localhost:4502 — 製作例項
http://localhost:4503 — 發佈例項
http://localhost:5000 — 在生產模式中連線至發佈執行個體的React App 。

安裝AEM SDK — 發佈模式

目前我們有執行中的SDK例項，位於Author模式。 SDK也可以在Publish模式中啟動，以模擬AEM Publish環境。

若需設定本機開發環境的更詳細指南，請前往。

在您的本機檔案系統上，建立專用資料夾以安裝Publish執行個體，即~/aem-sdk/publish。
複製前幾章中用於製作執行個體的Quickstart jar檔案，並貼到publish目錄中。或者，導覽至軟體發佈入口網站並下載最新SDK並解壓Quickstart jar檔案。
將jar檔案更名為aem-publish-p4503.jar。

publish字串指定Quickstart Jar以「發佈」模式啟動。 p4503指定Quickstart伺服器在埠4503上運行。
開啟新的終端機視窗，並導覽至包含jar檔案的資料夾。安裝並啟動AEM執行個體：
```
$ cd ~/aem-sdk/publish
$ java -jar aem-publish-p4503.jar
```
提供管理員密碼作為admin。任何管理員密碼都是可接受的，但建議將預設密碼用於本機開發，以避免額外的設定。
當AEM執行個體完成安裝時，會在http://localhost:4503/content.html開啟新的瀏覽器視窗

預計會傳回404找不到頁面。這是全新的AEM例項，尚未安裝任何內容。

安裝範例內容和GraphQL端點

就像在製作執行個體上一樣，發佈執行個體需要啟用GraphQL端點，且需要範例內容。接下來，在發佈執行個體上安裝WKND參考網站。

下載WKND站點的最新編譯AEM包：aem-guides-wknd.all-x.x.x.zip。

注意

請務必下載與AEM as aCloud Service相容的標準版本，而不classic版本。
直接導覽至：http://localhost:4503/libs/granite/core/content/login.html，用戶名admin，密碼admin。
接下來，導覽至封裝管理器，網址為http://localhost:4503/crx/packmgr/index.jsp。
按一下「上傳套件」，然後選擇上一步驟中下載的WKND套件。按一下Install以安裝軟體包。
安裝套件後，WKND參考網站現在可於http://localhost:4503/content/wknd/us/en.html取得。
按一下功能表列中的「登出」按鈕，登出為admin使用者。

與AEM Author例項不同，AEM Publish例項預設為匿名唯讀存取。我們希望模擬匿名用戶在運行React應用程式時的體驗。

更新環境變數以指向發佈例項

接下來，更新React應用程式使用的環境變數，以指向Publish例項。 React應用程式應only以生產模式連線至Publish執行個體。

接下來，新增新檔案.env.production.local以模擬生產體驗。

在IDE中開啟WKND GraphQL React應用程式。
在aem-guides-wknd-graphql/react-app下，添加名為.env.production.local的檔案。
將以下內容填入.env.production.local:
```
REACT_APP_HOST_URI=http://localhost:4503
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
```
使用環境變數可讓您輕鬆在製作或發佈環境之間切換GraphQL端點，而無須在應用程式程式碼中新增額外的邏輯。如需React的自訂環境變數的詳細資訊，請參閱此處。

注意

請注意，由於「發佈」環境預設會提供匿名內容存取權，因此未包含驗證資訊。

部署靜態節點伺服器

React應用程式可透過Webpack伺服器啟動，但僅供開發使用。接下來，使用serve模擬生產部署，使用Node.js托管React應用程式的生產組建。

開啟新的終端機視窗，並導覽至aem-guides-wknd-graphql/react-app目錄
```
$ cd aem-guides-wknd-graphql/react-app
```
使用以下命令安裝serve:
```
$ npm install serve --save-dev
```
在react-app/package.json開啟檔案package.json。添加名為serve的指令碼：
```
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
+   "serve": "npm run build && serve -s build"
},
```
serve指令碼執行兩個操作。首先，產生React應用程式的生產組建。接著， Node.js伺服器會啟動並使用生產組建。

返回到終端，然後輸入命令以啟動靜態伺服器：

$ npm run serve

┌────────────────────────────────────────────────────┐
│                                                    │
│   Serving!                                         │
│                                                    │
│   - Local:            http://localhost:5000        │
│   - On Your Network:  http://192.168.86.111:5000   │
│                                                    │
│   Copied local address to clipboard!               │
│                                                    │
└────────────────────────────────────────────────────┘

開啟新瀏覽器並導覽至http://localhost:5000/。您應會看到React應用程式正在提供。

請注意，GraphQL查詢在首頁上運作。 Inspect使用您的開發人員工具，提出XHR要求。請注意，GraphQLPOST位於http://localhost:4503/content/graphql/global/endpoint.json的Publish執行個體。

不過，首頁上的所有影像都損毀！
按一下其中一個「冒險詳細資訊」頁面。

請注意，系統為adventureContributor擲回GraphQL錯誤。在下個練習中，已修正損壞的影像和adventureContributor問題。

絕對影像參照

影像似乎損毀，因為<img src屬性被設定為相對路徑，最後指向http://localhost:5000/處的Node靜態伺服器。這些影像應該會指向AEM Publish例項。有幾種可能的解決方案。使用Webpack開發伺服器時，檔案react-app/src/setupProxy.js會在Webpack伺服器和AEM製作執行個體之間為對/content的任何請求設定代理。代理配置可用於生產環境，但必須在Web伺服器級別進行配置。例如， Apache的代理模組。

可更新應用程式，以包含使用REACT_APP_HOST_URI環境變數的絕對URL。請改為使用AEM GraphQL API的功能，為影像要求絕對URL。

停止Node.js伺服器。
返回IDE，在react-app/src/components/Adventures.js處開啟檔案Adventures.js。

將_publishUrl屬性新增至allAdventuresQuery內的ImageRef:

const allAdventuresQuery = `
{
    adventureList {
    items {
        _path
        adventureTitle
        adventurePrice
        adventureTripLength
        adventurePrimaryImage {
        ... on ImageRef {
            _path
+           _publishUrl
            mimeType
            width
            height
        }
        }
    }
    }
}
`;

_publishUrl 和 _authorUrl 是物件內建的 ImageRef 值，讓包含絕對url更簡單。

重複上述步驟以修改filterQuery(activity)函式中使用的查詢，以包含_publishUrl屬性。

在function AdventureItem(props)修改AdventureItem元件，以在建構<img src=''>標籤時參照_publishUrl而非_path屬性：

- <img className="adventure-item-image" src={props.adventurePrimaryImage._path} alt={props.adventureTitle}/>
+ <img className="adventure-item-image" src={props.adventurePrimaryImage._publishUrl} alt={props.adventureTitle}/>

在react-app/src/components/AdventureDetail.js開啟檔案AdventureDetail.js。

重複相同步驟以修改GraphQL查詢，並為Adventure添加_publishUrl屬性

 adventureByPath (_path: "${_path}") {
    item {
        _path
        adventureTitle
        adventureActivity
        adventureType
        adventurePrice
        adventureTripLength
        adventureGroupSize
        adventureDifficulty
        adventurePrice
        adventurePrimaryImage {
            ... on ImageRef {
            _path
+           _publishUrl
            mimeType
            width
            height
            }
        }
        adventureDescription {
            html
        }
        adventureItinerary {
            html
        }
        adventureContributor {
            fullName
            occupation
            pictureReference {
                ...on ImageRef {
                    _path
+                   _publishUrl
                }
            }
        }
    }
    }
}

修改AdventureDetail.js中「探險主影像」和「貢獻者圖片」參考的兩個<img>標籤：

/* AdventureDetail.js */
...
<img className="adventure-detail-primaryimage"
-       src={adventureData.adventurePrimaryImage._path} 
+       src={adventureData.adventurePrimaryImage._publishUrl} 
        alt={adventureData.adventureTitle}/>
...
pictureReference =  <img className="contributor-image" 
-                        src={props.pictureReference._path}
+                        src={props.pictureReference._publishUrl} 
                         alt={props.fullName} />

返回終端並啟動靜態伺服器：
```
$ npm run serve
```
導覽至http://localhost:5000/並觀察影像是否出現，以及<img src''>屬性是否指向http://localhost:4503。

模擬內容發佈

回想一下，當請求「探險詳細資訊」頁面時，系統為adventureContributor擲回GraphQL錯誤。 貢獻者內容片段模型尚未存在於發佈執行個體上。對冒險內容片段模型所做的更新也不適用於發佈執行個體。這些變更會直接對製作例項進行，且需分發至發佈例項。

對仰賴內容片段或內容片段模型更新的應用程式推出新更新時，請考量這點。

接下來，可模擬本機「製作」和「發佈」例項之間的內容發佈。

啟動Author例項（如果尚未啟動），並導覽至封裝管理器，網址為http://localhost:4502/crx/packmgr/index.jsp
下載包EnableReplicationAgent.zip，然後使用包管理器進行安裝。

此套件會安裝組態，讓製作執行個體可將內容發佈至發佈執行個體。若需此設定的手動步驟，請前往此處。

注意

在AEM as aCloud Service環境中，製作層級會自動設定為將內容發佈至發佈層級。
從AEM開始功能表，導覽至工具 > 資產 > 內容片段模型。
按一下WKND Site資料夾。
選擇所有三個模型，然後按一下Publish:

出現確認對話框，按一下Publish。
導覽至http://localhost:4502/editor.html/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp的Bali衝浪訓練營內容片段。
按一下頂端功能表列的發佈按鈕。
「發佈」精靈會顯示應發佈的任何相依資產。在此情況下，列出了引用的片段stacey-roswells，並且還引用了多個影像。參照的資產會與片段一併發佈。

再按一下Publish按鈕以發佈內容片段和相依資產。
返回http://localhost:5000/執行的React應用程式。您現在可以按一下巴釐島衝浪營，查看冒險活動的詳細資訊。
切換回http://localhost:4502/editor.html/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp的AEM Author例項，並更新片段的Title。 儲存並 關閉片段。然後publish片段。
返回http://localhost:5000/adventure:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp並觀察已發佈的變更。

更新COR配置

AEM預設為安全，不允許非AEM Web屬性進行用戶端呼叫。 AEM跨原始資源共用(CORS)設定可允許特定網域對AEM進行呼叫。

接下來，試用AEM Publish例項的CORS設定。

返回使用npm run serve命令運行React應用的終端窗口：

┌────────────────────────────────────────────────────┐
│                                                    │
│   Serving!                                         │
│                                                    │
│   - Local:            http://localhost:5000        │
│   - On Your Network:  http://192.168.86.205:5000   │
│                                                    │
│   Copied local address to clipboard!               │
│                                                    │
└────────────────────────────────────────────────────┘

請注意，已提供兩個URL。一個使用localhost，另一個使用本地網路IP地址。

導覽至以http://192.168.86.XXX:5000開頭的地址。每個本地電腦的地址將稍有不同。請注意，擷取資料時發生CORS錯誤。這是因為目前的CORS設定僅允許來自localhost的請求。

接下來，更新AEM發佈CORS設定，以允許來自網路IP位址的請求。
導覽至http://localhost:4503/content/wknd/us/en/errors/sign-in.html並使用使用者名稱admin和密碼admin登入。
導覽至http://localhost:4503/system/console/configMgr，並在com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql處找到WKND GraphQL配置。
更新允許的原始項欄位以包含網路IP地址：

您也可以包含規則運算式，以允許來自特定子網域的所有請求。儲存變更。
搜尋Apache Sling Referrer Filter並檢閱設定。還需要允許空配置，才能從外部域啟用GraphQL請求。

這些檔案已配置為WKND參考站點的一部分。您可以透過 GitHub存放庫檢視完整的OSGi設定集。

注意

OSGi設定在提交至原始碼控制的AEM專案中進行管理。 AEM專案可使用Cloud Manager部署至AEM作為Cloud Service環境。 AEM專案原型可協助產生特定實作的專案。
從http://192.168.86.XXX:5000開始返回React應用程式，並觀察應用程式不再擲回CORS錯誤。