验证扩展

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

undefined
undefined

AEM UI扩展可以针对扩展所属的Adobe组织中的任何AEM as a Cloud Service环境进行验证。

测试扩展是通过巧尽心思构建的URL完成的，该URL会指示AEM仅为该请求加载扩展。

https://video.tv.adobe.com/v/3417478?quality=12&learn=on&captions=chi_hans

IMPORTANT

上面的视频展示了如何使用内容片段控制台扩展来说明App Builder扩展应用程序预览和验证。但是，请务必注意，所涵盖的概念可应用于所有AEM UI扩展。

AEM UI URL

AEM内容片段控制台URL

要创建将非生产扩展挂载到AEM中的URL，必须获取该扩展所插入的AEM UI的URL。导航到AEM as a Cloud Service环境以在上验证扩展，然后打开要预览扩展的UI。

例如，要预览内容片段控制台的扩展，请执行以下操作：

登录到所需的AEM as a Cloud Service环境。
选择 内容片段 图标。
等待在浏览器中加载AEM内容片段控制台。

从浏览器的地址栏复制AEM内容片段控制台的URL，它应类似于：

code language-none
`https://experience.adobe.com/?repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin`

在定制URL以进行开发和阶段验证时，将使用此URL。如果针对其他AEM UI验证该扩展，请获取这些URL并应用以下相同步骤。

验证本地开发构建

作为本地App Builder应用程序运行AEM UI扩展

code language-shell

code language-shell
`$ aio app run ... No change to package.json was detected. No package manager install will be executed. To view your local application: -> https://localhost:9080 To view your deployed application in the Experience Cloud shell: -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080`

$ aio app run
...
No change to package.json was detected. No package manager install will be executed.

To view your local application:
  -> https://localhost:9080
To view your deployed application in the Experience Cloud shell:
  -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080

记下本地应用程序URL，上面显示为-> https://localhost:9080

最初（每次出现连接错误时），在Web浏览器中打开https://localhost:9080（或者任何本地应用程序URL），然后手动接受HTTPS证书。

将以下两个查询参数添加到AEM UI的URL

&devMode=true
&ext=<LOCAL APPLICATION URL>，通常为&ext=https://localhost:9080。

将以上两个查询参数（devMode和ext）添加为URL中的 first 查询参数。 AEM的可扩展UI使用哈希路由(#/@wknd/aem/...)，因此在#不起作用后错误地修复了参数。

预览URL应如下所示：

code language-none
`https://experience.adobe.com/?devMode=true&ext=https://localhost:9080&repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin`

将预览URL复制并粘贴到浏览器中。
- 您可能必须先为本地应用程序的主机(https://localhost:9080) 接受HTTPS证书，然后再定期接受。
AEM UI将加载并插入扩展程序的本地版本以进行验证。

IMPORTANT

请记住，在使用此方法时，正在开发的扩展仅影响您的体验，而AEM UI的所有其他用户体验的UI没有插入的扩展。

验证阶段生成

确保暂存工作区处于活动状态(或者使用任何Workspace进行验证)。

code language-shell
`$ aio app use -w Stage`

将任何更改合并到.env和.aio。

部署更新后的App Builder扩展应用程序。如果未登录，请先运行aio login。

code language-shell

code language-shell
$ aio app deploy ... Your deployed actions: web actions: -> https://98765-123aquarat.adobeio-static.net/api/v1/web/aem-cf-console-admin-1/generic To view your deployed application: -> https://98765-123aquarat.adobeio-static.net/index.html To view your deployed application in the Experience Cloud shell: -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://98765-123aquarat.adobeio-static.net/index.html New Extension Point(s) in Workspace 'Production': 'aem/cf-console-admin/1' Successful deployment 🏄

$ aio app deploy
...
Your deployed actions:
web actions:
  -> https://98765-123aquarat.adobeio-static.net/api/v1/web/aem-cf-console-admin-1/generic
To view your deployed application:
  -> https://98765-123aquarat.adobeio-static.net/index.html
To view your deployed application in the Experience Cloud shell:
  -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://98765-123aquarat.adobeio-static.net/index.html
New Extension Point(s) in Workspace 'Production': 'aem/cf-console-admin/1'
Successful deployment 🏄

将以下两个查询参数添加到AEM UI的URL

&devMode=true
&ext=<DEPLOYED APPLICATION URL>

将以上两个查询参数（devMode和ext）添加为URL中的 first 查询参数，因为可扩展的AEM UI使用哈希路由(#/@wknd/aem/...)，因此，在#不起作用后错误地发布修复了参数。

预览URL应如下所示：

code language-none
`https://experience.adobe.com/?devMode=true&ext=https://98765-123aquarat.adobeio-static.net/index.html&repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin`

将预览URL复制并粘贴到浏览器中。
AEM内容片段控制台将插入在中部署到暂存工作区的扩展版本。可以将此暂存URL共享给QA或商业用户进行验证。

请记住，在使用此方法时，仅当使用手工暂存URL访问时，暂存扩展才会插入到AEM内容片段控制台中。

可以通过再次运行aio app deploy来更新已部署的扩展，并且这些更改会在使用预览URL时自动反映。
若要移除扩展以进行验证，请运行aio app undeploy。

预览小书签

为便于创建上述预览和预览URL，可创建加载扩展的JavaScript小书签。

下面的小书签预览了https://localhost:9080上扩展的本地开发内部版本。要预览暂存内部版本，请在将previewApp变量设置为已部署的App Builder应用程序的URL的情况下创建一个小书签。

在浏览器中创建书签。
编辑书签。
为书签提供一个有意义的名称，例如AEM UI Extension Preview (localhost:9080)。

将书签的URL设置为以下代码：

code language-javascript

code language-javascript
javascript: (() => { /* Change this to the URL of the local App Builder app if not using https://localhost:9080 / const previewApp = 'https://localhost:9080'; const repo = new URL(window.location.href).searchParams.get('repo'); if (window.location.href.match(/https:\/\/experience\.adobe\.com\/.\/aem\/cf\/(editor\|admin)\/.*/i)) { window.location = `https://experience.adobe.com/?devMode=true&ext=${previewApp}&repo=${repo}${window.location.hash}`; } })();

javascript: (() => {
    /* Change this to the URL of the local App Builder app if not using https://localhost:9080 */
    const previewApp = 'https://localhost:9080';

    const repo = new URL(window.location.href).searchParams.get('repo');

    if (window.location.href.match(/https:\/\/experience\.adobe\.com\/.*\/aem\/cf\/(editor|admin)\/.*/i)) {
        window.location = `https://experience.adobe.com/?devMode=true&ext=${previewApp}&repo=${repo}${window.location.hash}`;
    }
})();

导航到要加载预览扩展的可扩展AEM UI，然后单击小书签。

TIP

如果App Builder扩展未加载，则在使用时&ext=https://localhost:9080，请直接在浏览器选项卡中打开该主机和端口，并接受自签名证书。然后重试小书签。

recommendation-more-help

4859a77c-7971-4ac9-8f5c-4260823c6f69