AEM Headless快速设置可让您使用WKND网站示例项目中的内容来实践AEM Headless,以及一个可通过AEM Headless GraphQL API使用内容的示例React应用程序(SPA)。 本指南使用 AEMas a Cloud ServiceSDK.
应在本地安装以下工具:
此设置使用 AEMas a Cloud ServiceSDK 来浏览AEM GraphQL API。 本节提供了有关安装AEM SDK并在创作模式下运行该SDK的快速指南。 有关设置本地开发环境的更详细指南 可在此处找到.
您还可以在本教程的后面使用 AEMas a Cloud Service环境. 整个教程中都包含有关使用云环境的其他说明。
导航到 软件分发门户 > AEMas 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文件的文件夹中打开命令提示符,然后运行以下命令:
$ cd ~/aem-sdk/author
$ java -jar aem-author-p4502.jar
提供管理员密码作为 admin
. 可接受任何管理员密码,但建议使用 admin
以便减少重新配置的需要。
安装完AEM服务后,应会在 http://localhost:4502.
使用用户名登录 admin
和在AEM初始启动期间选择的密码(通常 admin
)。
示例内容 WKND参考站点 用于加速教程。 WKND是一个虚构的生命风格品牌,通常与AEM培训一起使用。
WKND站点包括公开 GraphQL端点. 在实际实施中,按照 包括GraphQL端点 在您的客户项目中。 A CORS 也被打包为WKND站点的一部分。 需要CORS配置才能授予对外部应用程序的访问权限,有关 CORS 可在下面找到。
下载适用于WKND站点的最新编译的AEM包: aem-guides-wknd.all-x.x.x.zip.
确保下载与AEM as a Cloud Service兼容的标准版本,以及 not the classic
版本。
从 AEM开始 菜单,导航至 工具 > 部署 > 包.
单击 上传包 并选择在上一步骤中下载的WKND包。 单击安装可安装软件包。
从 AEM开始 菜单,导航至 资产 > 文件 > WKND共享 > 英语 > 冒险.
这是构成WKND品牌推广的各种Adventures的所有资产的文件夹。 这包括传统媒体类型(如图像和视频),以及特定于AEM的媒体,如 内容片段.
单击 怀俄明州速降滑雪 文件夹,然后单击 怀俄明山滑雪内容片段 卡片:
内容片段编辑器将打开,用于下山滑雪怀俄明探险。
请注意, 标题, 描述和 活动 定义片段。
内容片段 是在AEM中管理内容的一种方式。 内容片段是可重用的、与呈现形式无关的内容,由结构化数据元素(如文本、富文本、日期或对其他内容片段的引用)组成。 稍后在快速设置中会详细探索内容片段。
单击 取消 来关闭片段。 您可以随意导航到其他一些文件夹,并浏览其他Adventure内容。
如果使用Cloud Service环境,请参阅有关如何 将类似WKND引用站点的代码库部署到Cloud Service环境.
本教程的目标之一是演示如何使用GraphQL API从外部应用程序中使用AEM内容。 本教程使用React应用程序的示例。 React应用程序特意非常简单,只注重与AEM GraphQL API的集成。
打开新的命令提示符,并从GitHub中克隆示例React应用程序:
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql/react-app
在中打开React应用程序 aem-guides-wknd-graphql/react-app
在您选择的IDE中。
在IDE中,打开文件 .env.development
at /.env.development
. 验证 REACT_APP_AUTHORIZATION
行将被取消注释,并且文件声明了以下变量:
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作者. 作者 服务需要进行身份验证,因此应用程序使用 admin
用户建立其连接。 在开发过程中,将应用程序连接到AEM作者是一种常见做法,因为这样可以帮助快速迭代内容,而无需发布更改。
在生产方案中,应用程序将连接到AEM 发布 环境。 有关详细信息,请参阅 生产部署 中。
安装并启动React应用程序:
$ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
新的浏览器窗口会自动在 http://localhost:3000.
将显示AEM中的探险内容列表。
单击其中一张冒险图像可查看冒险详细信息。 系统会向AEM发出请求,以返回冒险的详细信息。
使用浏览器的开发人员工具检查 网络 请求。 查看 XHR 请求和观察多个GET请求 /graphql/execute.json/...
. 此路径前缀将调用AEM持久化查询端点,从而选择要使用前缀后面的名称和编码参数执行的持久化查询。
运行React应用程序时,更新AEM中的内容,并查看该更改是否反映在应用程序中。
导航到AEM http://localhost:4502.
导航到 资产 > 文件 > WKND共享 > 英语 > 冒险 > 巴厘岛冲浪营.
单击 巴厘岛冲浪营 用于打开内容片段编辑器的内容片段。
修改 标题 和 描述 冒险的。
单击 保存 以保存更改。
在以下位置刷新React应用程序: http://localhost:3000 要查看更改:
打开 GraphiQL 导航至 工具 > 常规 > GraphQL查询编辑器
选择左侧的现有持久化查询,然后运行它们以查看结果。
GraphiQL工具和GraphQL API是 稍后在教程中详细探讨了.
恭喜,您现在有一个外部应用程序正在使用AEM内容与GraphQL。 您可以随时在React应用程序中检查代码,并继续尝试修改现有的内容片段。