로컬 개발 환경 설정

Edge Delivery Services가 제공하는 웹 사이트를 빠르게 개발하려면 로컬 개발 환경이 필요합니다. 이 환경에서는 Edge Delivery Services에서 콘텐츠를 소싱하는 동시에 로컬에서 개발된 코드를 사용하므로 개발자는 코드 변경 사항을 즉시 볼 수 있습니다. 이러한 설정은 빠르고 반복적인 개발과 테스트를 지원합니다.

Edge Delivery Services 웹 사이트 프로젝트를 위한 개발 도구와 프로세스는 웹 개발자가 익숙하게 사용할 수 있도록 설계되었으며 빠르고 효율적인 개발 경험을 제공합니다.

개발 토폴로지

이 비디오는 범용 편집기로 편집할 수 있는 Edge Delivery Services 웹 사이트 프로젝트의 개발 토폴로지에 대한 개요를 제공합니다.

사전 요구 사항

개발을 시작하기 전에 다음을 컴퓨터에 설치해야 합니다.

GitHub 저장소 복제

AEM Edge Delivery Services 코드 프로젝트가 포함된 새 코드 프로젝트 장에서 만든 GitHub 저장소를 로컬 개발 환경에 복제합니다.

$ cd ~/Code
$ git clone git@github.com:<YOUR_ORG>/aem-wknd-eds-ue.git

Code 디렉터리에 새 aem-wknd-eds-ue 폴더가 생성되고, 이 폴더가 프로젝트의 루트가 됩니다. 프로젝트는 컴퓨터의 어느 위치에나 복제할 수 있지만 이 튜토리얼에서는 ~/Code를 루트 디렉터리로 사용합니다.

프로젝트 종속성 설치

프로젝트 폴더로 이동한 다음 npm install을 사용하여 필요한 종속성을 설치합니다. Edge Delivery Services 프로젝트는 Webpack이나 Vite와 같은 전통적인 Node.js 빌드 시스템을 사용하지 않지만 로컬 개발을 위해서는 몇 가지 종속성이 필요합니다.

# ~/Code/aem-wknd-eds-ue

$ npm install

AEM CLI 설치

AEM CLI는 Edge Delivery Services 기반 AEM 웹 사이트 개발을 간소화하도록 설계된 Node.js 명령줄 도구로, 웹 사이트를 빠르게 개발하고 테스트할 수 있는 로컬 개발 서버를 제공합니다.

AEM CLI를 설치하려면 다음을 실행하십시오.

# ~/Code/aem-wknd-eds-ue

$ npm install @adobe/aem-cli

AEM CLI는 npm install --global @adobe/aem-cli를 사용하여 전역적으로 설치할 수도 있습니다.

로컬 AEM 개발 서버 시작

aem up 명령을 사용하면 로컬 개발 서버가 시작되고, 자동으로 브라우저 창이 열리며 서버 URL이 표시됩니다. 이 서버는 Edge Delivery Services 환경에 대한 리버스 프록시 역할을 하며, 해당 환경의 콘텐츠를 제공하면서도 로컬 코드 기반을 사용하여 개발할 수 있도록 합니다.

$ cd ~/Code/aem-wknd-eds-ue
$ aem up

    ___    ________  ___                          __      __
   /   |  / ____/  |/  /  _____(_)___ ___  __  __/ /___ _/ /_____  _____
  / /| | / __/ / /|_/ /  / ___/ / __ `__ \/ / / / / __ `/ __/ __ \/ ___/
 / ___ |/ /___/ /  / /  (__  ) / / / / / / /_/ / / /_/ / /_/ /_/ / /
/_/  |_/_____/_/  /_/  /____/_/_/ /_/ /_/\__,_/_/\__,_/\__/\____/_/

info: Starting AEM dev server version x.x.x
info: Local AEM dev server up and running: http://localhost:3000/
info: Enabled reverse proxy to https://main--aem-wknd-eds-ue--<YOUR_ORG>.aem.page

AEM CLI는 웹 사이트를 브라우저에서 http://localhost:3000/로 엽니다. 프로젝트의 변경 사항은 웹 브라우저에서 자동으로 핫 리로드되지만 콘텐츠를 변경하면 미리보기 환경에 게시하고 웹 브라우저를 새로 고쳐야 합니다.

웹 사이트가 404 페이지로 열린다면 새 코드 프로젝트에서 업데이트된 fstab.yaml 또는 paths.json이 잘못 구성되었거나, 변경 사항이 main 분기에 커밋되지 않았을 가능성이 높습니다.

JSON 조각 빌드

AEM 보일러플레이트 XWalk 템플릿을 사용하여 생성된 Edge Delivery Services 프로젝트는 범용 편집기에서 블록 작성을 활성화하는 JSON 구성을 사용합니다.

AEM 보일러플레이트 XWalk 프로젝트 템플릿은 Husky pre-commit hook을 포함하고 있어, git commit 시 JSON 조각 변경 사항을 자동으로 감지하고 이를 적절한 component-*.json 파일을 자동 컴파일합니다.

다음 NPM 스크립트는 npm run으로 수동 실행하여 JSON 파일을 빌드할 수 있지만 일반적으로 Husky pre-commit hook이 자동으로 처리하므로 별도로 실행할 필요는 없습니다.

# ~/Code/aem-wknd-eds-ue

npm run build:json

린팅

린팅은 main 분기에 변경 사항을 병합하기 전에 Edge Delivery Services 프로젝트에 필요한 코드 품질과 일관성을 보장합니다.

NPM 스크립트는 npm run을 통해 실행할 수 있으며, 그 예는 다음과 같습니다.

# ~/Code/aem-wknd-eds-ue

$ npm run lint

린팅 문제 자동 수정

다음 scripts를 프로젝트의 package.json에 추가하면 린팅 문제를 자동으로 해결할 수 있으며, npm run을 통해 실행할 수 있습니다.

# ~/Code/aem-wknd-eds-ue

$ npm run lint:fix

이러한 스크립트는 AEM 보일러플레이트 XWalk 템플릿에 미리 구성되어 있지 않지만 package.json 파일에 추가할 수 있습니다.

{
  ...
  "scripts": [
    ...,
    "lint:js:fix": "npm run lint:js -- --fix",
    "lint:css:fix": "npm run lint:css -- --fix",
    "lint:fix": "npm run lint:js:fix && npm run lint:css:fix",
    ...
  ]
  ...
}