편집 가능한 영역을 Remote SPA에 추가하려면 먼저 AEM SPA Editor JavaScript SDK 및 기타 몇 가지 구성으로 부트스트해야 합니다.
먼저 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
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 서비스의 구성표 및 호스트입니다.
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 사용 사례에 대해서는 비워 둡니다.
REACT_APP_BASIC_AUTH_USER
: AEM 사용자 이름 SPA에서 AEM 컨텐츠를 검색하는 동안 인증하도록 설정합니다.REACT_APP_BASIC_AUTH_PASS
: AEM 암호 SPA에서 AEM 컨텐츠를 검색하는 동안 인증하도록 설정합니다.앱에서 사용할 수 있는 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
파일 형식은 다음과 같습니다.
편집 가능한 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
파일 형식은 다음과 같습니다.
이 프록시 구성은 다음 두 가지 주요 작업을 수행합니다.
http://localhost:3000
) 로 설정합니다. http://localhost:4502
toAEM(path, req)
.pathRewriteToAEM(path, req)
res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
파일을 엽니다. 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을 다시 시작해야 합니다.
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
파일은 다음과 같습니다.
SPA에서 편집 가능한 영역에 대해 SPA 편집기의 레이아웃 모드를 지원하려면 AEM 응답형 그리드 CSS를 SPA에 통합해야 합니다. 걱정하지 마십시오. 이 그리드 시스템은 편집 가능한 컨테이너에만 적용되며, 선택한 그리드 시스템을 사용하여 나머지 SPA의 레이아웃을 구성할 수 있습니다.
AEM 응답형 그리드 SCSS 파일을 SPA에 추가합니다.
IDE에서 SPA 프로젝트를 엽니다.
다음 두 파일을 다운로드하여 다음 위치에 복사합니다. src/styles
_grid.scss
SPA 특정 중단점(데스크톱 및 모바일) 및 열 사용(12).열기 src/App.scss
및 가져오기 ./styles/grid-init.scss
...
@import './styles/grid-init';
...
다음 _grid.scss
및 _grid-init.scss
파일은 다음과 같습니다.
이제 SPA에는 AEM 컨테이너에 추가된 구성 요소에 대해 AEM 레이아웃 모드를 지원하는 데 필요한 CSS가 포함되어 있습니다.
다음 유틸리티 클래스의 를 React 앱 프로젝트에 복사합니다.
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withStandardBaseCssClass.js
이제 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. 모든 게 좋아 보여야 해!
SPA이 실행 중인 경우 http://localhost:3000을 입력하여 AEM SPA 편집기를 사용하여 엽니다. 아직 SPA에서 편집할 수 있는 것은 없으며, 이것은 AEM에서 SPA만 검증합니다.
AEM 작성자에 로그인
다음으로 이동 사이트 > WKND 앱 > us > en
을(를) 선택합니다 WKND 앱 홈 페이지 탭 편집로 설정되면 SPA이 나타납니다.
다음으로 전환 미리 보기 오른쪽 상단에 있는 모드 전환기 사용
SPA 주변을 클릭합니다.
Remote SPA을 AEM SPA Editor 호환으로 부트했습니다! 이제 방법을 알 수 있습니다.
이제 AEM SPA 편집기와의 호환성 기준을 달성했으므로 편집 가능한 영역을 도입할 수 있습니다. 먼저 배치 방법을 살펴봅니다 편집 가능한 구성 요소 고정 SPA에서 확인하십시오.