AEM as a Cloud Service에서 AEM Edge 기능 설정

마지막 업데이트: 2026년 6월 25일

적용 대상:
Experience Manager as a Cloud Service

주제:
Developing

작성 대상:

Intermediate
Admin
Developer

IMPORTANT

AEM Edge 함수는 현재 베타 버전입니다. 기능 및 설명서는 변경될 수 있습니다. 피드백을 받으려면 aemcs-edgecompute-feedback@adobe.com에 문의하십시오.

AEM as a Cloud Service 환경에서 AEM Edge 기능을 설정하는 방법에 대해 알아봅니다.

이 튜토리얼에서는 CLI 설치, AEM 사이트 배포, Boilerplate 템플릿의 프로젝트 설정, CDN 구성 및 AEM as a Cloud Service에서의 작업 엔드포인트 배포에 대해 설명합니다.

이 자습서에서는 WKND Sites 프로젝트를 데모 사이트로 사용합니다. 고유한 사이트 및 환경에서 동일한 단계를 따를 수 있습니다.

빌드할 항목

AEM Edge 함수는 AEM 원본이 아닌 에지의 Adobe CDN에서 실행되는 JavaScript 모듈입니다. 두 개의 경로를 사용하여 이름이 my-edge-function인 AEM Edge 함수 하나를 배포합니다.

/hello-world이(가) 가장자리에서 인사말을 반환합니다
/weather이(가) 가장자리에서 방문자의 위치를 감지하고 Open-Meteo API를 호출한 다음 도시의 현재 온도를 반환합니다.

개발 중에 개발 서버를 사용하여 로컬에서 AEM Edge 기능을 테스트합니다. 그런 다음 CDN 구성을 AEM 사이트 프로젝트에 복사하고, Cloud Manager 또는 RDE를 통해 배포하고, AEM Edge 함수(JavaScript 모듈)를 Adobe CDN에 푸시하고, 브라우저에서 또는 curl을(를) 사용하여 두 끝점을 확인합니다.

상위 수준 단계:

Adobe CLI 및 AEM Edge 기능 플러그인 설치
RDE 또는 개발 환경에 AEM 사이트 배포
AEM as a Cloud Service 환경에서 AEM Edge 기능 설정
표준 템플릿에서 AEM Edge Functions 프로젝트 만들기
로컬에서 AEM Edge 기능 프로젝트 복제, 검토 및 실행
CDN 구성 검토, 관리 및 배포
AEM Edge 함수를 빌드하고 Adobe CDN에 배포합니다.
끝점이 작동하는지 확인

사전 요구 사항

시작하기 전에 다음 사항이 준비되었는지 확인하십시오.

Node.js 및 npm이 로컬에 설치됨
표준 템플릿에서 프로젝트를 만들 수 있는 GitHub 계정
작성자 인스턴스의 Cloud Manager 배포 관리자 역할 또는 AEM 관리자 제품 프로필이 있는 AEM as a Cloud Service 환경에 액세스합니다
로컬로 복제된 WKND Sites 프로젝트 또는 고유한 AEM 사이트 프로젝트

NOTE

AEM as a Cloud Service의 경우 환경당 하나의 AEM Edge 함수를 배포할 수 있습니다.

1단계: CLI 및 플러그인 설치

Adobe aio CLI, AEM Edge 함수 및 RDE 플러그인을 설치하거나 업데이트합니다.

새로 설치

새로 설치하려면 다음 명령을 실행합니다.

code language-bash

code language-bash
`# Install the Adobe CLI $ npm install -g @adobe/aio-cli # Install the AEM Edge Functions plugin $ aio plugins install @adobe/aio-cli-plugin-aem-edge-functions # Install the RDE plugin if you are using an RDE environment $ aio plugins install @adobe/aio-cli-plugin-aem-rde`

# Install the Adobe CLI
$ npm install -g @adobe/aio-cli

# Install the AEM Edge Functions plugin
$ aio plugins install @adobe/aio-cli-plugin-aem-edge-functions

