在本教學課程中,您將設定本機環境,以模擬從製作例項發佈到發佈例項的內容。 您也會使用GraphQL API從AEM發佈環境中產生React應用程式的生產組建,並設定為使用內容。 在過程中,您將學習如何有效使用環境變數,以及如何更新AEM CORS設定。
本教學課程是多部分教學課程的一部分。 假定已完成前幾部分中概述的步驟。
了解如何:
完整的AEM環境由製作、發佈和Dispatcher組成。 內部使用者可在「作者」服務建立、管理和預覽內容。 發佈服務會視為「即時」環境,且通常是使用者與之互動的環境。 內容在Author服務上經過編輯和核准後,會分發至Publish服務。
AEM無頭式應用程式最常見的部署模式是讓生產版本的應用程式連線至AEM發佈服務。
上圖描述了此通用部署模式。
本教學課程會將AEM Publish例項新增至目前的設定,以模擬上述部署。 在舊版章節中, React應用程式會直接連線至Author例項,以作為預覽。 React應用程式的生產組建會部署至連接至新發佈執行個體的靜態Node.js伺服器。
最後,將運行三台本地伺服器:
目前我們有執行中的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端點,且需要範例內容。 接下來,在發佈執行個體上安裝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並觀察已發佈的變更。
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錯誤。
恭喜! 您現在已使用AEM發佈環境模擬完整的生產部署。 您也學會了如何在AEM中使用CORS設定。
如需內容片段和GraphQL的詳細資訊,請參閱下列資源: