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

다운로드 디렉터리에서 외부 DAM 앱의 루트 디렉터리로 JSON 파일을 복사합니다.

외부 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 코드에서 외부 DAM 앱을 검토합니다.

Visual Studio 코드를 엽니다. 폴더를 열려면 열기… 를 클릭하세요.

외부 DAM

이전에 다운로드한 앱이 포함된 genstudio-external-dam-app-main 폴더를 선택하십시오. 열기를 클릭합니다.

외부 DAM

.env 파일을 열려면 클릭하세요.

외부 DAM

.env 파일은 이전 단계에서 실행한 aio app use 명령에 의해 만들어졌으며 App Builder을 사용하여 Adobe IO 프로젝트에 연결하는 데 필요한 정보가 포함되어 있습니다.

외부 DAM

이제 외부 DAM 앱이 이전에 만든 AWS S3 버킷에 연결할 수 있도록 .env 파일에 다음 세부 정보를 추가해야 합니다.

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_REGION=
AWS_BUCKET_NAME=

이전 연습에서 IAM 사용자를 만든 후 필드 AWS_ACCESS_KEY_ID 및 AWS_SECRET_ACCESS_KEY 을(를) 사용할 수 있습니다. 이를 기록하라는 메시지가 표시되면 이제 값을 복사할 수 있습니다.

ETL

버킷 이름 옆의 AWS S3 홈 보기에서 AWS_REGION 필드를 가져올 수 있습니다. 이 예제에서 지역은 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

마지막으로, 외부 DAM 앱을 다른 통합과 구분할 수 있도록 GenStudio for Performance Marketing 내에 표시되는 레이블을 변경해야 합니다. 이렇게 하려면 탐색기에서 src/genstudiopem > web-src > src(으)로 드릴다운하여 찾을 수 있는 Constants.ts 파일을 엽니다.

14호선을 다음으로 변경해야 합니다.

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

변경 사항을 저장하는 것을 잊지 마십시오.

외부 DAM