# Install the RDE plugin if you are using an RDE environment
$ aio plugins install @adobe/aio-cli-plugin-aem-rde

기존 업데이트

Adobe CLI 및 설치된 플러그인 업데이트:

code language-bash
`# Update the Adobe CLI $ aio update # List installed plugins (confirm the AEM Edge Functions plugin is listed) $ aio plugins # Update the installed plugins $ aio plugins update`

예를 들어 출력은 다음 스크린샷과 같아야 합니다.

CLI 버전 출력

2단계: AEM 사이트 배포

AEM Edge 기능을 설정하기 전에 AEM 사이트를 타겟 환경에 배포합니다. 사이트가 이미 배포된 경우 액세스할 수 있는지 확인하고 3단계로 건너뜁니다.

RDE

WKND 또는 자체 사이트 프로젝트의 루트에서 다음 명령을 실행하여 사이트를 설정하고 RDE에 배포합니다.

code language-bash

code language-bash
`# Set up the RDE $ aio aem:rde:setup # Build the site $ mvn clean install $ aio aem:rde:install all/target/aem-guides-wknd.all-X.Y.Z-SNAPSHOT.zip $ aio aem:rde:install dispatcher/target/aem-guides-wknd.dispatcher.cloud-X.Y.Z-SNAPSHOT.zip # Verify the RDE and site are deployed $ aio aem:rde:status`

# Set up the RDE
$ aio aem:rde:setup

# Build the site
$ mvn clean install
$ aio aem:rde:install all/target/aem-guides-wknd.all-X.Y.Z-SNAPSHOT.zip
$ aio aem:rde:install dispatcher/target/aem-guides-wknd.dispatcher.cloud-X.Y.Z-SNAPSHOT.zip

# Verify the RDE and site are deployed
$ aio aem:rde:status

https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/에서 사이트에 액세스할 수 있는지 확인하십시오.

자세한 설명은 빠른 개발 환경을 참조하십시오.

개발 환경

Cloud Manager의 전체 스택 파이프라인을 사용하여 WKND 또는 자체 사이트를 개발 환경에 배포합니다.
https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/에서 사이트에 액세스할 수 있는지 확인하십시오.

자세한 설명은 전체 스택 파이프라인을 참조하십시오.

3단계: 환경에서 AEM Edge 기능 설정

AEM Edge 함수는 AEM as a Cloud Service 환경에서 설정되어야 합니다. 코드 및 구성 파일을 Adobe CDN에 배포할 수 있으므로 사이트의 JavaScript 코드에서 AEM Edge 함수에서 지원하는 경로를 호출할 수 있습니다.

WKND(또는 고유한) AEM 프로젝트의 루트에서 다음 명령을 실행합니다.

$ aio aem edge-functions setup

Adobe IMS에 아직 로그인하지 않은 경우 명령이 로그인 흐름을 트리거합니다. 프로그램, 환경, 사이트 유형 및 ADC 프로젝트 구성 세부 정보를 묻는 메시지가 표시됩니다. 설치 세부 정보는 .aio 파일에 저장되며, 이후 AEM Edge Functions CLI 명령에 대한 컨텍스트를 제공합니다.

AEM Edge 함수 설정 프롬프트

IMPORTANT

CDN(AEM Content Delivery Network) API 카드를 포함하는 API 자격 증명에 대한 Adobe Developer Console(ADC) 프로젝트 구성은 이 자습서의 일부로 수행되지 않습니다. 그러나 CI/CD 시스템에서 AEM Edge 기능 프로젝트를 배포하려는 경우에는 이 작업을 수행해야 합니다. 자세한 내용은 Adobe Developer Console 통합 및 CI/CD 설치를 참조하십시오.

다음 명령을 사용하여 AEM Edge 기능 설정 세부 사항을 검토합니다.

$ aio aem edge-functions info

출력은 다음과 같아야 합니다.

AEM Edge 함수 정보 출력

4단계: AEM Edge 기능 프로젝트 만들기

