使用本地AEM SDK快速设置AEM Headless setup
AEM Headless快速设置允许您使用AEM Headless的实际操作,它使用WKND Site示例项目中的内容以及一个通过AEM Headless GraphQL API使用内容的示例React应用程序(SPA)。 本指南使用 AEMAS A CLOUD SERVICESDK.
前提条件 prerequisites
应在本地安装以下工具:
1.安装AEM SDK aem-sdk
此设置使用 AEMAS A CLOUD SERVICESDK 以探索AEM GraphQL API。 此部分提供有关安装AEM SDK并在创作模式下运行的快速指南。 有关设置本地开发环境的更详细的指南 可在此处找到.
-
导航至 软件分发门户 > AEMas a Cloud Service 并下载最新版本的 AEM SDK.
-
解压缩下载内容并复制快速入门jar (
aem-sdk-quickstart-XXX.jar
)到专用文件夹,即~/aem-sdk/author
. -
将jar文件重命名为
aem-author-p4502.jar
.此
author
名称指定快速入门Jar以创作模式启动。 此p4502
指定快速入门在端口4502上运行。 -
要安装和启动AEM实例,请在包含jar文件的文件夹下打开命令提示符,然后运行以下命令:
code language-shell $ cd ~/aem-sdk/author $ java -jar aem-author-p4502.jar
-
提供管理员密码作为
admin
. 可接受任何管理员密码,但建议使用admin
用于本地开发,减少重新配置的需要。 -
当AEM服务安装完成后,新的浏览器窗口应打开至 http://localhost:4502.
-
使用用户名登录
admin
和AEM初始启动期间选择的密码(通常为admin
)。
2.安装示例内容 install-sample-content
示例内容来自 WKND引用站点 用于加速教程。 WKND是一个虚构的生活风格品牌,通常与AEM培训一起使用。
WKND站点包含公开 GraphQL端点. 在实际的实施中,请按照记录的步骤执行以下操作 包含GraphQL端点 在您的客户项目中。 A CORS 也已打包为WKND站点的一部分。 要授予对外部应用程序的访问权限,需要进行CORS配置,请参阅 CORS 可在下方找到。
-
下载适用于WKND站点的最新编译的AEM包: aem-guides-wknd.all-x.x.x.zip.
note note NOTE 确保下载与AEMas a Cloud Service兼容的标准版本,并且 非 该 classic
版本。 -
从 AEM开始 菜单,导航到 工具 > 部署 > 包.
-
单击 上传包 并选择在之前步骤中下载的WKND包。 单击 安装 可安装软件包。
-
从 AEM开始 菜单,导航到 资产 > 文件 > WKND已共享 > 英语 > 冒险.
这是构成WKND品牌推广的各种冒险的所有资产的文件夹。 这包括传统的媒体类型(如图像和视频)以及特定于AEM的媒体(如 内容片段.
-
单击 怀俄明州下山滑雪 文件夹,然后单击 怀俄明州下坡滑雪内容片段 信息卡:
-
内容片段编辑器将打开,以显示怀俄明州下滑山滑雪探险活动。
观察各种字段,如 标题, 描述、和 活动 定义片段。
内容片段 是在AEM中管理内容的其中一种方式。 内容片段是可重复使用的、与呈现无关的内容,由结构化数据元素(如文本、富文本、日期或对其他内容片段的引用)组成。 稍后在快速设置中会更详细地探讨内容片段。
-
单击 取消 以关闭片段。 您可以随意导航到其他某些文件夹,并探索其他冒险内容。
3.下载并运行WKND React应用程序 sample-app
本教程的目标之一是演示如何使用GraphQL API从外部应用程序使用AEM内容。 本教程使用示例React应用程序。 React应用程序可随意简化,以专门实现与AEM GraphQL API的集成。
-
打开新的命令提示符并从GitHub克隆示例React应用程序:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git $ cd aem-guides-wknd-graphql/react-app
-
在中打开React应用程序
aem-guides-wknd-graphql/react-app
在您选择的IDE中。 -
在IDE中,打开文件
.env.development
在/.env.development
. 验证REACT_APP_AUTHORIZATION
行未注释,并且文件声明以下变量:code language-plain REACT_APP_HOST_URI=http://localhost:4502 REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json # Use Authorization when connecting to an AEM Author environment REACT_APP_AUTHORIZATION=admin:admin
确保
REACT_APP_HOST_URI
指向您的本地AEM SDK。 为了方便起见,此快速入门将React应用程序连接到 AEM创作. 作者 服务需要身份验证,因此应用程序使用admin
用户建立连接。 将应用程序连接到AEM Author是开发过程中的一种常见做法,因为它有助于在不发布更改的情况下快速迭代内容。note note NOTE 在生产方案中,应用程序将连接到AEM Publish 环境。 有关更多详细信息,请参见 生产部署 部分。 -
安装和启动React应用程序:
code language-shell $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start
-
新的浏览器窗口会自动打开应用程序,其网址为 http://localhost:3000.
此时将显示AEM中的冒险内容列表。
-
单击其中一个冒险图像以查看冒险详细信息。 系统会向AEM发出请求,要求返回冒险的细节。
-
使用浏览器的开发人员工具检查 网络 请求。 查看 XHR 请求并观察多个GET请求
/graphql/execute.json/...
. 此路径前缀将调用AEM持久查询端点,并选取要使用前缀后的名称和编码参数执行的持久查询。
4.在AEM中编辑内容
在React应用程序运行时,对AEM中的内容进行更新,并查看应用程序中是否反映了更改。
-
导航到AEM http://localhost:4502.
-
导航到 资产 > 文件 > WKND已共享 > 英语 > 冒险 > 巴厘岛冲浪营.
-
单击 巴厘岛冲浪营 内容片段,用于打开内容片段编辑器。
-
修改 标题 和 描述 探险之旅。
-
单击 保存 以保存更改。
-
刷新React应用程序,网址为 http://localhost:3000 要查看更改,请执行以下操作:
5.浏览GraphiQL graphiql
-
打开 GraphiQL 导航到 工具 > 常规 > GraphQL查询编辑器
-
选择左侧的现有持久查询,然后运行它们以查看结果。
note note NOTE Graphiql工具和GraphQL API是 稍后在教程中会进行更详细的探讨.
恭喜! congratulations
恭喜,您现在有一个外部应用程序正在使用GraphQL的AEM内容。 欢迎在React应用程序中检查代码,并继续尝试修改现有内容片段。