AEM Headless快速设置AEMas a Cloud Service

AEM无头快速设置可让您使用WKND网站示例项目中的内容，以及通过AEM无头GraphQL API使用内容的示例React应用程序(SPA)，来实践AEM无头。

前提条件

要执行此快速设置，需要满足以下条件：

  • AEMas a Cloud Service沙盒环境（最好是开发）
  • 访问AEMas a Cloud Service和Cloud Manager
    • AEM管理员 访问AEMas a Cloud Service
    • Cloud Manager — 部署管理器 对Cloud Manager的访问权限
  • 必须在本地安装以下工具：

1.创建Cloud Manager Git存储库

首先，创建用于部署WKND站点的Cloud Manager Git存储库。 WKND网站是一个AEM网站项目示例，其中包含快速设置的React应用程序使用的内容（内容片段）和GraphQL AEM端点。

步骤的截屏

  1. 导航到 https://my.cloudmanager.adobe.com
  2. 选择Cloud Manager 项目 其中包含用于此快速设置的AEMas a Cloud Service环境
  3. 为WKND站点项目创建Git存储库
    1. 选择 存储库 在顶部导航中
    2. 选择 添加存储库 在顶部操作栏中
    3. 将新的Git存储库命名为： aem-headless-quick-setup-wknd
      • Git存储库名称必须是每个Adobe组织唯一的，
    4. 选择 保存，然后等待Git存储库初始化

2.将示例WKND站点项目推送到Cloud Manager Git存储库

创建Cloud Manager Git存储库后，从GitHub克隆WKND站点项目的源代码，并将其推送到Cloud Manager Git存储库。 现在，Cloud Manager可以访问WKND Site项目并将其部署到AEMas a Cloud Service环境。

步骤的截屏

  1. 从命令行中，从GitHub中克隆示例WKND站点项目的源代码

    $ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git

  2. 将Cloud Manager Git存储库添加为远程存储库

    1. 选择 存储库 在顶部导航中

    2. 选择 访问存储库信息 从顶部操作栏

    3. 在中找到执行命令 将远程存储库添加到Git存储库 从命令行

      $ cd aem-guides-wknd
$ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/

  3. 将示例项目的源代码从本地Git存储库推送到Cloud Manager Git存储库

    $ git push adobe main:main

    提示输入凭据时，请提供 用户名 和 密码 从Cloud Manager的 存储库信息 模式窗口。

3.将WKND站点部署到AEMas a Cloud Service

将WKND Site项目推送到Cloud Manager Git存储库后，无法使用Cloud Manager管道将其部署到AEMas a Cloud Service。

请记住，WKND Site项目提供了React应用程序通过AEM无头GraphQL API使用的示例内容。

步骤的截屏

  1. 附加 非生产部署管道 到新的Git存储库
    1. 选择 管道 在顶部导航中
    2. 选择 添加管道 从顶部操作栏
    3. 在 配置 选项卡
      1. 选择 部署管道 选项
      2. 设置 非生产管道名称 to Dev Deployment pipeline
      3. 选择 部署触发器> On Git更改
      4. 选择 重要量度失败行为>立即继续
      5. 选择 继续
    4. 在 源代码 选项卡
      1. 选择 完整堆栈代码 选项
      2. 选择 AEMas a Cloud Service开发环境 从 符合条件的部署环境 选择框
      3. 选择 aem-headless-quick-setup-wknd 在 存储库 选择框
      4. 选择 main 从 Git分支 选择框
      5. 选择 保存
  2. 运行 开发部署管道
    1. 选择 概述 在顶部导航中
    2. 找到新创建的 开发部署管道 在 管道 部分
    3. 选择 … 到管道入口的右侧
    4. 选择 运行，并在模式窗口中确认
    5. 选择 … 在正在运行的管道的右侧
    6. 选择 查看详细信息
  3. 从管道执行的详细信息中，监控进度，直到成功完成。 管道执行需要30到40分钟。

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

通过使用WKND站点项目中的内容引导AEMas a Cloud Service，下载并启动示例WKND React应用程序，该应用程序会通过AEM无头GraphQL API使用WKND站点的内容。

步骤的截屏

  1. 从命令行中，从GitHub中克隆React应用程序的源代码。

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

  2. 打开文件夹 ~/Code/aem-guides-wknd-graphql/react-app 在IDE中。

  3. 在IDE中，打开文件 .env.development.

  4. 指向AEMas a Cloud Service 发布 服务的主机URI(来自 REACT_APP_HOST_URI 属性。

    REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...

    要查找AEMas a Cloud Service发布服务的主机URI，请执行以下操作：

    1. 在Cloud Manager中，选择 环境 在顶部导航中
    2. 选择 开发 环境
    3. 找到 发布服务(AEM和Dispatcher) 链接 环境区段 表
    4. 复制链接的地址，并将其用作AEMas a Cloud Service发布服务的URI

  5. 在IDE中，将更改保存到 .env.development

  6. 从命令行中，运行React App

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

  7. 在本地运行的React应用程序从 http://localhost:3000 和显示冒险列表，这些冒险源自使用AEM Headless' GraphQL API的AEMas a Cloud Service。

5.在AEM中编辑内容

当示例WKND React应用程序连接到AEM Headless GraphQL API并使用其中的内容时，在AEM创作服务中创作内容，并查看React应用程序的体验如何协同更新。

步骤的截屏

  1. 登录到AEMas a Cloud Service创作服务

  2. 导航到 资产>文件> WKND共享>英语>冒险

  3. 打开 南犹他州自行车队 文件夹

  4. 选择 南犹他州自行车队 内容片段，然后选择 编辑 从顶部操作栏

  5. 更新内容片段的一些字段，例如：

    • 标题: Cycling Utah's National Parks
    • 行程时长： 6 Days
    • 困难： Intermediate
    • 价格: 3500
    • 主映像： /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

  6. 选择 保存 在顶部操作栏中

  7. 选择 快速发布 从顶部操作栏的 …

  8. 刷新运行在上的React应用程序 http://localhost:3000.

  9. 在React应用程序中，选择现在更新的循环冒险，然后验证对内容片段所做的内容更改。

  10. 在AEM创作服务中，使用相同的方法：

    1. 取消发布现有的Adventure内容片段，并验证是否已从React应用程序体验中将其删除
    2. 创建并发布新的Adventure内容片段，然后验证它是否显示在React应用程序体验中
    小贴士

    如果您不熟悉如何创建和发布新内容或取消发布现有内容片段，请观看上面的屏幕截图。

恭喜！

恭喜！您已成功使用AEM Headless来为React应用程序提供支持！

要详细了解React应用程序如何使用AEMas a Cloud Service中的内容，请参阅 AEM Headless教程. 本教程探讨了创建时AEM中的内容片段，以及此React应用程序如何将其内容用作JSON。

后续步骤

在此页面上