AEMas a Cloud Service的AEM Headless快速设置

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

前提条件

进行此快速设置需要以下各项：

• AEMas a Cloud Service沙盒环境（最好是开发环境）
• 访问AEMas a Cloud Service和Cloud Manager
  • AEM管理员 对AEMas a Cloud Service的访问权限
  • Cloud Manager — 部署管理员 对Cloud Manager的访问权限
• 必须本地安装以下工具：
  • Node.js v18
  • Git
  • IDE(例如， Microsoft® Visual Studio Code)

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
      • 每个Adobe组织的Git存储库名称必须是唯一的，
   4. 选择 保存，并等待Git存储库初始化

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

创建Cloud Manager Git存储库后，从GitHub克隆WKND站点项目的源代码，并将其推送到Cloud Manager Git存储库。 现在，Cloud Manager可访问WKND站点项目，并将其部署到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站点项目推送到Cloud Manager Git存储库后，无法使用Cloud Manager管道将其部署到AEMas a Cloud Service。

请记住，WKND站点项目提供React应用程序通过AEM Headless GraphQL API使用的示例内容。

《舞步》的截屏

1. 附加 非生产部署管道 到新的Git存储库
   1. 选择 管道 在顶部导航中
   2. 选择 添加管道 从顶部操作栏中
   3. 在 配置 选项卡
      1. 选择 部署管道 option
      2. 设置 非生产管道名称 到 Dev Deployment pipeline
      3. 选择 部署触发器>关于Git更改
      4. 选择 重要量度失败行为>立即继续
      5. 选择 继续
   4. 在 源代码 选项卡
      1. 选择 全栈代码 option
      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 Headless 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 Publish 服务的主机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应用程序

   $ 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 Author服务中创作内容，并查看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. 取消发布现有的冒险内容片段，并验证是否将其从React应用程序体验中删除
    2. 创建和发布新的冒险内容片段，并验证它是否显示在React应用程序体验中
    小贴士

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

恭喜！

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

要详细了解React应用程序如何使用AEMas a Cloud Service中的内容，请查看 AEM Headless指南. 本教程探讨了如何在AEM中创建内容片段，以及此React应用程序如何以JSON形式使用其内容。

后续步骤

• 启动AEM Headless教程

Business.Adobe.com 资源