在用於能源產業的 Azure 資料管理員執行個體上部署 OSDU 系統管理 UI

文章
05/30/2024

本指南說明如何在用於能源產業的 Azure 資料管理員 (ADME) 執行個體上部署 OSDU 系統管理 UI。

OSDU 系統管理 UI 可讓平台管理員管理您連線的目的地用於能源產業的 Azure 資料管理員資料分割。管理工作包括權利 (使用者和群組管理)、法律標籤、結構描述、參考資料、檢視，以及地圖上的視覺物件。

必要條件

使用開發容器安裝 Visual Studio Code。您可以使用 Linux 或 Windows 子系統 Linux 版 (WSL) 從本機電腦部署 OSDU 管理員 UI，建議您使用開發容器來消除工具版本、環境等的潛在衝突。
用於能源產業的 Azure 資料管理員執行個體。
Microsoft Entra ID 應用程式註冊。
此應用程式註冊可能與用於「用於能源產業的 Azure 資料管理員」執行個體的應用程式註冊相同。管理員 UI 的應用程式註冊需要下列 API 權限才能正常運作。
第一次登入管理員 UI 時，將會要求必要的權限。您也可以事先授與必要的權限，請參閱應用程式註冊 API 權限文件。

環境設定

使用 Visual Studio Code 中的開發容器來部署 OSDU 管理員 UI，以消除本機電腦的衝突。
選取 Remote - Containers | Open 以開啟開發容器，並複製 OSDU 管理員 UI 存放庫。
接受複製提示。
當系統提示您輸入容器設定範本時。
1. 選取 Ubuntu。
2. 接受預設版本。
3. 請勿新增任何額外的功能。
幾分鐘後，devcontainer 就會執行。
開啟終端機。

安裝 Angular CLI、Azure CLI、npm 和節點版本管理員 (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 鏈結呼叫和物件。目前，其會管理專案和案例物件上的所有作業和動作。

如果您無法授與必要步驟中所定義應用程式的存取權，請從 src/config/environments/environment.ts中移除User.Read、 User.ReadBasic.All 和 Application.Read.All 。拿掉這些許可權會停用管理員 UI，將使用者和應用程式的 OID 分別轉換成使用者名稱和應用程式名稱，因此會停用從名稱解析 OID 的自動完成功能。
建置 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 管理員 UI 的相關資訊，請參閱 OSDU GitLab。
如需其他部署方法 (Terraform 或 Azure DevOps CI/CD 管線)，請參閱 OSDU 管理員 UI DevOps。

分享方式：