你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

在 Azure 的能源数据管理器上部署 OSDU Admin UI

项目
04/19/2024

本指南介绍了如何在 Azure 能源数据管理器 (ADME) 实例上部署 OSDU Admin UI。

OSDU Admin UI 让平台管理员能够为连接到的能源数据分区管理 Azure 数据管理器。管理任务包括权利（用户和组管理）、法律标记、架构、参考数据、在地图上查看和可视化对象。

先决条件

安装 Visual Studio Code 和开发容器。可以使用 Linux 或适用于 Linux 的 Windows 子系统 (WSL) 从本地计算机部署 OSDU Admin UI，建议使用开发容器来避免工具版本和环境等的潜在冲突。
Azure Data Manager for Energy 实例。
一个 Microsoft Entra ID 应用注册。
此应用注册可以与用于 Azure 能源数据管理器实例的应用注册相同。
重要

管理员 UI 的应用注册需要以下 API 权限才能正常运行。
首次登录到管理员 UI 时，它将请求必要的权限。还可以提前授予所需的权限，请参阅应用注册 API 权限文档。

环境设置

使用 Visual Studio Code 中的开发容器部署 OSDU Admin UI，以避免本地计算机中的冲突。
选择 Remote - Containers | Open 打开开发容器并克隆 OSDU Admin UI 存储库。
同意克隆提示。
当系统提示要求容器配置模板时。
1. 选择 Ubuntu。
2. 同意默认值。
3. 不要添加任何额外的功能。
开发容器将在数分钟后运行。
打开终端。

安装 Angular CLI、Azure CLI、npm 和 Node 版本管理器 (NVM)。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && \
nvm install 14.17.3 && \
export NG_CLI_ANALYTICS=false && \ 
npm install -g @angular/cli@13.3.9 && \
curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

通过在终端上执行命令以登录到 Azure CLI。它会转到登录屏幕。
```
az login
```
它会转到登录屏幕。输入凭据并成功后，你会看到一条成功消息。
验证是否使用正确的订阅。
```
az account show
```

如果需要，请使用此代码更改订阅。

az account set --subscription <subscription-id>

配置环境变量

在终端上输入要求的环境变量。

 export ADMINUI_CLIENT_ID="" ## App Registration to be used by OSDU Admin UI, usually the client ID used to provision ADME
 export WEBSITE_NAME="" ## Unique name of the static web app or storage account that will be generated. Storage account name must be between 3 and 24 characters in length and use numbers and lower-case letters only.
 export RESOURCE_GROUP="" ## Name of resource group
 export LOCATION="" ## Azure region to deploy to, i.e. "westeurope"

部署存储帐户

创建资源组。如果资源组已存在，请跳过此步骤。

az group create \
    --name $RESOURCE_GROUP \
    --location $LOCATION

创建存储帐户。

az storage account create \
    --resource-group $RESOURCE_GROUP \
    --location $LOCATION \
    --name $WEBSITE_NAME \
    --sku Standard_LRS \
    --public-network-access Enabled \
    --allow-blob-public-access true

配置静态网站。

az storage blob service-properties update \
    --account-name $WEBSITE_NAME \
    --static-website \
    --404-document index.html \
    --index-document index.html

设置 $web 容器权限以允许匿名访问。

az storage container set-permission \
    --name '$web' \
    --account-name $WEBSITE_NAME \
    --public-access blob

将重定向 URI 添加到应用注册。

export REDIRECT_URI=$(az storage account show --resource-group $RESOURCE_GROUP --name $WEBSITE_NAME --query "primaryEndpoints.web") && \
echo "Redirect URL: $REDIRECT_URI" && \
echo "Add the redirect URI above to the following App Registration's Single-page Application (SPA) section: https://ms.portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/~/Authentication/appId/$ADMINUI_CLIENT_ID/isMSAApp~/false"

生成并部署 Web 应用

导航到 OSDUApp 文件夹。
```
cd OSDUApp/
```
安装依赖项。
```
npm install
```

修改位于 /src/config/config.json 的配置文件中的参数。

{
    "mapboxKey": "key", // This is optional for the access token from Mapbox.com and used to visualize data on the map feature.
    ...
    "data_partition": "<adme_data_partition>", // ADME Data Partition ID (i.e. opendes)
  "idp": {
     ...
     "tenant_id": "<tenant_id>", // Entra ID tenant ID
     "client_id": "<client_id>", // App Registration ID to use for the admin UI, usually the same as the ADME App Registration ID, i.e. "6ee7e0d6-0641-4b29-a283-541c5d00655a"
     "redirect_uri": "<redirect_uri>", // This is the website URL ($REDIRECT_URI), i.e. "https://contoso.z1.web.core.windows.net"
     "scope": "<client_id>/.default" // Scope of the ADME instance, i.e. "6ee7e0d6-0641-4b29-a283-541c5d00655a/.default"
  },
  "api_endpoints": { // Just replace contoso.energy.azure.com with your ADME_URL after removing https or wwww in all the API endpoints below.
     "entitlement_endpoint": "https://contoso.energy.azure.com/api/", 
     "storage_endpoint": "https://contoso.energy.azure.com/api/",
     "search_endpoint": "https://contoso.energy.azure.com/api/",
     "legal_endpoint": "https://contoso.energy.azure.com/api/",
     "schema_endpoint": "https://contoso.energy.azure.com/api/",
     "osdu_connector_api_endpoint":"osdu_connector", // Optional. API endpoint of the OSDU Connector API*
     "file_endpoint": "https://contoso.energy.azure.com/api/",
     "graphAPI_endpoint": "https://graph.microsoft.com/v1.0/",
     "workflow_endpoint": "https://contoso.energy.azure.com/api/"
  }
  ...
}

注意

OSDU 连接器 API 是使用者与 OSDU API 之间的接口，它包装了一些 API 链调用和对象。目前，它管理项目和方案对象上的所有操作和动作。

构建 Web UI。
```
ng build
```

将构建上传到存储帐户。

az storage blob upload-batch \
    --account-name $WEBSITE_NAME \
    --source ./dist/OSDUApp \
    --destination '$web' \
    --overwrite

提取网站 URL。
```
echo $REDIRECT_URI
```
在浏览器中打开网站 URL，并验证它是否正常工作，然后连接到正确的 Azure 能源数据管理器实例。

后续步骤

成功运行管理员 UI 后，可以：

还可以将数据引入 Azure Data Manager for Energy 实例：

参考

有关 OSDU Admin UI 的信息，请参阅 OSDU GitLab。
有关其他部署方法（Terraform 或 Azure DevOps CI/CD 管道），请参阅 OSDU Admin UI DevOps。