1.6.3建立並部署外部DAM應用程式

Last update: Thu Aug 28 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

初學者
開發人員

1.6.3.1下載範例應用程式檔案

移至https://github.com/woutervangeluwe/genstudio-external-dam-app。按一下代碼，然後選取 下載ZIP。

外部DAM

將zip檔案解壓縮至案頭。

外部DAM

1.6.3.2設定Adobe Developer命令列介面

在 genstudio-external-dam-app-main 資料夾上按一下滑鼠右鍵，然後選取 資料夾的新終端機。

外部DAM

您應該會看到此訊息。輸入命令aio login。此命令會重新導向至您的瀏覽器，並預期您會登入。

外部DAM

成功登入後，您應該會在瀏覽器中看到此資訊。

外部DAM

瀏覽器會重新導向回終端機視窗。您應該會看到顯示 登入成功 的訊息，以及瀏覽器傳回的長權杖。

外部DAM

下一步是設定您用於外部DAM應用程式的例項和Adobe IO專案。

為此，您需要從您之前設定的Adobe IO專案下載檔案。

移至https://developer.adobe.com/console/home，並開啟您之前建立的專案（名為--aepUserLdap-- GSPeM EXT）。開啟生產工作區。

外部DAM

按一下 全部下載。如此將下載JSON檔案。

外部DAM

將JSON檔案從您的 Downloads 目錄複製到外部DAM應用程式的根目錄中。

外部DAM

返回您的終端機視窗。輸入命令aio app use XXX-YYY-Production.json。

NOTE

您必須在上述命令中變更檔案名稱，以符合檔案名稱。

命令執行後，您的外部DAM應用程式現在會連線至使用您之前建立的App Builder的Adobe IO專案。

外部DAM

1.6.3.3安裝GenStudio擴充性SDK

接下來，您必須安裝 GenStudio擴充性SDK。您可以在這裡找到有關SDK的更多詳細資料： https://github.com/adobe/genstudio-extensibility-sdk。

若要安裝SDK，請在終端機視窗中執行此命令：

npm install @adobe/genstudio-extensibility-sdk

外部DAM

幾分鐘後，就會安裝SDK。

外部DAM

1.6.3.4在Visual Studio Code中檢閱外部DAM應用程式

開啟Visual Studio Code。按一下 開啟…… 以開啟資料夾。

外部DAM

選取包含您之前下載的應用程式的資料夾 genstudio-external-dam-app-main。按一下 「開啟」。

外部DAM

按一下以開啟檔案 .env。

外部DAM

.env 檔案是由您在上一步中執行的命令aio app use所建立，包含使用App Builder連線至您的Adobe IO專案所需的資訊。

外部DAM

您現在需要將下列詳細資料新增至 .env 檔案，讓外部DAM應用程式可以連線至您之前建立的AWS S3貯體。

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_REGION=
AWS_BUCKET_NAME=

在上一個練習中建立IAM使用者後，欄位 AWS_ACCESS_KEY_ID 和 AWS_SECRET_ACCESS_KEY 可供使用。系統要求您寫下這些值，您現在可以複製這些值。

ETL

欄位 AWS_REGION 可以從AWS S3 Home檢視取得，位於您的儲存貯體名稱旁。在此範例中，區域是 us-west-2。

ETL

欄位 AWS_BUCKET_NAME 應為--aepUserLdap---gspem-dam。

此資訊可讓您更新每個變數的值。

AWS_ACCESS_KEY_ID=XXX
AWS_SECRET_ACCESS_KEY=YYY
AWS_REGION=us-west-2
AWS_BUCKET_NAME=--aepUserLdap---gspem-dam

您現在應該將此文字貼到.env檔案中。別忘了儲存您的變更。

外部DAM

接下來，返回您的終端機視窗。執行此命令：

export $(grep -v '^#' .env | xargs)

外部DAM

最後，您需要變更將顯示在GenStudio for Performance Marketing中的標籤，以便區分外部DAM應用程式與其他整合。若要這麼做，請開啟檔案 Constants.ts，您可以在總管中向下鑽研至 src/genstudiopm > web-src > src，以找到該檔案。

需要將第14行變更為

export const extensionLabel: string = "--aepUserLdap-- - External S3 DAM";

別忘了儲存您的變更。

外部DAM