AEM Headless快速设置使用AEM Headless示例项目(WKND Site示例项目)中的内容以及一个通过AEM Headless GraphQL API使用内容的示例React应用程序(SPA),帮助您实际操作Headless。
进行此快速设置需要以下各项:
首先,创建用于部署WKND站点的Cloud Manager Git存储库。 WKND站点是一个示例AEM网站项目,其中包含内容(内容片段)和快速设置的React应用程序使用的GraphQL AEM端点。
《舞步》的截屏
aem-headless-quick-setup-wknd
创建Cloud Manager Git存储库后,从GitHub克隆WKND站点项目的源代码,并将其推送到Cloud Manager Git存储库。 现在,Cloud Manager可访问WKND站点项目,并将其部署到AEMas a Cloud Service环境。
《舞步》的截屏
从命令行中,从GitHub克隆示例WKND站点项目的源代码
$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git
将Cloud Manager Git存储库添加为远程存储库
选择 存储库 在顶部导航中
选择 访问存储库信息 从顶部操作栏中
执行命令位于 向Git存储库中添加远程存储库 从命令行
$ 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的 存储库信息 模式。
将WKND站点项目推送到Cloud Manager Git存储库后,无法使用Cloud Manager管道将其部署到AEMas a Cloud Service。
请记住,WKND站点项目提供React应用程序通过AEM Headless GraphQL API使用的示例内容。
《舞步》的截屏
Dev Deployment pipeline
aem-headless-quick-setup-wknd
在 存储库 选择框main
从 Git分支 选择框使用WKND站点项目中的内容引导AEMas a Cloud Service,下载并启动示例WKND React应用程序,该应用程序通过AEM Headless GraphQL API使用WKND站点的内容。
《舞步》的截屏
从命令行中,从GitHub克隆React应用程序的源代码。
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
打开文件夹 ~/Code/aem-guides-wknd-graphql/react-app
在IDE中。
在IDE中,打开文件 .env.development
.
指向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,请执行以下操作:
在IDE中,将更改保存到 .env.development
从命令行中,运行React应用程序
$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
在本地运行的React应用程序启动时 http://localhost:3000 和显示冒险列表,这些冒险是使用AEM Headless的GraphQL API从AEMas a Cloud Service获得的。
使用示例WKND React应用程序连接到AEM Headless GraphQL API并使用其内容,在AEM Author服务中创作内容,并查看React应用程序的体验如何协调更新。
《舞步》的截屏
登录到AEMas a Cloud Service创作服务
导航到 资产>文件> WKND已共享>英语>冒险
打开 骑车去犹他州南部 文件夹
选择 骑车去犹他州南部 内容片段,并选择 编辑 从顶部操作栏中
更新内容片段的某些字段,例如:
Cycling Utah's National Parks
6 Days
Intermediate
3500
/content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
选择 保存 在顶部操作栏中
选择 快速发布 从顶部操作栏的 …
刷新在上运行的React应用程序 http://localhost:3000.
在React应用程序中,选择现在更新的循环冒险,并验证对内容片段所做的内容更改。
使用相同的方法,在AEM创作服务中:
如果您不熟悉如何创建和发布新内容片段,或者无法发布现有内容片段,请观看上面的屏幕截图。
恭喜!您已成功使用AEM Headless来支持React应用程序!
要详细了解React应用程序如何使用AEMas a Cloud Service中的内容,请查看 AEM Headless指南. 本教程探讨了如何在AEM中创建内容片段,以及此React应用程序如何以JSON形式使用其内容。