在適用於能源的 Azure Data Manager 上部署 OSDU 管理員 UI

發行項
04/17/2024

本指南說明如何在 Azure Data Manager for Energy （ADME）實例之上部署 OSDU 管理員 UI。

OSDU 管理員 UI 可讓平台系統管理員管理您與其連線的 Azure Data Manager for Energy 數據分割。管理工作包括權利（使用者和群組管理）、法律標籤、架構、參考數據、檢視，以及在地圖上可視化物件。

必要條件

使用開發容器安裝Visual StudioCode。您可以使用 Linux 或 Windows 子系統 Linux 版（WSL）從本機電腦部署 OSDU 管理員 UI，建議您使用開發容器來消除工具版本、環境等的潛在衝突。
適用於能源的 Azure 數據管理員實例。
Microsoft Entra ID 應用程式註冊。
此應用程式註冊可以和用於「適用於能源的 Azure 數據管理員」實例相同的應用程式註冊。
重要

應用程式註冊需要下列 API 許可權，管理員 UI 才能正常運作。
第一次登入管理員 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 連線 or 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 Data Manager for Energy 實例。

下一步

成功管理員 UI 運作之後，您可以：

您也可以將資料內嵌至適用於能源的 Azure 資料管理員實例：

CSV 剖析器擷取教學課程。
指令清單擷取的教學課程。

參考資料

如需OSDU管理員UI的相關信息，請參閱OSDU GitLab。
如需其他部署方法（Terraform 或 Azure DevOps CI/CD 管線），請參閱 OSDU 管理員 UI DevOps。

Share via