Wdrażanie interfejsu użytkownika Administracja OSDU na podstawie usługi Azure Data Manager for Energy

Artykuł
04/17/2024

W tym przewodniku pokazano, jak wdrożyć interfejs użytkownika OSDU Administracja w oparciu o wystąpienie usługi Azure Data Manager for Energy (ADME).

Interfejs użytkownika OSDU Administracja umożliwia administratorom platformy zarządzanie partycją danych usługi Azure Data Manager for Energy, z którą się łączysz. Zadania zarządzania obejmują uprawnienia (zarządzanie użytkownikami i grupami), tagi prawne, schematy, dane referencyjne, widok i wizualizację obiektów na mapie.

Wymagania wstępne

Instalowanie programu Visual Studio Code za pomocą kontenerów deweloperskich. Istnieje możliwość wdrożenia interfejsu użytkownika OSDU Administracja z komputera lokalnego przy użyciu systemu Linux lub Podsystem Windows dla systemu Linux (WSL), zalecamy użycie kontenera deweloperskiego w celu wyeliminowania potencjalnych konfliktów wersji narzędzi, środowisk itp.
Wystąpienie usługi Azure Data Manager dla energii.
Rejestracja aplikacji Microsoft Entra ID.
Ta rejestracja aplikacji może być taka sama jak ta używana dla wystąpienia usługi Azure Data Manager for Energy.
Ważne

Następujące uprawnienia interfejsu API są wymagane w rejestracji aplikacji, aby interfejs użytkownika Administracja działał prawidłowo.
Po pierwszym zalogowaniu się do interfejsu użytkownika Administracja zażąda to niezbędnych uprawnień. Możesz również udzielić wymaganych uprawnień z wyprzedzeniem, zobacz dokumentację uprawnień interfejsu API rejestracji aplikacji.

Konfigurowanie środowiska

Użyj kontenera deweloperskiego w programie Visual Studio Code, aby wdrożyć interfejs użytkownika Administracja OSDU w celu wyeliminowania konfliktów z komputera lokalnego.
WybierzRemote - Containers | Open, aby otworzyć kontener dewelopera i sklonować repozytorium interfejsu użytkownika OSDU Administracja.
Zaakceptuj wiersz polecenia klonowania.
Po wyświetleniu monitu o szablon konfiguracji kontenera.
1. Wybierz pozycję Ubuntu.
2. Zaakceptuj wersję domyślną.
3. Nie dodawaj żadnych dodatkowych funkcji.
Po kilku minutach devcontainer jest uruchomiony.
Otwórz terminal.

Zainstaluj interfejs wiersza polecenia platformy Angular, interfejs wiersza polecenia platformy Azure, narzędzie npm i program Node Version Manager (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

Zaloguj się do interfejsu wiersza polecenia platformy Azure, wykonując polecenie w terminalu. Spowoduje to przejście do ekranu logowania.
```
az login
```
Spowoduje to przejście do ekranu logowania. Wprowadź poświadczenia i po pomyślnym wyświetleniu komunikatu o powodzeniu.
Sprawdź, czy używasz odpowiedniej subskrypcji.
```
az account show
```
W razie potrzeby użyj tego kodu, aby zmienić subskrypcję.
```
az account set --subscription <subscription-id>
```

Skonfiguruj zmienne środowiskowe

Wprowadź wymagane zmienne środowiskowe w terminalu.

 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"

Wdrażanie konta magazynu

Utwórz grupę zasobów. Pomiń ten krok, jeśli grupa zasobów już istnieje.
```
az group create \
    --name $RESOURCE_GROUP \
    --location $LOCATION
```

Utwórz konto magazynu.

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

Skonfiguruj statyczną witrynę internetową.

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

Ustaw $web uprawnienia kontenera, aby zezwolić na dostęp anonimowy.

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

Dodaj identyfikator URI przekierowania do rejestracji aplikacji.

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"

Kompilowanie i wdrażanie aplikacji internetowej

Przejdź do folderu OSDUApp.
```
cd OSDUApp/
```
Zainstaluj zależności.
```
npm install
```

Zmodyfikuj parametry w pliku konfiguracji znajdującym się w lokalizacji /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/"
  }
  ...
}

Uwaga

Interfejs API Połączenie or OSDU jest tworzony jako interfejs między użytkownikami i interfejsami API OSDU opakowującym niektóre wywołania łańcucha interfejsów API i obiekty. Obecnie zarządza wszystkimi operacjami i akcjami w obiektach projektu i scenariusza.

Skompiluj internetowy interfejs użytkownika.
```
ng build
```

Przekaż kompilację do konta magazynu.

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

Pobierz adres URL witryny internetowej.
```
echo $REDIRECT_URI
```
Otwórz adres URL witryny internetowej w przeglądarce i sprawdź, czy działa prawidłowo i nawiązał połączenie z poprawnym wystąpieniem usługi Azure Data Manager for Energy.

Następne kroki

Po pomyślnym Administracja pracy interfejsu użytkownika można wykonać następujące czynności:

Możesz również pozyskiwać dane do wystąpienia usługi Azure Data Manager for Energy:

Samouczek dotyczący pozyskiwania analizatora CSV.
Samouczek dotyczący pozyskiwania manifestu.

Informacje

Aby uzyskać informacje o interfejsie użytkownika Administracja OSDU, zobacz OSDU GitLab.
Inne metody wdrażania (potok ciągłej integracji/ciągłego wdrażania usługi Azure DevOps lub Azure DevOps) można znaleźć w temacie OSDU Administracja DevOps interfejsu użytkownika.