로컬 AEM 개발 환경 설정

Adobe Experience Manager, AEM용 로컬 개발 설정에 대한 안내서입니다. 로컬 설치, Apache Maven, 통합 개발 환경 및 디버깅/문제 해결의 중요한 주제를 다룹니다. Eclipse IDE, CRXDE Lite, Visual Studio Code 및 IntelliJ ​을 사용한 개발에 대해 설명합니다.

개요

Adobe Experience Manager 또는 AEM용 개발 시 로컬 개발 환경을 설정하는 것이 첫 번째 단계입니다. 시간을 내어 생산성을 높이고 더 나은 코드를 더 빨리 작성할 수 있는 품질 개발 환경을 설정하십시오. AEM 로컬 개발 환경을 네 가지 영역으로 나눌 수 있습니다.

로컬 AEM 인스턴스 설치

로컬 AEM 인스턴스를 참조할 때 개발자의 개인 컴퓨터에서 실행되는 Adobe Experience Manager 사본에 대해 이야기하고 있습니다. 모두 AEM 개발은 로컬 AEM 인스턴스에 대해 코드를 작성하고 실행하는 것으로 시작해야 합니다.

AEM을 처음 사용하는 경우 두 가지 기본 실행 모드를 설치할 수 있습니다. 작성자 및 Publish. 작성자 실행 모드는 디지털 마케터가 콘텐츠를 만들고 관리하는 데 사용하는 환경입니다. 대부분의 경우 개발하면 작성자 인스턴스에 코드를 배포하게 됩니다. 페이지를 만들고 구성 요소를 추가 및 구성할 수 있습니다. AEM Sites은 WYSIWYG 제작 CMS이므로 작성 인스턴스에 대해 CSS와 JavaScript의 대부분을 테스트할 수 있습니다.

또한 로컬 Publish 인스턴스에 대해 중요 테스트 코드입니다. Publish 인스턴스는 웹 사이트 방문자가 상호 작용하는 AEM 환경입니다. Publish 인스턴스는 작성자 인스턴스와 동일한 기술 스택이지만 구성 및 권한에 따라 몇 가지 주요 차이점이 있습니다. 더 높은 수준의 환경으로 승격하기 전에 로컬 Publish 인스턴스에 대해 코드를 테스트해야 합니다.

단계

~/aem-sdk
    /author
    /publish

~/aem-sdk
    /author
        + aem-author-p4502.jar
        + license.properties
    /publish
        + aem-publish-p4503.jar
        + license.properties

aem-publish-p4503.jar 파일을 두 번 클릭하여 Publish 인스턴스를 설치합니다. 로컬 컴퓨터의 4503 포트에서 실행되는 Publish 인스턴스가 시작됩니다.

명령줄 사용

JAR 파일을 두 번 클릭할 수 있는 또 다른 방법은 명령줄에서 AEM을 시작하거나 로컬 운영 체제 종류에 따라 스크립트(.bat 또는 .sh)를 만드는 것입니다. 다음은 샘플 명령의 예입니다.

$ java -Xmx2048M -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=30303 -jar aem-author-p4502.jar -gui -r"author,localdev"

여기서 -X은(는) JVM 옵션이고 -D은(는) 추가 프레임워크 속성입니다. 자세한 내용은 AEM 인스턴스 배포 및 유지 관리 및 빠른 시작 파일에서 사용할 수 있는 추가 옵션을 참조하십시오.

Apache Maven 설치

Apache Maven ​은(는) Java 기반 프로젝트의 빌드 및 배포 절차를 관리하는 도구입니다. AEM은 Java 기반 플랫폼이며 Maven은(는) AEM 프로젝트에 대한 코드를 관리하는 표준 방법입니다. AEM Maven 프로젝트 또는 AEM 프로젝트 ​이라고 할 때 사이트에 대한 모든 custom 코드를 포함하는 Maven 프로젝트를 참조합니다.

모든 AEM 프로젝트는 AEM Project Archetype ​의 최신 버전을 사용하여 빌드해야 합니다. https://github.com/adobe/aem-project-archetype. AEM Project Archetype에서 일부 샘플 코드와 내용이 포함된 AEM 프로젝트의 부트스트랩을 제공합니다. AEM Project Archetype에는 프로젝트에서 사용하도록 구성된 AEM WCM Core Components ​도 포함됩니다.

단계

$ mvn --version
Apache Maven 3.3.9
Maven home: /Library/apache-maven-3.3.9
Java version: 1.8.0_111, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre
Default locale: en_US, platform encoding: UTF-8

통합 개발 환경 설정

