설명서CommerceAdobe Commerce as a Cloud Service

자습서 사전 요구 사항

Last update: Fri Mar 06 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • 중간
  • 개발자

이 페이지에는 Adobe Commerce as a Cloud Service등급 확장 튜토리얼​ 및 ​배송 방법 확장 튜토리얼과 같은 ​ 튜토리얼의 필수 구성 요소와 설정 단계가 나열됩니다.

일반 사전 요구 사항

이 자습서에서는 확장 및 상점 개발 모두에 다음 도구가 필요합니다.

  • Node.js​(버전 22.x.x) 및 npm(9.0.0 이상): 다음 명령을 사용하여 설치를 확인하십시오.

    code language-bash 
    node --version
npm --version

  • Git 설치 - 설치 확인:

    code language-bash 
    git --version

  • 배시껍질

  • Cursor​(권장)와 같은 AI 지원 IDE를 다운로드합니다. Claude Code, Gemini CLI 또는 Copilot과 같은 다른 IDE도 지원되지만, 자습서에서 프롬프트 및 기타 단계를 수정해야 할 수 있습니다.

Adobe Commerce as a Cloud Service개 필수 구성 요소

  • Adobe I/O CLI 설치

    code language-bash 
    npm install -g @adobe/aio-cli

  • Adobe I/O CLI Commerce, Adobe I/O CLI 런타임 및 App Builder CLI 플러그인을 설치하십시오.

    code language-bash 
    aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce @adobe/aio-cli-plugin-app-dev @adobe/aio-cli-plugin-runtime

Adobe Developer Console 사전 요구 사항

필요한 API 및 자격 증명을 사용하여 Adobe Developer Console에서 프로젝트를 설정합니다.

  1. Adobe Developer Console(으)로 이동합니다.
  2. 이메일 및 암호를 사용하여 로그인합니다.

새 프로젝트 만들기

Adobe Developer Console에서 App Builder 프로젝트를 만들어 확장을 호스팅합니다.

  1. Adobe Developer Console​(으)로 이동합니다.

  2. Create project from a template​을(를) 클릭합니다.

  3. App Builder 템플릿을 선택하십시오.

  4. Project Title 및 App Name​을(를) 입력하십시오.

  5. Include Runtime 확인란이 표시되어 있는지 확인하십시오.

    App Builder 템플릿을 사용하여 Adobe Developer Console 프로젝트 만들기 {width="600" modal="regular"}

  6. Save​을(를) 클릭합니다.

작업 공간에 API 추가

이벤트 관리 및 Commerce 통합을 위해 필요한 API를 단계 작업 영역에 추가합니다.

  1. Stage 작업 영역을 클릭한 다음 각 API에 대해 다음 단계를 반복합니다.

    API에 대한 서비스 추가 옵션을 사용하여 작업 영역 준비 {width="600" modal="regular"}

  2. Add Service​을(를) 클릭하고 API​을(를) 선택합니다.

  3. 다음 API 중 하나를 선택합니다. 아래 나열된 각 API에 대해 이 프로세스를 반복합니다.

    • Adobe Services 필터:

      • I/O Management API
      • I/O Events API

    • Experience Cloud 필터:

      • Adobe I/O Events for Adobe Commerce API

  4. Next​을(를) 클릭합니다.

  5. Save configured API​을(를) 클릭합니다.

  6. 모든 API를 작업 공간에 추가할 때까지 이전 단계를 반복합니다.

    모든 필수 API를 표시하는 Workspace이 추가되었습니다 {width="600" modal="regular"}

Adobe I/O CLI 구성

Adobe I/O CLI을(를) 조직, 프로젝트 및 작업 영역에 연결합니다.

  1. 기존 구성을 지웁니다.

    code language-bash 
    aio config clear

  2. Adobe I/O CLI을(를) 사용하여 로그인:

    code language-bash 
    aio auth login -f

  3. 다음 각 명령을 사용하여 조직, 프로젝트 및 작업 영역을 선택합니다.

    code language-bash 
    aio console org select
    code language-bash 
    aio console project select
    code language-bash 
    aio console workspace select

    터미널(Adobe I/O CLI 조직 프로젝트 및 작업 영역 선택 표시 {width="600" modal="regular"})

시작 키트 복제

빌드하고 있는 확장에 대해 다음 Commerce 스타터 키트 저장소 중 하나를 복제하고 프로젝트를 준비합니다.

통합 시작 키트:

git clone https://github.com/adobe/commerce-integration-starter-kit.git extension
cd extension

체크아웃 스타터 키트:

git clone https://github.com/adobe/commerce-checkout-starter-kit.git extension
cd extension
통합 시작 키트

.env 파일 만들기

환경 구성 파일 만들기:

code language-bash 
cp env.dist .env

텍스트 편집기에서 .env 파일을 열고 다음 OAuth 자격 증명을 추가합니다.

code language-bash 
OAUTH_CLIENT_ID=
OAUTH_CLIENT_SECRET=
OAUTH_TECHNICAL_ACCOUNT_ID=
OAUTH_TECHNICAL_ACCOUNT_EMAIL=
OAUTH_ORG_ID=