aem-edge-functions-boilerplate GitHub 템플릿에서 AEM Edge 기능 프로젝트를 만듭니다. 보일러판에는 시작하는 데 필요한 파일 및 구성이 포함됩니다.

GitHub의 aem-edge-functions-boilerplate(으)로 이동합니다.
오른쪽 상단 모서리에서 이 템플릿 사용 > 새 저장소 만들기를 선택합니다.
리포지토리 이름(예: wknd-edge-functions)을 제공하고 설명을 추가하고 가시성을 개인(으)로 설정한 다음 리포지토리 만들기를 선택하십시오.

5단계: AEM Edge 기능 프로젝트 복제, 검토 및 실행

AEM Edge 기능 프로젝트 복제

4단계에서 만든 저장소를 복제한 다음 IDE의 WKND(또는 자체) 프로젝트와 함께 엽니다. 대부분의 편집자는 두 프로젝트에서 동시에 작업할 수 있는 작업 공간 또는 다중 루트 보기를 지원합니다.

# Clone the repository
$ git clone https://github.com/<your-org>/<your-project-name>.git

예를 들어, 단일 IDE 작업 공간에서 WKND Sites 프로젝트 및 WKND AEM Edge Functions 프로젝트를 엽니다.

WKND 및 WKND AEM Edge 모두 IDE에서 작업 영역으로 프로젝트 작동

AEM Edge 기능 프로젝트 검토

AEM Edge 기능 프로젝트를 변경하거나 배포하기 전에 AEM Edge 기능 계약을 정의하는 주요 파일을 검토하십시오.

package.json에 프로젝트 종속성이 포함되어 있습니다. @fastly/js-compute 종속성을 확인합니다. 자세한 내용은 계산 플랫폼의 JavaScript를 참조하십시오.

src/index.js은(는) 함수 진입점이며 프로젝트의 기본 논리를 포함합니다. Fastly Compute의 addEventListener("fetch", ...) 패턴을 사용합니다. 들어오는 모든 요청은 경로 일치 논리를 추가하는 handleRequest 함수를 통해 흐릅니다. 예를 들어 다음 코드는 상용구에서 가져온 코드입니다.

code language-js

code language-js
// src/index.js addEventListener("fetch", (event) => event.respondWith(handleRequest(event))); async function handleRequest(event) { const req = event.request; const url = new URL(req.url); let finalResponse; try { // Route matching logic if (url.pathname === "/" && req.method === "GET") { finalResponse = new Response("Hello World from the edge!", { status: 200 }); } else if (url.pathname === "/hello-world" && req.method === "GET") { finalResponse = new Response("Hello World from the edge!", { status: 200 }); } else if (url.pathname === "/weather" && req.method === "GET") { finalResponse = await weatherHandler(req, event.client); } else { finalResponse = response.notFound(); } } catch (err) { finalResponse = new Response("Internal Server Error", { status: 500 }); } return finalResponse; }

// src/index.js
addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));

async function handleRequest(event) {
    const req = event.request;
    const url = new URL(req.url);

    let finalResponse;

    try {
        // Route matching logic
        if (url.pathname === "/" && req.method === "GET") {
            finalResponse = new Response("Hello World from the edge!", { status: 200 });
        } else if (url.pathname === "/hello-world" && req.method === "GET") {
            finalResponse = new Response("Hello World from the edge!", { status: 200 });
        } else if (url.pathname === "/weather" && req.method === "GET") {
            finalResponse = await weatherHandler(req, event.client);
        } else {
            finalResponse = response.notFound();
        }
    } catch (err) {
        finalResponse = new Response("Internal Server Error", { status: 500 });
    }

    return finalResponse;
}

단일 AEM Edge 함수는 handleRequest의 if 문을 통해 여러 경로를 처리할 수 있습니다.

