로컬 개발 설정

basic-tutorial 솔루션 분기의 WKND Teams React 앱을 복제합니다.

$ git clone -b solution/basic-tutorial git@github.com:adobe/aem-guides-wknd-graphql.git

basic-tutorial 디렉터리로 이동하여 코드 편집기에서 엽니다.

$ cd aem-guides-wknd-graphql/basic-tutorial
$ code .

종속성을 설치하고 React 앱을 시작합니다.

$ npm install
$ npm start

브라우저를 열어 http://localhost:3000에서 WKND Teams React 앱을 엽니다. 팀원 목록과 세부 정보가 표시됩니다. React 앱의 콘텐츠는 GraphQL API(/graphql/execute.json/my-project/all-teams)를 사용하는 로컬 AEM SDK에서 제공되며, 브라우저의 네트워크 탭을 사용하여 확인할 수 있습니다.

소프트웨어 배포 포털에서 범용 편집기 서비스의 최신 버전을 다운로드합니다.

다운로드한 zip 파일을 추출하고 universal-editor-service.cjs 파일을 universal-editor-service라는 새 디렉터리에 복사합니다.

$ unzip universal-editor-service-vproduction-<version>.zip
$ mkdir universal-editor-service
$ cp universal-editor-service.cjs universal-editor-service

universal-editor-service 디렉터리에서 .env 파일을 만들고 다음의 환경 변수를 추가합니다.

# The port on which the Universal Editor service runs
UES_PORT=8000
# Disable SSL verification
UES_TLS_REJECT_UNAUTHORIZED=false

로컬 범용 편집기 서비스를 시작합니다.

$ cd universal-editor-service
$ node universal-editor-service.cjs

local-ssl-proxy 패키지를 전역적으로 설치합니다.

$ npm install -g local-ssl-proxy

다음 서비스에 대해 로컬 SSL HTTP 프록시의 두 인스턴스를 시작합니다.

• 8443 포트의 AEM SDK 로컬 SSL HTTP 프록시
• 8001 포트의 범용 편집기 서비스 로컬 SSL HTTP 프록시

# AEM SDK local SSL HTTP proxy on port 8443
$ local-ssl-proxy --source 8443 --target 4502

# Universal Editor service local SSL HTTP proxy on port 8001
$ local-ssl-proxy --source 8001 --target 8000

React를 중지하려면 터미널에서 Ctrl + C를 누릅니다.

start 스크립트의 HTTPS=true 환경 변수를 포함하도록 package.json 파일을 업데이트합니다.

"scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
}

HTTPS 프로토콜 및 AEM SDK의 로컬 SL HTTP 프록시 포트를 사용하도록 .env.development 파일에서 REACT_APP_HOST_URI를 업데이트합니다.

REACT_APP_HOST_URI=https://localhost:8443
...

secure: false 옵션을 사용하여 완화된 SSL 설정을 사용하도록 ../src/proxy/setupProxy.auth.basic.js 파일을 업데이트합니다.

...
module.exports = function(app) {
app.use(
    ['/content', '/graphql'],
    createProxyMiddleware({
    target: REACT_APP_HOST_URI,
    changeOrigin: true,
    secure: false, // Ignore SSL certificate errors
    // pass in credentials when developing against an Author environment
    auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`
    })
);
};

React 앱을 시작합니다.

$ npm start

브라우저에서 범용 편집기 https://experience.adobe.com/#/aem/editor를 엽니다. 메시지가 표시되면 Adobe ID를 사용하여 로그인합니다.

범용 편집기의 사이트 URL 입력 필드에 WKND Teams React 앱 URL을 입력하고 Open을 클릭합니다.

WKND Teams React 앱이 범용 편집기에 로드되지만 아직은 콘텐츠를 편집할 수 없습니다. 범용 편집기를 사용하여 콘텐츠를 편집하도록 React 앱을 계측해야 합니다.