Remote SPA for SPA 편집기 Bootstrap

편집 가능한 영역을 Remote SPA에 추가하려면 먼저 AEM SPA Editor JavaScript SDK 및 기타 몇 가지 구성으로 부트스트해야 합니다.

AEM SPA Editor JS SDK npm 종속성 설치

먼저 React 프로젝트에 대한 AEM SPA npm 종속성을 검토하고 설치합니다.

@adobe/aem-spa-page-model-manager : 는 AEM에서 컨텐츠를 검색하기 위한 API를 제공합니다.
@adobe/aem-spa-component-mapping : 은 AEM 컨텐츠를 SPA 구성 요소에 매핑하는 API를 제공합니다.
@adobe/aem-react-editable-components v2 : 는 사용자 지정 SPA 구성 요소를 빌드하기 위한 API를 제공하며, 다음과 같은 일반적인 사용 구현을 제공합니다. AEMPage React 구성 요소입니다.

$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install @adobe/aem-spa-page-model-manager
$ npm install @adobe/aem-spa-component-mapping
$ npm install @adobe/aem-react-editable-components

SPA 환경 변수 검토

AEM과 상호 작용하는 방법을 알 수 있도록 몇 가지 환경 변수를 Remote SPA에 노출해야 합니다.

원격 SPA 프로젝트 열기 위치 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app IDE에서
파일을 엽니다. .env.development
파일에서 키에 특별히 주의를 기울이고 필요에 따라 업데이트합니다.
```
REACT_APP_HOST_URI=http://localhost:4502

REACT_APP_USE_PROXY=true

REACT_APP_AUTH_METHOD=basic

REACT_APP_BASIC_AUTH_USER=admin
REACT_APP_BASIC_AUTH_PASS=admin
```
React의 사용자 지정 환경 변수 접두사로 REACT_APP_.
- REACT_APP_HOST_URI: 원격 SPA이 연결하는 AEM 서비스의 구성표 및 호스트입니다.
  - 이 값은 AEM 환경(로컬, 개발, 스테이지 또는 프로덕션)과 AEM 서비스 유형(작성자와 게시)에 따라 변경됩니다
- REACT_APP_USE_PROXY: 따라서 React 개발 서버에 다음과 같은 AEM 요청을 프록시하도록 지시하여 개발 중 CORS 문제가 발생하지 않습니다 /content, /graphql, .model.json 사용 http-proxy-middleware 모듈.
- REACT_APP_AUTH_METHOD: AEM에 제공된 요청에 대한 인증 방법, 옵션은 'service-token', 'dev-token', 'basic' 또는 noauth 사용 사례에 대해서는 비워 둡니다.
  - AEM 작성자에 사용하기 위해 필요합니다.
  - AEM Publish에서 사용하기 위해 필요할 수 있습니다(컨텐츠가 보호되어 있는 경우).
  - AEM SDK에 대해 개발하는 작업은 기본 인증을 통해 로컬 계정을 지원합니다. 이 자습서에서 사용되는 메서드입니다.
  - AEM as a Cloud Service과 통합할 때 를 사용합니다 액세스 토큰
- REACT_APP_BASIC_AUTH_USER: AEM 사용자 이름 SPA에서 AEM 컨텐츠를 검색하는 동안 인증하도록 설정합니다.
- REACT_APP_BASIC_AUTH_PASS: AEM 암호 SPA에서 AEM 컨텐츠를 검색하는 동안 인증하도록 설정합니다.

ModelManager API 통합

앱에서 사용할 수 있는 AEM SPA npm 종속성이 있는 경우 AEM을 초기화합니다 ModelManager 프로젝트의 index.js 이전 ReactDOM.render(...) 이 호출됩니다.

다음 ModelManager 은 편집 가능한 컨텐츠를 검색하기 위해 AEM에 연결해야 합니다.

IDE에서 원격 SPA 프로젝트를 엽니다.
파일을 엽니다. src/index.js

가져오기 추가 ModelManager 먼저 초기화하세요 root.render(..) 호출,

...
import { ModelManager } from "@adobe/aem-spa-page-model-manager";

// Initialize the ModelManager before invoking root.render(..).
ModelManager.initializeAsync();

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

다음 src/index.js 파일 형식은 다음과 같습니다.

src/index.js

내부 SPA 프록시 설정

편집 가능한 SPA을 만들 때 SPA의 내부 프록시: 적절한 요청을 AEM에 라우팅하도록 구성됩니다. 이 작업은 http-proxy-middleware npm 모듈이며, 기본 WKND GraphQL 앱에서 이미 설치되어 있습니다.

IDE에서 원격 SPA 프로젝트를 엽니다.
다음 위치에서 파일을 엽니다. src/proxy/setupProxy.spa-editor.auth.basic.js

파일을 다음 코드로 업데이트합니다.

const { createProxyMiddleware } = require('http-proxy-middleware');
const {REACT_APP_HOST_URI, REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS } = process.env;

