AEM as a Cloud Service的AEM Headless快速设置

导航到https://my.cloudmanager.adobe.com

选择包含要用于此快速设置的AEM as a Cloud Service环境的Cloud Manager 项目

为WKND站点项目创建Git存储库

1. 在顶部导航中选择​ 存储库
2. 在顶部操作栏中选择​ 添加存储库
3. 命名新的Git存储库： aem-headless-quick-setup-wknd
   • 每个Adobe组织的Git存储库名称必须是唯一的，
4. 选择​ 保存，并等待Git存储库初始化

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

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

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

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

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

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

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

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

$ git push adobe main:main

在系统提示输入凭据时，从Cloud Manager的​ 存储库信息 ​模式中提供​ 用户名 ​和​ 密码。

将​ 非生产部署管道 ​附加到新的Git存储库

1. 在顶部导航中选择​ 管道

2. 从顶部操作栏中选择​ 添加管道

3. 在​ 配置 ​选项卡上

   1. 选择​ 部署管道 ​选项
   2. 将​ 非生产管道名称 ​设置为Dev Deployment pipeline
   3. 选择​ 部署触发器>Git更改
   4. 选择​ 重要度量失败行为>立即继续
   5. 选择​ 继续

4. 在​ Source代码 ​选项卡上

   1. 选择​ 全栈代码 ​选项
   2. 从​ 符合条件的部署环境 ​选择框中选择​ AEM as a Cloud Service开发环境
   3. 在​ 存储库 ​选择框中选择aem-headless-quick-setup-wknd
   4. 从​ Git分支 ​选择框中选择main
   5. 选择​ 保存

运行​ 开发部署管道

1. 在顶部导航中选择​ 概述
2. 在​ 管道 ​部分中找到新创建的​ 开发部署管道
3. 选择管道条目右侧的​ …
4. 选择​ 运行，然后在模式窗口中确认
5. 选择当前正在运行的管道右侧的​ …
6. 选择​ 查看详细信息

从管道执行的详细信息中，监控进度，直到成功完成为止。 管道执行应在30-40分钟之间进行。

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

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

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

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

从REACT_APP_HOST_URI属性指向AEM as a Cloud Service Publish ​服务的主机URI。

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

要查找AEM as a Cloud Service Publish服务的主机URI，请执行以下操作：

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

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

从命令行中，运行React应用程序

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

在本地运行的React应用程序从http://localhost:3000开始，并显示一系列冒险，这些冒险是使用AEM Headless的GraphQL API从AEM as a Cloud Service中获得的。

登录到AEM as a Cloud Service创作服务

导航到​ Assets >文件> WKND共享>英语>冒险

打开​ Cycling Southern Utah ​文件夹

选择​ Cycling Southern Utah ​内容片段，然后从顶部操作栏中选择​ 编辑

更新内容片段的某些字段，例如：

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

在顶部操作栏中选择​ 保存

从顶部操作栏的​ 中选择 ​快速Publish …

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

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

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

1. 取消发布现有的冒险内容片段，并验证是否将其从React应用程序体验中删除
2. 创建和发布新的冒险内容片段，并验证它是否显示在React应用程序体验中