작업 영역에서 Credential details 탭을 클릭하여 Developer Console의 OAuth Server-to-Server 페이지에서 이 값을 복사합니다.

Adobe Developer Console의 OAuth 서버 간 자격 증명 페이지 {width="600" modal="regular"}

Commerce 구성 추가

.env 파일에 다음 Commerce 인스턴스 세부 정보를 추가합니다.

code language-bash 
COMMERCE_BASE_URL=
COMMERCE_GRAPHQL_ENDPOINT=

다음 값을 찾으려면:

  1. Commerce Cloud 서비스 인스턴스​(으)로 이동합니다.
  2. 인스턴스 옆에 있는 정보 아이콘을 클릭합니다.
  3. REST 끝점을 COMMERCE_BASE_URL(으)로 복사합니다.
  4. GraphQL 끝점을 COMMERCE_GRAPHQL_ENDPOINT(으)로 복사합니다.

이벤트 접두사 설정

이벤트 접두사에 대한 임시 값을 설정합니다.

code language-bash 
EVENT_PREFIX=test

작업 공간 구성 다운로드

다음 명령을 실행하여 작업 영역 구성 파일을 다운로드합니다.

code language-bash 
aio console workspace download workspace.json

작업 영역 구성 파일을 scripts 디렉터리에 복사합니다.

code language-bash 
cp workspace.json scripts/

로컬 작업 영역을 원격 작업 영역에 연결

로컬 프로젝트를 원격 작업 영역에 연결합니다.

code language-bash 
aio app use workspace.json -m

터미널에서 aio 앱 사용 명령을 사용하여 작업 영역 연결에 성공했음을 보여 줍니다 {width="600" modal="regular"}

체크아웃 시작 키트

로컬 작업 영역을 원격 작업 영역에 연결

로컬 프로젝트를 원격 작업 영역에 연결합니다. 프로젝트 루트(extension 폴더)에서 다음을 실행합니다.

code language-bash 
aio app use --merge

메시지가 표시되면 Adobe I/O CLI를 구성할 때 선택한 조직, 프로젝트 및 작업 영역을 사용하는 옵션을 선택합니다. 이렇게 하면 앱에 작업 영역 구성이 기록되므로 배포 및 로컬 개발에서 해당 작업 영역을 사용할 수 있습니다.

터미널에서 aio 앱 사용 명령을 사용하여 작업 영역 연결에 성공했음을 보여 줍니다 {width="600" modal="regular"}

확장성 AI 도구 설치

이 프로세스는 MCP 구성(.<agent>/mcp.json), 스킬 디렉터리(.<agent>/skills/)를 만들고 프로젝트 루트에 AGENTS.md을(를) 추가합니다. 스타터 키트, 코딩 에이전트 및 패키지 관리자를 선택하라는 메시지가 표시됩니다.

  1. 다음 명령을 사용하여 extension 폴더에서 AI 지원 개발 도구를 설정합니다.

    code language-bash 
    cd extension
    code language-bash 
    aio commerce extensibility tools-setup

    AI 확장성 도구 설정 명령 출력을 표시하는 터미널 {width="600" modal="regular"}

  2. 설치가 완료되면 코딩 에이전트를 다시 시작하여 새 MCP 도구 및 기술을 로드할 수 있습니다. 이제 사용자 환경에서 Commerce App Builder 도구를 사용할 수 있습니다.

    note note
    NOTE
    Starter Kit에 대한 스킬이 없다는 경고가 표시되면 문제가 발생했습니다. Starter Kit가 복제된 위치가 아닌 폴더에서 설정이 실행되었기 때문일 수 있습니다. aio commerce extensibility tools-setup 폴더(시작 키트 프로젝트 루트)에서 extension을(를) 실행하고 메시지가 표시되면 적절한 시작 키트를 선택합니다.

    AI 확장성 도구를 표시하는 터미널(체크아웃 시작 키트를 선택함) {width="600" modal="regular"}

Storefront 사전 요구 사항

다음 항목은 등급 확장 자습서의 storefront 섹션을 완료하고 스토어에서 제품 등급을 표시하는 데 필요합니다.

Storefront 리포지토리 복제

터미널을 열고 저장소를 복제합니다.

git clone --branch agentic-dev https://github.com/hlxsites/aem-boilerplate-commerce.git storefront
cd storefront

종속성 설치

프로젝트 종속성 설치:

npm install

Storefront AI 도구 설치

storefront 폴더에서 AI 지원 개발 도구를 설정합니다. 보일러플레이트 프로젝트의 루트에서 다음 명령을 실행합니다.

aio commerce extensibility tools-setup

이 명령은 다음 두 가지 프롬프트를 안내합니다.

  1. 시작 키트 선택 — AEM Boilerplate Commerce 선택.

  2. 코딩 에이전트 선택 - 지원되는 에이전트 목록에서 에이전트를 선택합니다.

이 명령은 @adobe-commerce/commerce-extensibility-tools 패키지를 개발 종속성으로 설치하고 기술 파일을 에이전트의 기술 디렉터리에 복사하고 에이전트가 Commerce 설명서 검색 도구에 액세스할 수 있도록 MCP(Model Context Protocol)를 구성합니다.

recommendation-more-help
f4a2a3a3-1652-412d-938a-a9989e3335c7