Déployer OSDU Admin UI sur Azure Data Manager for Energy

Article
04/19/2024

Ce guide vous montre comment déployer l’outil OSDU Admin UI sur votre instance Azure Data Manager for Energy (ADME).

L’outil OSDU Admin UI permet aux administrateurs de plateforme de gérer la partition de données Azure Data Manager for Energy à laquelle vous le connectez. Les tâches de gestion comprennent les droits d’utilisation (gestion des utilisateurs et des groupes), les étiquettes légales, les schémas, les données de référence, ainsi que l’affichage et la visualisation d’objets sur une carte.

Prérequis

Installez Visual Studio Code avec des conteneurs de développement. Il est possible de déployer l’outil OSDU Admin UI à partir de votre ordinateur local à l’aide de Linux ou du Sous-système Windows pour Linux (WSL), et nous vous recommandons d’utiliser un conteneur de développement pour éliminer les conflits potentiels entre les versions des outils, des environnements, etc.
Une instance Azure Data Manager for Energy.
Un enregistrement de l’application Microsoft Entra ID.
Cette inscription d’application peut être identique à celle utilisée pour l’instance Azure Data Manager for Energy.
Important

Les autorisations d’API suivantes sont requises sur l’inscription d’application pour qu’Admin UI fonctionne correctement.
Lors de la première connexion à Admin UI, elle demande les autorisations nécessaires. Vous pouvez également accorder les autorisations requises à l’avance. Pour ce faire, consultez la documentation sur les autorisations d’API de l’inscription d’application.

Configuration de l’environnement

Utilisez le conteneur de développement dans Visual Studio Code pour déployer OSDU Admin UI afin d’éliminer les conflits sur votre ordinateur local.
Sélectionnez Remote - Containers | Open pour ouvrir un conteneur de développement et cloner le dépôt de l’interface utilisateur de l’administrateur OSDU.
Acceptez l’invite de clonage.
Lorsque vous êtes invité à entrer un modèle de configuration de conteneur.
1. sélectionnez Ubuntu.
2. Acceptez la version par défaut.
3. N’ajoutez aucune fonctionnalité supplémentaire.
Après quelques minutes, le conteneur de développement s’exécute.
Ouvrez le terminal.

Installez Angular CLI, Azure CLI, npm et 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

Connectez-vous à Azure CLI en exécutant la commande sur le terminal. Vous accédez à l’écran de connexion.
```
az login
```
Vous accédez à l’écran de connexion. Entrez vos informations d’identification et, si l’opération réussit, vous voyez un message de réussite.
Validez que vous utilisez l’abonnement approprié.
```
az account show
```
Si nécessaire, utilisez ce code pour changer d’abonnement.
```
az account set --subscription <subscription-id>
```

Configuration des variables d’environnement

Entrez les variables d’environnement nécessaires sur le terminal.

 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"

Déployer un compte de stockage

Créez un groupe de ressources. Ignorez cette étape si le groupe de ressources existe déjà.
```
az group create \
    --name $RESOURCE_GROUP \
    --location $LOCATION
```

Créez un compte de stockage.

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

Configurez le site web statique.

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

Définissez des autorisations de conteneur $web pour autoriser l’accès anonyme.

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

Ajoutez l’URI de redirection à l’inscription de l’application.

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"

Générer et déployer l’application web

Accédez au dossier OSDUApp.
```
cd OSDUApp/
```
Installez les dépendances.
```
npm install
```

Modifiez les paramètres dans le fichier de configuration situé dans /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/"
  }
  ...
}

Remarque

L’API OSDU Connector est créée comme interface entre les consommateurs et les API OSDU enveloppant certains appels et objets de chaîne d’API. Actuellement, elle gère toutes les opérations et actions sur les objets de projet et de scénario.

Créez l’interface utilisateur web.
```
ng build
```

Chargez la build dans le compte de stockage.

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

Récupérez l’URL du site web.
```
echo $REDIRECT_URI
```
Ouvrez l’URL du site web dans le navigateur et vérifiez qu’elle fonctionne correctement et qu’elle est connectée à l’instance Azure Data Manager for Energy appropriée.

Étapes suivantes

Une fois qu’Admin UI fonctionne correctement, vous pouvez :

Vous pouvez également ingérer les données dans votre instance Azure Data Manager pour Energy :

Références

Pour plus d’informations sur OSDU Admin UI, consultez OSDU GitLab.
Pour obtenir d’autres méthodes de déploiement (Terraform ou pipeline CI/CD Azure DevOps), consultez OSDU Admin UI DevOps.