編集可能な領域をリモート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とのやり取り方法を理解できるように、いくつかの環境変数をリモート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リクエスト ( /content, /graphql, .model.json
using http-proxy-middleware
モジュール。REACT_APP_AUTH_METHOD
:AEMが提供するリクエストの認証方法。オプションは「service-token」、「dev-token」、「basic」です。no-auth ユースケースの場合は空白のままにします。
REACT_APP_BASIC_AUTH_USER
:AEM ユーザー名 AEMコンテンツの取得時にSPAが認証を受けます。REACT_APP_BASIC_AUTH_PASS
:AEM パスワード AEMコンテンツの取得時にSPAが認証を受けます。アプリで使用可能なAEM SPA npm の依存関係を使用して、AEMを初期化します。 ModelManager
プロジェクトの index.js
前 ReactDOM.render(...)
が呼び出されます。
この ModelManager は、AEMに接続して編集可能なコンテンツを取得します。
IDE で Remote 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 で Remote 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
ファイルは次のようになります。
このプロキシ設定では、主に次の 2 つをおこないます。
http://localhost:3000
) からAEMへ 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 を更新する必要があります。 相対 URL を残した場合、SPAがオーサリング用にSPAエディターに読み込まれる際に、これらの URL はデフォルトでSPAではなくAEMホストを使用し、次の図に示すように、404 要求がおこなわれます。
この問題を解決するには、Remote SPAでホストされる静的リソースに、Remote SPA origin を含む絶対パスを使用するようにします。
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=.../>
と 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>);
}
}
また、 2 つのインスタンス の背面ボタン 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 Editor のレイアウトモードをサポートするには、AEMレスポンシブグリッド CSS をSPAに統合する必要があります。 心配しないでください。このグリッドシステムは、編集可能なコンテナにのみ適用でき、選択したグリッドシステムを使用して、残りのSPAのレイアウトを駆動できます。
AEMレスポンシブグリッドの SCSS ファイルをSPAに追加します。
IDE でSPAプロジェクトを開きます。
次の 2 つのファイルをにダウンロードしてコピーします。 src/styles
_grid.scss
SPA固有のブレークポイント(デスクトップおよびモバイル)と列 (12) を使用する。開く src/App.scss
およびインポート ./styles/grid-init.scss
...
@import './styles/grid-init';
...
この _grid.scss
および _grid-init.scss
ファイルは次のようになります。
SPAコンテナに追加されたコンポーネントのAEMレイアウトモードをサポートするために必要な CSS がAEMに含まれるようになりました。
次のユーティリティクラスを 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:3000AEM SPA Editor を使用して開きます。 SPAではまだ編集できません。AEMでSPAを検証するだけです。
AEM オーサーにログインします。
に移動します。 サイト/ WKND アプリ/米国/en
を選択します。 WKND アプリのホームページ とタップします。 編集と入力し、SPAが表示されます。
切り替え先 プレビュー 右上のモード切り替えボタンの使用
SPA
AEM SPA Editor と互換性を持たせるために、リモートSPAをブートストラップしました。 次の方法を理解できました。
これで、AEM SPA Editor との互換性のベースラインを達成したので、編集可能な領域の導入を開始できます。 まず、 編集可能な固定コンポーネント をSPAに追加します。