Edge Delivery Services에서 AEM Edge 기능 설정

Cloud Manager에 로그인하고 Edge Delivery Services 추가 기능을 사용하여 프로그램을 엽니다. 프로그램 개요에서 Edge Delivery 탭이 표시되는지 확인합니다.

Edge Delivery 탭에서 Edge Delivery 할 일 목록​을 완료합니다. 주요 단계:

1. Edge Delivery 사이트 추가:

   • 사이트 이름: Frescopa
   • Edge Delivery 원본: https://main--frescopa--sachinmali.aem.live/

   형식은 https://<branch>--<site-name>--<organization-name>.aem.live/입니다. 여기서 <branch>, <site-name> 및 <organization-name>은(는) 각각 Edge Delivery Services 사이트 프로젝트의 분기, 사이트 이름 및 조직 이름입니다.

   Edge Delivery Services 사이트 프로젝트의 dev 분기를 설정하는 것이 좋습니다. 그러나 데모 사이트의 아래 스크린샷을 참조하십시오.

   

2. 도메인 추가:

   • 도메인 이름: myfrescopa.enablementadobe.com

   Edge Delivery Services 사이트 프로젝트의 개발 분기에 매핑된 개발 사이트에서 시도하는 경우에도 AEM Edge Functions 프로젝트를 배포하려면 사용자 지정 도메인 이름이 설정되어 있어야 합니다.

3. SSL 인증서 추가:

   • 인증서 유형: 고객 관리(OV/EV)
   • 인증서 이름: enablementadobe.com
   • 인증서: -----BEGIN CERTIFICATE-----에서 -----END CERTIFICATE----- 사이의 서명된 인증서 파일 콘텐츠
   • 개인 키: -----BEGIN PRIVATE KEY-----에서 -----END PRIVATE KEY----- 사이의 개인 키 파일 내용
   • 인증서 체인: -----BEGIN CERTIFICATE-----에서 -----END CERTIFICATE----- 사이의 인증서 체인 파일 내용

   

   Adobe 관리(DV) 인증서를 사용할 수도 있습니다. 자습서에서는 고객 관리(OV/EV) 인증서를 예로 사용합니다.

4. myfrescopa.enablementadobe.com의 DNS 호스팅 서비스에 DNS 레코드를 추가​합니다.

5. 도메인을 매핑 myfrescopa.enablementadobe.com하여 Adobe 관리 CDN에 매핑합니다.

   

Edge Delivery Sites 표에 사이트가 표시되는지 확인합니다. 데모 Frescopa 사이트는 https://myfrescopa.enablementadobe.com/에서 확인할 수 있습니다.

Cloud Manager의

GitHub의 aem-edge-functions-boilerplate​(으)로 이동합니다.

오른쪽 상단 모서리에서 이 템플릿 사용 > 새 저장소 만들기​를 선택합니다.

리포지토리 이름(예: frescopa-edge-functions)을 제공하고 설명을 추가하고 가시성을 개인(으)로 설정한 다음 리포지토리 만들기​를 선택하십시오.

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

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

// 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의 Edge Delivery 구성 파이프라인을 통해 이러한 파일을 배포합니다. 6단계에서는 이 프로세스를 다룹니다.

Adobe 저장소: Cloud Manager에서 프로그램의 새 저장소를 만듭니다.

개인 저장소: 기존 GitHub 저장소를 Cloud Manager에 연결합니다.

Cloud Manager에서 저장소​를 열고 저장소 추가​를 선택합니다.

저장소 추가 대화 상자에서 개인 저장소​를 선택한 다음 저장소 이름, URL 및 유형을 제공합니다. 저장​을 선택합니다.

개인 저장소 소유권 확인 대화 상자의 단계를 완료하십시오.

1. 저장소에 대한 Cloud Manager 액세스 권한 부여:

   

2. AEM Edge Functions 프로젝트 저장소에 유효성 검사 암호를 저장합니다.

   

프로그램 개요 페이지에서 Edge Delivery 탭을 엽니다. 파이프라인​에서 Edge Delivery 파이프라인 추가​를 선택합니다.

Edge Delivery 파이프라인 추가 대화 상자에서 이름을 입력하고 계속​을 선택합니다.

Source 코드 단계에서 추가한 개인 저장소, main 분기 및 /config을(를) 코드 위치로 선택합니다. 저장​을 선택합니다.

파이프라인 이름 옆에 있는 …​을(를) 선택한 다음 실행​을(를) 선택하여 파이프라인을 실행합니다.