통합 개발 환경 또는 IDE는 텍스트 편집기, 구문 지원 및 빌드 도구를 결합한 응용 프로그램입니다. 수행하는 개발 유형에 따라 한 IDE가 다른 IDE보다 선호될 수 있습니다. IDE와 관계없이 IDE를 테스트하려면 로컬 AEM 인스턴스에 정기적으로 push 코드를 푸시할 수 있어야 합니다. Git과 같은 소스 제어 관리 시스템에 지속하려면 때때로 로컬 AEM 인스턴스에서 AEM 프로젝트로 끌어오기 구성을 만들어야 합니다.

다음은 로컬 AEM 인스턴스와의 통합을 보여 주는 해당 비디오와 함께 AEM 개발에 사용되는 보다 인기 있는 몇 가지 IDE입니다.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

IDE를 사용하는 경우 Maven 프로필 탭에서 classic을(를) 확인하십시오.

IntelliJ Maven 프로필

Eclipse IDE

Eclipse IDE ​은(는) 대부분 오픈 소스이고 무료 ​이기 때문에 Java™ 개발용으로 더 많이 사용되는 IDE 중 하나입니다. Adobe은 로컬 AEM 인스턴스와 코드를 동기화하는 유용한 GUI를 사용하여 보다 쉽게 개발할 수 있도록 Eclipse에 대해 AEM Developer Tools 플러그인을 제공합니다. AEM Developer Tools의 GUI 지원 때문에 AEM을 처음 사용하는 개발자에게는 Eclipse IDE가 권장됩니다.

설치 및 설정

IntelliJ IDEA

IntelliJ IDEA ​은(는) 전문적인 Java™ 개발을 위한 강력한 IDE입니다. IntelliJ IDEA은(는) 두 가지 버전, 무료 Community 버전 및 상업용(유료) Ultimate 버전으로 제공됩니다. 사용 가능한 Community 버전의 IntellIJ IDEA은(는) 더 많은 AEM 개발에 충분하지만, Ultimate 은(는) 기능 집합을 확장합니다.

Installation and Setup

Visual Studio Code

Visual Studio 코드 ​은(는) 향상된 JavaScript 지원, Intellisense 및 브라우저 디버깅 지원을 통해 프론트엔드 개발자 ​에게 빠르게 인기 있는 도구가 되었습니다. Visual Studio Code ​은(는) 무료 오픈 소스이며 강력한 확장이 많습니다. Visual Studio Code은(는) Adobe 도구인 repo을(를) 통해 AEM과 통합되도록 설정할 수 있습니다. AEM과 통합하기 위해 설치할 수 있는 몇 가지 커뮤니티 지원 확장도 있습니다.

Visual Studio Code은(는) CSS/LESS 및 JavaScript 코드를 주로 작성하여 AEM 클라이언트 라이브러리를 만드는 프론트엔드 개발자에게 적합한 선택입니다. 노드 정의(대화 상자, 구성 요소)는 원시 XML에서 편집해야 하므로 이 도구는 새 AEM 개발자에게 최선의 선택이 아닐 수 있습니다. Visual Studio Code에 사용할 수 있는 여러 Java™ 확장이 있지만 주로 Java™ 개발 Eclipse IDE 또는 IntelliJ을(를) 수행하는 경우 선호될 수 있습니다.

중요 링크

CRXDE Lite

CRXDE Lite은(는) AEM 저장소의 브라우저 기반 보기입니다. CRXDE Lite은(는) AEM에 포함되어 있으며 개발자가 파일 편집, 구성 요소 정의, 대화 상자 및 템플릿과 같은 표준 개발 작업을 수행할 수 있도록 해 줍니다. CRXDE Lite은(는) 전체 개발 환경을 위한 not ​이지만 디버깅 도구로 유효합니다. CRXDE Lite은(는) 코드 베이스 외부의 제품 코드를 확장하거나 이해할 때 유용합니다. CRXDE Lite은(는) 리포지토리의 강력한 보기와 권한을 효과적으로 테스트 및 관리할 수 있는 방법을 제공합니다.

CRXDE Lite은(는) 다른 IDE와 함께 사용하여 코드를 테스트하고 디버깅해야 하지만 기본 개발 도구로는 사용할 수 없습니다. 구문 지원이 제한적이고 자동 완성 기능이 없으며 소스 제어 관리 시스템과의 통합이 제한적입니다.

문제 해결

도움말! 내 코드가 작동하지 않습니다! 모든 개발과 마찬가지로 코드가 예상대로 작동하지 않는 경우가 있습니다(많은 수). AEM은 강력한 플랫폼이지만 강력한 힘을 가진… 엄청난 복잡성을 가져옵니다. 다음은 문제 해결 및 추적 시 몇 가지 높은 수준의 시작 지점입니다(하지만 잘못될 수 있는 전체 목록은 제외).

코드 배포 확인

문제가 발생하면 첫 번째 단계에서 코드가 AEM에 성공적으로 배포 및 설치되었는지 확인하는 것이 좋습니다.

로그 확인

