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. 选择 mainGit分支 选择框
      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。

后续步骤

在此页面上