使用本地AEM SDK快速设置AEM Headless setup

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
内容片段

创建对象：

初学者
开发人员

AEM Headless快速设置允许您使用AEM Headless的实际操作，它使用WKND Site示例项目中的内容以及一个通过AEM Headless GraphQL API使用内容的示例React应用程序(SPA)。本指南使用AEM as a Cloud Service SDK。

先决条件 prerequisites

应在本地安装以下工具：

1.安装AEM SDK aem-sdk

此设置使用AEM as a Cloud Service SDK来浏览AEM的GraphQL API。此部分提供有关安装AEM SDK并在创作模式下运行的快速指南。有关设置本地开发环境的更详细指南，请参阅此处。

NOTE

也可以使用AEM as a Cloud Service环境来学习本教程。在本教程中，还包含有关使用云环境的其他说明。

导航到 软件分发门户 > AEM as a Cloud Service 并下载最新版本的 AEM SDK。
解压缩下载内容并将快速入门jar (aem-sdk-quickstart-XXX.jar)复制到专用文件夹，即~/aem-sdk/author。
将jar文件重命名为aem-author-p4502.jar。

author名称指定快速入门Jar以创作模式启动。 p4502指定快速入门在端口4502上运行。

要安装和启动AEM实例，请在包含jar文件的文件夹下打开命令提示符，然后运行以下命令：

code language-shell
`$ cd ~/aem-sdk/author $ java -jar aem-author-p4502.jar`

提供管理员密码作为admin。可接受任何管理员密码，但建议使用admin进行本地开发，以减少重新配置的需要。
AEM服务安装完毕后，应在http://localhost:4502处打开一个新的浏览器窗口。
使用用户名admin和在AEM初始启动期间选择的密码（通常为admin）登录。

2.安装示例内容 install-sample-content

WKND引用站点 中的示例内容用于加速教程。 WKND是一个虚构的生活风格品牌，通常与AEM培训一起使用。

WKND站点包含公开GraphQL端点所需的配置。在真实实施中，按照记录的步骤，将GraphQL端点🔗包含在您的客户项目中。 CORS也已打包为WKND站点的一部分。需要CORS配置才能授予对外部应用程序的访问权限，可在下面找到有关CORS的详细信息。

下载适用于WKND站点的最新编译的AEM包： aem-guides-wknd.all-x.x.x.zip。

note note
NOTE
请确保下载与AEM as a Cloud Service兼容的标准版本，并且不 `classic`版本。

从 AEM开始 菜单，导航到工具 > 部署 > 包。
单击 上传包，然后选择在上一步中下载的WKND包。单击安装可安装软件包。
从 AEM Start 菜单中，导航到 Assets > 文件 > WKND已共享 > 英语 > 冒险。

这是构成WKND品牌推广的各种冒险的所有资产的文件夹。这包括传统媒体类型（如图像和视频）以及特定于AEM的媒体（如 内容片段）。
单击 Downhill Sking Wyoming 文件夹，然后单击 Downhill Sking Wyoming内容片段 卡：
内容片段编辑器将打开，以显示怀俄明州下滑山滑雪探险活动。

观察各种字段（如标题、描述和活动）定义片段。

内容片段 是在AEM中管理内容的方法之一。内容片段是可重复使用的、与呈现无关的内容，由结构化数据元素（如文本、富文本、日期或对其他内容片段的引用）组成。稍后在快速设置中会更详细地探讨内容片段。
单击取消关闭片段。您可以随意导航到其他某些文件夹，并探索其他冒险内容。

NOTE

如果使用Cloud Service环境，请参阅有关如何将代码库（如WKND引用站点）部署到Cloud Service环境🔗的文档。

3.下载并运行WKND React应用程序 sample-app

本教程的目标之一是演示如何使用GraphQL API从外部应用程序使用AEM内容。本教程使用示例React应用程序。 React应用程序可随意使用，以专注与AEM的GraphQL API集成。

打开新的命令提示符并从GitHub克隆示例React应用程序：

code language-shell
`$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git $ cd aem-guides-wknd-graphql/react-app`

在您选择的IDE中的aem-guides-wknd-graphql/react-app中打开React应用程序。

在IDE中，打开位于/.env.development的文件.env.development。验证REACT_APP_AUTHORIZATION行是否取消注释，并且文件声明以下变量：

code language-plain

code language-plain
`REACT_APP_HOST_URI=http://localhost:4502 REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json # Use Authorization when connecting to an AEM Author environment REACT_APP_AUTHORIZATION=admin:admin`

REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
# Use Authorization when connecting to an AEM Author environment
REACT_APP_AUTHORIZATION=admin:admin

确保REACT_APP_HOST_URI指向您的本地AEM SDK。为方便起见，此快速入门将React应用程序连接到 AEM Author。作者服务需要身份验证，因此应用程序使用admin用户建立其连接。将应用程序连接到AEM Author是开发过程中的一种常见做法，因为它有助于在不发布更改的情况下快速迭代内容。

note note
NOTE
在生产方案中，应用程序将连接到AEM Publish 环境。生产部署部分中对此进行了详细介绍。

安装和启动React应用程序：

code language-shell
`$ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start`

新的浏览器窗口会在http://localhost:3000上自动打开应用程序。

此时将显示AEM中的冒险内容列表。
单击其中一个冒险图像以查看冒险详细信息。系统会向AEM发出请求，要求返回冒险的细节。
使用浏览器的开发人员工具检查网络请求。查看 XHR 请求并观察到/graphql/execute.json/...的多个GET请求。此路径前缀将调用AEM的持久查询端点，并选取要使用前缀后的名称和编码参数执行的持久查询。