AEM은 채팅 플랫폼이며 error.log ​에 유용한 정보를 기록합니다. AEM이 설치된 위치에서 error.log ​을(를) 찾을 수 있습니다. < aem-installation-folder>/crx-quickstart/logs/error.log.

문제를 추적하는 데 유용한 기술은 Java™ 코드에 로그 문을 추가하는 것입니다.

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
...

public class MyClass {
    private final Logger log = LoggerFactory.getLogger(getClass());

    ...

    String myVariable = "My Variable";

    log.debug("Debug statement of myVariable {}", myVariable);

    log.info("Info statement of myVariable {}", myVariable);
}

기본적으로 error.log ​은(는) INFO 문을 기록하도록 구성되어 있습니다. 로그 수준을 변경하려면 로그 지원: http://localhost:4502/system/console/slinglog(으)로 이동하십시오. error.log ​이(가) 너무 수다스럽습니다. 로그 지원을 사용하여 지정된 Java™ 패키지에 대한 로그 문을 구성할 수 있습니다. 이는 사용자 지정 코드 문제를 OOTB AEM 플랫폼 문제와 쉽게 분리하기 위한 프로젝트에 대한 우수 사례입니다.

번들이 설치됨 상태입니다. bundle-active

모든 번들(조각 제외)은 Active 상태여야 합니다. 코드 번들이 설치됨 상태로 표시되면 해결해야 하는 문제가 있습니다. 대부분의 경우 이는 종속성 문제입니다.

위의 스크린샷에서 WKND Core bundle은(는) 설치됨 상태입니다. 이는 번들에 AEM 인스턴스에서 사용할 수 있는 것과 다른 버전의 com.adobe.cq.wcm.core.components.models이(가) 필요하기 때문입니다.

사용할 수 있는 유용한 도구는 종속성 파인더: http://localhost:4502/system/console/depfinder입니다. AEM 인스턴스에서 사용할 수 있는 버전을 검사하려면 Java™ 패키지 이름을 추가합니다.

위의 예를 계속 진행하면 AEM 인스턴스에 설치된 버전이 번들에 필요한 12.2 ​와 12.6 ​임을 알 수 있습니다. 거기에서 거꾸로 작업하여 AEM의 Maven 종속성이 AEM 프로젝트의 Maven 종속성과 일치하는지 확인할 수 있습니다. 에서 위의 예제 Core Components v2.2.0 ​이(가) AEM 인스턴스에 설치되었지만 코드 번들이 v2.2.2 ​에 종속되어 빌드되었으므로 종속성 문제가 발생합니다.

Sling 모델 등록 확인 osgi-component-sling-models

AEM 구성 요소는 모든 비즈니스 논리를 캡슐화하고 HTL 렌더링 스크립트가 깔끔하게 유지되도록 Sling Model에 의해 지원되어야 합니다. 슬링 모델을 찾을 수 없는 문제가 발생하는 경우 콘솔에서 Sling Models을(를) 확인하는 것이 좋습니다. http://localhost:4502/system/console/status-slingmodels. 이는 슬링 모델이 등록되었는지 여부와 해당 모델이 연결된 리소스 유형(구성 요소 경로)을 알려줍니다.

구성 요소 리소스 유형 wknd/components/content/byline에 연결된 Sling Model, BylineImpl의 등록을 표시합니다.

CSS 또는 JavaScript 문제

대부분의 CSS 및 JavaScript 문제의 경우 브라우저의 개발 도구를 사용하는 것이 문제를 해결하는 가장 효과적인 방법입니다. AEM 작성자 인스턴스에 대해 개발할 때 문제를 좁히려면 페이지를 "게시됨"으로 보는 것이 좋습니다.

페이지 속성 메뉴를 열고 게시됨으로 보기를 클릭합니다. 이렇게 하면 AEM 편집기 없이 쿼리 매개 변수가 wcmmode=disabled(으)로 설정된 페이지가 열립니다. 이렇게 하면 AEM 작성 UI가 효과적으로 비활성화되고 프론트엔드 문제 해결/디버깅이 훨씬 쉬워집니다.

프론트엔드 코드를 개발할 때 자주 발생하는 다른 문제는 오래되었거나 오래된 CSS/JS가 로드되고 있습니다. 첫 번째 단계로, 브라우저 기록이 지워졌는지 확인하고 필요한 경우 시크릿 브라우저 또는 새 세션을 시작합니다.

클라이언트 라이브러리 디버깅

여러 클라이언트 라이브러리를 포함하도록 다양한 카테고리 및 임베디드 방법을 사용하면 문제를 해결하는 데 번거로울 수 있습니다. AEM은 이 작업에 도움이 되는 몇 가지 도구를 노출합니다. 가장 중요한 도구 중 하나는 AEM에서 LESS 파일을 다시 컴파일하고 CSS를 생성하도록 하는 클라이언트 라이브러리 다시 빌드입니다.