fastly.toml이(가) 로컬 개발 서버를 구성합니다. 자세한 내용은 Fastly.toml 참조를 참조하십시오.
config/에 AEM Edge 기능 서비스 및 CDN 라우팅 규칙에 대한 구성 파일이 포함되어 있습니다. Cloud Manager 구성 파이프라인을 사용하여 이러한 파일을 AEM as a Cloud Service 환경에 배포합니다. 6단계에서는 이 프로세스를 다룹니다.

전체 설정을 이해하려면 test/, src/lib/ 및 README.md 등의 나머지 프로젝트 파일을 검토하십시오.

로컬에서 AEM Edge 기능 프로젝트 실행

빠르게 반복하기 위해 AEM Edge 기능 프로젝트를 로컬에서 실행할 수 있습니다. AEM Edge Functions 프로젝트 디렉토리에서 종속성을 설치하고 로컬 개발 서버를 시작합니다.

# Navigate to the project directory (replace with your project name)
$ cd wknd-edge-functions

# Install dependencies
$ npm install

# Start the local development server
$ aio aem edge-functions serve

서버가 http://127.0.0.1:7676에 시작됩니다.

예를 들어 출력은 다음 스크린샷과 같아야 합니다.

로컬 개발 서버 출력

6단계: CDN 구성 검토 및 배포

AEM Edge Functions 프로젝트에 config/ 디렉터리에 CDN 구성 파일이 포함되어 있습니다. AEM 사이트 프로젝트에 복사하기 전에 검토하십시오.

CDN 구성 검토

AEM Edge Functions 프로젝트의 config/ 디렉터리에서 CDN 구성 파일을 검토하십시오.

config/edgeFunctions.yaml은(는) AEM Edge 기능 서비스를 선언합니다. 예를 들어 다음 코드는 WKND AEM Edge 함수 프로젝트의 코드입니다.

kind: "EdgeFunctions"
version: "1"
data:
  functions:
    - name: my-edge-function

지원되는 속성에 대한 자세한 내용은 edgeFunctions.yaml 참조를 참조하십시오.

config/cdn.yaml은(는) 트래픽을 AEM Edge Function 서비스로 전달하는 CDN 라우팅 규칙을 선언합니다. 예를 들어 다음 코드는 WKND AEM Edge 함수 프로젝트의 코드입니다.

kind: 'CDN'
version: '1'
data:
  originSelectors:
    rules:
      - name: route-weather-to-edge-function
        when: { reqProperty: path, equals: "/weather" }
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function
          skipCache: true
      - name: route-hello-world-to-edge-function
        when: { reqProperty: path, equals: "/hello-world" }
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function
          skipCache: true

주요 콜아웃:

originName은(는) edgefunction-<edge-function-name> 패턴을 따라야 합니다. 여기서 <edge-function-name>은(는) edgeFunctions.yaml에서 선언된 AEM Edge 함수의 이름입니다.
type은(는) selectAemOrigin이어야 합니다.
skipCache이(가) 요청에 대한 CDN 캐시를 무시하도록 true(으)로 설정되었습니다.

자세한 내용은 원본 선택기를 참조하세요. cdn.yaml 파일은 트래픽 필터 규칙, 요청 및 응답 변환 및 기타 CDN 기능도 지원합니다. 자세한 내용은 CDN에서 트래픽 구성을 참조하십시오.

CDN 구성 관리

사이트에 AEM 규칙, 트래픽 필터 및 기타 설정이 이미 cdn.yaml에 포함되어 있을 수 있으므로 모든 CDN 구성을 WAF 사이트 프로젝트의 config/ 디렉터리에 유지합니다. 이렇게 하면 모든 CDN 구성이 한 곳에 유지됩니다.

AEM Edge 기능 프로젝트의 edgeFunctions.yaml을(를) AEM 사이트 프로젝트의 config/ 디렉터리에 복사합니다.
AEM Edge 기능 프로젝트 cdn.yaml의 originSelectors 섹션을 AEM 사이트 프로젝트의 cdn.yaml에 병합합니다.

예를 들어 WKND 사이트 프로젝트의 CDN 구성 파일은 다음과 같습니다.

