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的访问权限
  • 必须本地安装以下工具:

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. 选择 mainGit分支 选择框
      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形式使用其内容。

后续步骤

在此页面上