/*
    Set up a proxy with AEM for local development
    In a production environment this proxy should be set up at the webserver level or absolute URLs should be used.
*/
module.exports = function(app) {

    /**
    * Filter to check if the request should be re-routed to AEM. The paths to be re-routed at:
    * - Starts with /content (AEM content)
    * - Starts with /graphql (AEM graphQL endpoint)
    * - Ends with .model.json (AEM Content Services)
    *
    * @param {*} path the path being requested of the SPA
    * @param {*} req the request object
    * @returns true if the SPA request should be re-routed to AEM
    */
    const toAEM = function(path, req) {
        return path.startsWith('/content') ||
            path.startsWith('/graphql') ||
            path.endsWith('.model.json')
    }

    /**
    * Re-writes URLs being proxied to AEM such that they can resolve to real AEM resources
    * - The "root" case of `/.model.json` are rewritten to the SPA's home page in AEM
    * - .model.json requests for /adventure:xxx routes are rewritten to their corresponding adventure page under /content/wknd-app/us/en/home/adventure/
    *
    * @param {*} path the path being requested of the SPA
    * @param {*} req the request object
    * @returns returns a re-written path, or nothing to use the @param path
    */
    const pathRewriteToAEM = function (path, req) {
        if (path === '/.model.json') {
            return '/content/wknd-app/us/en/home.model.json';
        } else if (path.startsWith('/adventure/') && path.endsWith('.model.json')) {
            return '/content/wknd-app/us/en/home/adventure/' + path.split('/').pop();
        }
    }

    /**
    * Register the proxy middleware using the toAEM filter and pathRewriteToAEM rewriter
    */
    app.use(
        createProxyMiddleware(
            toAEM, // Only route the configured requests to AEM
            {
                target: REACT_APP_HOST_URI,
                changeOrigin: true,
                // Pass in credentials when developing against an Author environment
                auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`,
                pathRewrite: pathRewriteToAEM // Rewrite SPA paths being sent to AEM
            }
        )
    );

    /**
    * Enable CORS on requests from the SPA to AEM
    *
    * If this rule is not in place, CORS errors will occur when running the SPA on http://localhost:3000
    */
    app.use((req, res, next) => {
        res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
        next();
    });
};

다음 setupProxy.spa-editor.auth.basic.js 파일 형식은 다음과 같습니다.

src/proxy/setupProxy.spa-editor.auth.basic.js

이 프록시 구성은 다음 두 가지 주요 작업을 수행합니다.

SPA에 수행된 특정 요청 프록시(http://localhost:3000) 로 설정합니다. http://localhost:4502
- 은 AEM에서 정의한 대로 경로가 패턴과 일치하는 요청만 프록시합니다. toAEM(path, req).
- 에 정의된 대로 SPA 경로를 상대 AEM 페이지에 다시 기록합니다. pathRewriteToAEM(path, req)
AEM 컨텐츠에 액세스할 수 있도록 모든 요청에 CORS 헤더를 추가하여 res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
- 이 값이 추가되지 않으면 SPA에서 AEM 컨텐츠를 로드할 때 CORS 오류가 발생합니다.

파일을 엽니다. src/setupProxy.js

을 가리키는 라인을 검토합니다. setupProxy.spa-editor.auth.basic 프록시 구성 파일:

...
case BASIC:
// Use user/pass for local development with Local Author Env
return require('./proxy/setupProxy.spa-editor.auth.basic');
...

참고: src/setupProxy.js 참조되는 파일에 SPA을 다시 시작해야 합니다.

정적 SPA 리소스

WKND 로고 및 그래픽 로드와 같은 정적 SPA 리소스는 Remote SPA 호스트에서 로드하도록 src URL을 업데이트해야 합니다. 상대적으로 왼쪽인 경우, SPA이 작성을 위해 SPA Editor에 로드되면 기본적으로 이 URL은 SPA이 아닌 AEM 호스트를 사용하므로 아래 이미지에 표시된 대로 404개의 요청이 발생합니다.

끊어진 정적 리소스

이 문제를 해결하려면 Remote SPA에서 호스팅하는 정적 리소스를 Remote SPA 원본을 포함하는 절대 경로를 사용하도록 합니다.

IDE에서 SPA 프로젝트를 엽니다.
SPA 환경 변수 파일을 엽니다. src/.env.development 및 SPA 공용 URI에 대한 변수를 추가합니다.
```
...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000
```
AEM as a Cloud Service에 배포할 때는 해당 이벤트에 대해 동일해야 합니다 .env 파일.
파일을 엽니다. src/App.js

SPA 환경 변수에서 SPA 공개 URI 가져오기

const {  REACT_APP_PUBLIC_URI } = process.env;

function App() { ... }

WKND 로고 접두사 <img src=.../> with REACT_APP_PUBLIC_URI SPA에 대해 강제로 해결하다.
```
<img src={REACT_APP_PUBLIC_URI + '/' +  logo} className="logo" alt="WKND Logo"/>
```

이미지를 로드하기 위해 같은 작업을 수행합니다 src/components/Loading.js

const { REACT_APP_PUBLIC_URI } = process.env;

class Loading extends Component {

    render() {
        return (<div className="loading">
            <img src={REACT_APP_PUBLIC_URI + '/' + loadingIcon} alt="Loading..." />
        </div>);
    }
}

그리고 두 인스턴스 뒤에 있는 버튼 src/components/AdventureDetails.js

const { REACT_APP_PUBLIC_URI } = process.env;

function AdventureDetail(props) {
    ...
    render() {
        <img className="Backbutton-icon" src={REACT_APP_PUBLIC_URI + '/' + backIcon} alt="Return" />
    }
}

다음 App.js, Loading.js, 및 AdventureDetails.js 파일은 다음과 같습니다.

정적 리소스

AEM 응답형 그리드

SPA에서 편집 가능한 영역에 대해 SPA 편집기의 레이아웃 모드를 지원하려면 AEM 응답형 그리드 CSS를 SPA에 통합해야 합니다. 걱정하지 마십시오. 이 그리드 시스템은 편집 가능한 컨테이너에만 적용되며, 선택한 그리드 시스템을 사용하여 나머지 SPA의 레이아웃을 구성할 수 있습니다.

AEM 응답형 그리드 SCSS 파일을 SPA에 추가합니다.

IDE에서 SPA 프로젝트를 엽니다.
다음 두 파일을 다운로드하여 다음 위치에 복사합니다. src/styles
- _grid.scss
  - AEM 응답형 그리드 SCSS 생성기
- _grid-init.scss
  - 호출 _grid.scss SPA 특정 중단점(데스크톱 및 모바일) 및 열 사용(12).
열기 src/App.scss 및 가져오기 ./styles/grid-init.scss
```
...
@import './styles/grid-init';
...
```

다음 _grid.scss 및 _grid-init.scss 파일은 다음과 같습니다.

AEM 응답형 그리드 SCSS

이제 SPA에는 AEM 컨테이너에 추가된 구성 요소에 대해 AEM 레이아웃 모드를 지원하는 데 필요한 CSS가 포함되어 있습니다.

유틸리티 클래스

다음 유틸리티 클래스의 를 React 앱 프로젝트에 복사합니다.

RoutedLink.js to ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
EditorPlaceholder.js to ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
withConditionalPlaceholder.js to ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
withStandardBaseCssClass.js to ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withStandardBaseCssClass.js

원격 SPA 유틸리티 클래스

SPA 시작

이제 SPA이 AEM와의 통합을 위해 부트스트랩 되었으므로 SPA을 실행하여 어떻게 보이는지 살펴보겠습니다.

명령줄에서 SPA 프로젝트의 루트로 이동합니다

일반 명령을 사용하여 SPA을 시작합니다(아직 수행하지 않았다면)

$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install
$ npm run start

SPA을 찾아봅니다. http://localhost:3000. 모든 게 좋아 보여야 해!

AEM SPA 편집기에서 SPA을 엽니다.

SPA이 실행 중인 경우 http://localhost:3000을 입력하여 AEM SPA 편집기를 사용하여 엽니다. 아직 SPA에서 편집할 수 있는 것은 없으며, 이것은 AEM에서 SPA만 검증합니다.

AEM 작성자에 로그인
다음으로 이동 사이트 > WKND 앱 > us > en
을(를) 선택합니다 WKND 앱 홈 페이지 탭 편집로 설정되면 SPA이 나타납니다.
다음으로 전환 미리 보기 오른쪽 상단에 있는 모드 전환기 사용
SPA 주변을 클릭합니다.

축하합니다!

Remote SPA을 AEM SPA Editor 호환으로 부트했습니다! 이제 방법을 알 수 있습니다.

AEM SPA Editor JS SDK npm 종속성을 SPA 프로젝트에 추가합니다.
SPA 환경 변수 구성
SPA과 ModelManager API 통합
적절한 컨텐츠 요청을 AEM에 라우팅하도록 SPA에 대한 내부 프록시를 설정합니다
SPA 편집기 컨텍스트에서 해결된 정적 SPA 리소스의 문제를 해결합니다
AEM 편집 가능한 컨테이너의 레이아웃 작성을 지원하도록 AEM 응답형 그리드 CSS 추가

다음 단계

이제 AEM SPA 편집기와의 호환성 기준을 달성했으므로 편집 가능한 영역을 도입할 수 있습니다. 먼저 배치 방법을 살펴봅니다 편집 가능한 구성 요소 고정 SPA에서 확인하십시오.

Remote SPA for SPA 편집기 Bootstrap

AEM SPA Editor JS SDK npm 종속성 설치

SPA 환경 변수 검토

ModelManager API 통합

내부 SPA 프록시 설정

정적 SPA 리소스

AEM 응답형 그리드

유틸리티 클래스

SPA 시작

AEM SPA 편집기에서 SPA을 엽니다.

축하합니다!

다음 단계

Business.Adobe.com 리소스

이 페이지에서는

다음 보기:

학습

기술 문서

커뮤니티

고객지원

리소스

Adobe 계정

Adobe