WKND 프로젝트의 CDN 구성 파일

CDN 구성 배포

마지막으로 CDN 구성을 AEM as a Cloud Service 환경에 배포합니다.

RDE

RDE 환경의 경우 WKND(또는 고유한) AEM 프로젝트의 루트에서 다음 명령을 실행합니다.

code language-bash
`# Navigate to the AEM project directory (replace with your project name) $ cd aem-guides-wknd # Deploy the CDN configuration $ aio aem:rde:install -t env-config ./config`

개발 환경

개발 환경의 경우, 구성 파일을 커밋하고 Cloud Manager에서 구성 파이프라인을 실행합니다.

구성 파일을 커밋하고 Cloud Manager Git 저장소에 푸시합니다.
Cloud Manager의 파이프라인(으)로 이동하여 환경에 대한 구성 파이프라인을 실행합니다.

Cloud Manager 구성 파이프라인 실행

구성이 배포되었는지 확인합니다.

$ aio aem edge-functions list

출력에는 my-edge-function(또는 edgeFunctions.yaml에서 선언한 모든 이름)이 나열되어야 합니다.

AEM Edge 함수 목록 출력

7단계: AEM Edge 기능 프로젝트 빌드 및 배포

다음 명령을 사용하여 AEM Edge 기능 프로젝트를 빌드하고 배포합니다. 이 명령은 .aio 파일에 저장된 컨텍스트를 사용합니다.

# Navigate to the AEM Edge Functions project directory (replace with your project name)
$ cd wknd-edge-functions

# Review to make sure you are deploying to the correct AEM as a Cloud Service environment
$ aio aem edge-functions info

# Build the project
$ aio aem edge-functions build

# Deploy to Adobe CDN
$ aio aem edge-functions deploy my-edge-function

deploy에 전달된 이름은 config/edgeFunctions.yaml에서 선언된 name과(와) 일치해야 합니다. 또한 작성자 인스턴스의 AEM 관리자 - 작성자 제품 프로필에 속해 있어야 합니다.

예를 들어 출력은 다음 스크린샷과 같아야 합니다.

AEM Edge 함수 빌드 및 배포

IMPORTANT

CI/CD 시스템에서 AEM Edge 기능 프로젝트를 배포하려면 AEM CDN(Content Delivery Network) API 카드를 포함하는 API 자격 증명에 대한 Adobe Developer Console(ADC) 프로젝트가 필요합니다. 자세한 내용은 Adobe Developer Console 통합 및 CI/CD 설치를 참조하십시오.

8단계: 엔드포인트 확인

브라우저에서 또는 curl을 사용하여 배포된 끝점을 확인합니다.

curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/hello-world
curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/weather

pXXXXX 및 eYYYYY을(를) Cloud Manager 프로그램 및 환경 ID로 바꾸십시오.

예를 들어 응답은 다음 스크린샷과 같습니다.

실시간 끝점 응답

NOTE

edgefunction-pXXXXX-eYYYYY-<edge-function-name>.adobeaemcloud.com 도메인은 디버깅에만 사용할 수 있으며 안정적이지 않습니다. 프로덕션에서 요청은 cdn.yaml의 CDN 라우팅 규칙을 통해 사이트의 도메인을 통해 AEM Edge 기능에 도달합니다.

실제 시나리오에서는 CDN에서 서버측 논리에 AEM Edge 함수를 사용하고 cdn.yaml에 정의된 라우트된 경로를 통해 사이트에서 호출합니다. 고급 구성에 대해서는 AEM Edge 기능 제품 설명서를 참조하세요.

요약

AEM as a Cloud Service 환경에서 AEM Edge Functions를 설정하고, 표준 템플릿에서 프로젝트를 만들고, 복제하고, 프로젝트 파일을 검토하고, 로컬에서 실행하고, CDN 구성을 검토 및 배포하고, 프로젝트를 빌드 및 배포하고, 끝점을 확인했습니다.

추가 리소스

recommendation-more-help

experience-manager-learn-help-cloud-service