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

AEM Headless快速设置使用AEM Headless示例项目（WKND Site示例项目）中的内容以及一个通过AEM Headless GraphQL API使用内容的示例React应用程序(SPA)，帮助您实际操作Headless。 本指南使用 AEMAS A CLOUD SERVICESDK.

前提条件

应在本地安装以下工具：

1.安装AEM SDK

此设置使用 AEMAS A CLOUD SERVICESDK 以探索AEM GraphQL API。 此部分提供了有关安装AEM SDK并在创作模式下运行该软件的快速指南。 有关设置本地开发环境的更详细指南 可在此处找到.

注意

也可以在本教程之后使用 AEMas a Cloud Service环境. 在本教程中，还包含有关使用云环境的其他说明。

  1. 导航到 软件分发门户 > AEMas a Cloud Service 并下载最新版本的 AEM SDK.

    软件分发门户

  2. 解压缩下载内容并复制快速入门jar (aem-sdk-quickstart-XXX.jar)到专用文件夹，即 ~/aem-sdk/author.

  3. 将jar文件重命名为 aem-author-p4502.jar.

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

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

    $ cd ~/aem-sdk/author
$ java -jar aem-author-p4502.jar

  5. 提供管理员密码作为 admin. 可接受任何管理员密码，但建议使用 admin 本地开发，减少重新配置的需要。

  6. 当AEM服务完成安装时，应打开一个新的浏览器窗口，网址为 http://localhost:4502.

  7. 使用用户名登录 admin 和AEM初始启动期间选择的密码(通常为 admin)。

2.安装示例内容

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

WKND站点包含公开 GraphQL端点. 在实际的实施中，请按照文档记录的步骤执行 包含GraphQL端点 在您的客户项目中。 A CORS 也已打包为WKND站点的一部分。 授予对外部应用程序的访问权限需要CORS配置，了解有关 CORS 可在下方找到。

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

    注意

    确保下载与AEMas a Cloud Service兼容的标准版本，并且 非 此 classic 版本。

  2. 从 AEM开始 菜单，导航到 工具 > 部署 > 包.

    导航到包

  3. 单击 上传包 并选择在之前步骤中下载的WKND包。 单击​安装​可安装软件包。

  4. 从 AEM开始 菜单，导航到 资产 > 文件 > WKND已共享 > 英语 > 冒险.

    冒险的文件夹视图

    这是构成WKND品牌推广的各种冒险的所有资产的文件夹。 这包括传统媒体类型（如图像和视频）以及AEM特有的媒体(如 内容片段.

  5. 单击 怀俄明州下山滑雪 文件夹，然后单击 怀俄明州下坡滑雪内容片段 信息卡：

    内容片段信息卡

  6. 内容片段编辑器将在怀俄明州下山滑雪冒险中打开。

    内容片段编辑器

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

    内容片段 是在AEM中管理内容的其中一种方式。 内容片段是可重复使用的、与呈现无关的内容，由结构化数据元素（如文本、富文本、日期或对其他内容片段的引用）组成。 稍后在快速设置中会更详细地探讨内容片段。

  7. 单击 取消 以关闭片段。 您可以随意导航到其他某些文件夹，并探索其他冒险内容。

注意

如果使用Cloud Service环境，请参阅文档以了解如何 将代码库（如WKND引用站点）部署到Cloud Service环境.

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

本教程的目标之一是演示如何使用GraphQL API从外部应用程序使用AEM内容。 本教程使用示例React应用程序。 React应用程序有意设计得非常简单，以便专注于与AEM GraphQL API的集成。

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

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

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

  3. 在IDE中，打开文件 .env.development 在 /.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 Publish 环境。 有关更多详细信息，请参见 生产部署 部分。

  4. 安装和启动React应用程序：

    $ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

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

    React入门应用程序

    此时将显示AEM中的冒险内容列表。

  6. 单击其中一个冒险图像以查看冒险详细信息。 系统会向AEM发出请求，要求返回冒险的细节。

    冒险详细信息视图

  7. 使用浏览器的开发人员工具检查 网络 请求。 查看 XHR 请求并观察多个GET请求 /graphql/execute.json/.... 此路径前缀将调用AEM持久查询端点，使用前缀后的名称和编码参数选择要执行的持久查询。

    GraphQL端点XHR请求

4.在AEM中编辑内容

在React应用程序运行时，对AEM中的内容进行更新，并查看更改是否反映在应用程序中。

  1. 导航到AEM http://localhost:4502.

  2. 导航到 资产 > 文件 > WKND已共享 > 英语 > 冒险 > 巴厘岛冲浪营.

    巴厘岛冲浪营文件夹

  3. 单击 巴厘岛冲浪营 用于打开内容片段编辑器的内容片段。

  4. 修改 标题 和 描述 探险之旅。

    修改内容片段

  5. 单击 保存 以保存更改。

  6. 刷新React应用程序，网址为 http://localhost:3000 要查看您所做的更改，请执行以下操作：

    巴厘岛冲浪营地冒险活动最新消息

5.浏览GraphiQL

  1. 打开 GraphiQL 导航到 工具 > 常规 > GraphQL查询编辑器

  2. 选择左侧的现有持久查询，然后运行它们以查看结果。

    注意

    GraphiQL工具和GraphQL API是 稍后在教程中会更详细地探讨.

恭喜！

恭喜，您现在有一个外部应用程序正在使用GraphQL的AEM内容。 欢迎在React应用程序中检查代码，并继续尝试修改现有内容片段。

后续步骤

在此页面上