Menyebarkan UI Admin OSDU di atas Azure Data Manager for Energy

  • Artikel

Panduan ini menunjukkan kepada Anda cara menyebarkan UI Admin OSDU di atas instans Azure Data Manager for Energy (ADME) Anda.

UI Admin OSDU memungkinkan administrator platform mengelola partisi data Azure Data Manager for Energy yang Anda sambungkan. Tugas manajemen mencakup pemberian hak (manajemen pengguna dan grup), tag hukum, skema, data referensi, tampilan, dan visualisasikan objek di peta.

Prasyarat

  • Instal Visual Studio Code dengan Kontainer Dev. Dimungkinkan untuk menyebarkan UI Admin OSDU dari komputer lokal Anda menggunakan Linux atau Subsistem Windows untuk Linux (WSL), sebaiknya gunakan Kontainer Dev untuk menghilangkan potensi konflik versi alat, lingkungan, dll.

  • Instans Azure Data Manager for Energy.

  • Pendaftaran Aplikasi ID Microsoft Entra.
    Pendaftaran Aplikasi ini bisa sama dengan yang digunakan untuk instans Azure Data Manager for Energy.

    Penting

    Izin API berikut diperlukan pada Pendaftaran Aplikasi agar UI Admin berfungsi dengan baik.

    Setelah pertama kali masuk ke UI Admin, ia akan meminta izin yang diperlukan. Anda juga dapat memberikan izin yang diperlukan terlebih dahulu, lihat Dokumentasi Izin API Pendaftaran Aplikasi.

Penyiapan lingkungan

  1. Gunakan Kontainer Dev di Visual Studio Code untuk menyebarkan UI Admin OSDU untuk menghilangkan konflik dari komputer lokal Anda.

  2. Pilih Remote - Containers | Open untuk membuka Kontainer Pengembangan dan kloning repositori UI Admin OSDU.

    Buka di Jarak Jauh - Kontainer

  3. Terima perintah kloning.

    Cuplikan layar yang memperlihatkan kloning repositori.

  4. Ketika diminta untuk templat konfigurasi kontainer.

    1. Pilih Ubuntu.
    2. Terima versi default.
    3. Jangan tambahkan fitur tambahan apa pun.

  5. Setelah beberapa menit, devcontainer berjalan.

    Cuplikan layar yang memperlihatkan menjalankan devcontainer.

  6. Buka terminal.

    Cuplikan layar yang memperlihatkan terminal pembukaan.

  7. Instal Angular CLI, Azure CLI, npm, dan 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

    Cuplikan layar yang memperlihatkan penginstalan.

  8. Masuk ke Azure CLI dengan menjalankan perintah di terminal. Ini akan membawa Anda ke layar masuk.

    az login

  9. Ini akan membawa Anda ke layar masuk. Masukkan kredensial Anda dan setelah berhasil, Anda akan melihat pesan sukses.

    Cuplikan layar yang menunjukkan proses masuk yang berhasil.

  10. Validasi bahwa Anda menggunakan langganan yang benar.

    az account show

  11. Jika diperlukan, gunakan kode ini untuk mengubah langganan.

    az account set --subscription <subscription-id>

Mengonfigurasi variabel lingkungan

  1. Masukkan variabel lingkungan yang diperlukan di 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"

Menyebarkan akun penyimpanan

  1. Buat grup sumber daya. Lewati langkah ini jika grup sumber daya sudah ada.

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

  2. Buat akun penyimpanan.

    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

  3. Konfigurasikan situs web statis.

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

  4. Atur izin kontainer $web untuk mengizinkan akses anonim.

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

  5. Tambahkan URI pengalihan ke Pendaftaran Aplikasi.

    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"

    Cuplikan layar memperlihatkan URI pengalihan Pendaftaran Aplikasi.

Membangun dan menyebarkan aplikasi web

  1. Navigasi ke folder OSDUApp.

    cd OSDUApp/

  2. Pasang dependensi.

    npm install

  3. Ubah parameter dalam file konfigurasi yang terletak di /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/"
  }
  ...
}

    Catatan

    OSDU Koneksi or API dibangun sebagai antarmuka antara konsumen dan API OSDU yang membungkus beberapa panggilan dan objek rantai API. Saat ini, ia mengelola semua operasi dan tindakan pada objek proyek dan skenario.

  4. Membangun UI web.

    ng build

  5. Unggah build ke Akun Penyimpanan.

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

  6. Ambil URL situs web.

    echo $REDIRECT_URI

  7. Buka URL Situs Web di browser dan validasi bahwa url berfungsi dengan benar dan terhubung ke instans Azure Data Manager for Energy yang benar.

Langkah berikutnya

Setelah UI Admin berhasil berfungsi, Anda dapat:

Anda juga dapat menyerap data ke dalam instans Azure Data Manager for Energy Anda:

Referensi

Untuk informasi tentang UI Admin OSDU, lihat OSDU GitLab.
Untuk metode penyebaran lainnya (alur Terraform atau Azure DevOps CI/CD), lihat DevOps UI Admin OSDU.