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

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

必備條件

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

目標

了解如何:

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

製作發佈部署模式

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

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

高級部署模式

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

  1. 內容作者​使用AEM作者服務來建立、編輯及管理內容。
  2. 內容作者​和其他內部使用者可直接在作者服務上預覽內容。 可設定應用程式的預覽版本,以連線至製作服務。
  3. 內容一經核准後,即可​已發佈​至AEM Publish服務。
  4. 最終 用戶與應用程式的生產版本交互。生產應用程式會連線至發佈服務,並使用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環境。

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

  1. 在您的本機檔案系統上,建立專用資料夾以安裝Publish執行個體,即~/aem-sdk/publish

  2. 複製前幾章中用於製作執行個體的Quickstart jar檔案,並貼到publish目錄中。 或者,導覽至軟體發佈入口網站並下載最新SDK並解壓Quickstart jar檔案。

  3. 將jar檔案更名為aem-publish-p4503.jar

    publish字串指定Quickstart Jar以「發佈」模式啟動。 p4503指定Quickstart伺服器在埠4503上運行。

  4. 開啟新的終端機視窗,並導覽至包含jar檔案的資料夾。 安裝並啟動AEM執行個體:

    $ cd ~/aem-sdk/publish
    $ java -jar aem-publish-p4503.jar
    
  5. 提供管理員密碼作為admin。 任何管理員密碼都是可接受的,但建議將預設密碼用於本機開發,以避免額外的設定。

  6. 當AEM執行個體完成安裝時,會在http://localhost:4503/content.html開啟新的瀏覽器視窗

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

安裝範例內容和GraphQL端點

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

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

    注意

    請務必下載與AEM as aCloud Service相容的標準版本,而​classic版本。

  2. 直接導覽至:http://localhost:4503/libs/granite/core/content/login.html,用戶名admin,密碼admin

  3. 接下來,導覽至封裝管理器,網址為http://localhost:4503/crx/packmgr/index.jsp

  4. 按一下「上傳套件」 ,然後選擇上一步驟中下載的WKND套件。 按一下​Install​以安裝軟體包。

  5. 安裝套件後,WKND參考網站現在可於http://localhost:4503/content/wknd/us/en.html取得。

  6. 按一下功能表列中的「登出」按鈕,登出為admin使用者。

    WKND登出參考網站

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

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

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

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

  1. 在IDE中開啟WKND GraphQL React應用程式。

  2. aem-guides-wknd-graphql/react-app下,添加名為.env.production.local的檔案。

  3. 將以下內容填入.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應用程式的生產組建。

  1. 開啟新的終端機視窗,並導覽至aem-guides-wknd-graphql/react-app目錄

    $ cd aem-guides-wknd-graphql/react-app
    
  2. 使用以下命令安裝serve:

    $ npm install serve --save-dev
    
  3. 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伺服器會啟動並使用生產組建。

  4. 返回到終端,然後輸入命令以啟動靜態伺服器:

    $ npm run serve
    
    ┌────────────────────────────────────────────────────┐
    │                                                    │
    │   Serving!                                         │
    │                                                    │
    │   - Local:            http://localhost:5000        │
    │   - On Your Network:  http://192.168.86.111:5000   │
    │                                                    │
    │   Copied local address to clipboard!               │
    │                                                    │
    └────────────────────────────────────────────────────┘
    
  5. 開啟新瀏覽器並導覽至http://localhost:5000/。 您應會看到React應用程式正在提供。

    已提供React應用程式

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

    不過,首頁上的所有影像都損毀!

  6. 按一下其中一個「冒險詳細資訊」頁面。

    冒險詳細資訊錯誤

    請注意,系統為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。

  1. 停止Node.js伺服器。

  2. 返回IDE,在react-app/src/components/Adventures.js處開啟檔案Adventures.js

  3. _publishUrl屬性新增至allAdventuresQuery內的ImageRef:

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

    _publishUrl_authorUrl 是物件內建的 ImageRef 值,讓包含絕對url更簡單。

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

  5. 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}/>
    
  6. react-app/src/components/AdventureDetail.js開啟檔案AdventureDetail.js

  7. 重複相同步驟以修改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
                    }
                }
            }
        }
        }
    } 
    
  8. 修改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} />
    
  9. 返回終端並啟動靜態伺服器:

    $ npm run serve
    
  10. 導覽至http://localhost:5000/並觀察影像是否出現,以及<img src''>屬性是否指向http://localhost:4503

    影像損壞已修正

模擬內容發佈

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

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

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

  1. 啟動Author例項(如果尚未啟動),並導覽至封裝管理器,網址為http://localhost:4502/crx/packmgr/index.jsp

  2. 下載包EnableReplicationAgent.zip,然後使用包管理器進行安裝。

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

    注意

    在AEM as aCloud Service環境中,製作層級會自動設定為將內容發佈至發佈層級。

  3. 從​AEM開始​功能表,導覽至​工具 > 資產 > 內容片段模型

  4. 按一下​WKND Site​資料夾。

  5. 選擇所有三個模型,然後按一下​Publish:

    發佈內容片段模型

    出現確認對話框,按一下​Publish

  6. 導覽至http://localhost:4502/editor.html/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp的Bali衝浪訓練營內容片段。

  7. 按一下頂端功能表列的​發佈​按鈕。

    在內容片段編輯器中按一下「發佈」按鈕

  8. 「發佈」精靈會顯示應發佈的任何相依資產。 在此情況下,列出了引用的片段​stacey-roswells,並且還引用了多個影像。 參照的資產會與片段一併發佈。

    要發佈的參考資產

    再按一下​Publish​按鈕以發佈內容片段和相依資產。

  9. 返回http://localhost:5000/執行的React應用程式。 您現在可以按一下巴釐島衝浪營,查看冒險活動的詳細資訊。

  10. 切換回http://localhost:4502/editor.html/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp的AEM Author例項,並更新片段的​Title儲存並 關閉片段。然後​publish​片段。

  11. 返回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設定。

  1. 返回使用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地址。

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

    CORS錯誤

    接下來,更新AEM發佈CORS設定,以允許來自網路IP位址的請求。

  3. 導覽至http://localhost:4503/content/wknd/us/en/errors/sign-in.html並使用使用者名稱admin和密碼admin登入。

  4. 導覽至http://localhost:4503/system/console/configMgr,並在com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql處找到WKND GraphQL配置。

  5. 更新​允許的原始項​欄位以包含網路IP地址:

    更新CORS設定

    您也可以包含規則運算式,以允許來自特定子網域的所有請求。 儲存變更。

  6. 搜尋​Apache Sling Referrer Filter​並檢閱設定。 還需要​允許空​配置,才能從外部域啟用GraphQL請求。

    Sling 查閱者篩選

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

    注意

    OSGi設定在提交至原始碼控制的AEM專案中進行管理。 AEM專案可使用Cloud Manager部署至AEM作為Cloud Service環境。 AEM專案原型可協助產生特定實作的專案。

  7. http://192.168.86.XXX:5000開始返回React應用程式,並觀察應用程式不再擲回CORS錯誤。

    已更正CORS錯誤

恭喜!

恭喜! 您現在已使用AEM發佈環境模擬完整的生產部署。 您也學會了如何在AEM中使用CORS設定。

其他資源

如需內容片段和GraphQL的詳細資訊,請參閱下列資源:

本頁內容