Statikus webalkalmazás létrehozása és üzembe helyezése az Azure-ban

Cikk
10/21/2023

Ebben az oktatóanyagban helyileg létrehoz és üzembe helyez egy React/TypeScript ügyfélalkalmazást egy GitHub-művelettel rendelkező Azure Static Web Appban. A React alkalmazás lehetővé teszi egy kép elemzését a Cognitive Services Computer Vision használatával.

Mintakód

Meglévő Azure-előfizetés létrehozása vagy használata

Aktív előfizetéssel rendelkező Azure-felhasználói fiókra lesz szüksége. Hozzon létre egyet ingyen.

Előfeltételek

Node.js és npm – telepítve a helyi gépen.
Visual Studio Code – telepítve a helyi gépre.
- Azure Static Web Apps – a React alkalmazás üzembe helyezésére szolgál az Azure Static Web Appban.
Git – a GitHubra való leküldéshez használatos – amely aktiválja a GitHub-műveletet.
GitHub-fiók – elágazáshoz és adattárba való leküldéshez
Használja az Azure Cloud Shellt a Bash-környezet használatával.
Az Azure-fiókján rendelkeznie kell egy hozzárendelt Cognitive Services-közreműködői szerepkörrel, hogy elfogadhassa a felelősségteljes MI-használatra vonatkozó feltételeket, és létrehozhasson egy erőforrást. Ha hozzá szeretné rendelni ezt a szerepkört a fiókjához, kövesse a Szerepkörök hozzárendelése dokumentáció lépéseit, vagy forduljon a rendszergazdához.

Mi az az Azure Static webalkalmazás?

Statikus webalkalmazások létrehozásakor számos lehetőség közül választhat az Azure-ban, attól függően, hogy milyen mértékű funkcionalitás és vezérlés érdekli. Ez az oktatóanyag a legegyszerűbb szolgáltatásra összpontosít, számos választási lehetőséggel, így az előtérbeli kódra összpontosíthat, nem pedig az üzemeltetési környezetre.

A React (create-react-app) a következő funkciókat biztosítja:

Üzenet megjelenítése, ha a Cognitive Services Computer Vision Azure-kulcsa és végpontja nem található
Lehetővé teszi egy kép elemzését a Cognitive Services Computer Vision használatával
- Adjon meg egy nyilvános kép URL-címét, vagy elemezze a gyűjteményből származó képet
- Ha az elemzés befejeződött
  - Kép megjelenítése
  - A Computer Vision JSON eredményeinek megjelenítése

Partial browser screenshot of React Cognitive Service Computer Vision sample results.

A statikus webalkalmazás üzembe helyezéséhez használjon egy GitHub-műveletet, amely akkor indul el, amikor leküldés történik egy adott ágba:

GitHub-titkos kulcsok beszúrása a Computer Vision kulcshoz és végponthoz a buildbe
Létrehozza a React (create-react-app) ügyfelet
Az eredményként kapott fájlok áthelyezése az Azure Static Web App-erőforrásba

1. A mintaadattár elágazása

Az adattár elágaztatása ahelyett, hogy csak a helyi számítógépre klónozza, hogy saját GitHub-adattárat használhasson a módosítások leküldéséhez.

Nyisson meg egy külön böngészőablakot vagy lapot, és jelentkezzen be a GitHubra.

Lépjen a GitHub-mintaadattárhoz.

https://github.com/Azure-Samples/js-e2e-client-cognitive-services

A lap jobb felső részén válassza az Elágazás lehetőséget.
Válassza a Kód lehetőséget, majd másolja ki az elágazás helyének URL-címét.

2. Helyi fejlesztési környezet létrehozása

Terminál- vagy bash-ablakban klónozza az elágazást a helyi számítógépre. Cserélje le YOUR-ACCOUNT-NAME a GitHub-fiók nevére.
```
git clone https://github.com/YOUR-ACCOUNT-NAME/js-e2e-client-cognitive-services
```
Váltson az új könyvtárra, és telepítse a függőségeket.
```
cd js-e2e-client-cognitive-services && npm install
```
A telepítési lépés telepíti a szükséges függőségeket, beleértve a @azure/cognitiveservices-computervision szolgáltatást is.

3. A helyi minta futtatása

Futtassa a mintát.
```
npm start
```
Állítsa le az alkalmazást. Zárja be a terminálablakot, vagy használja control+c a terminálon.

4. Az erőforráscsoport létrehozása

Terminálon vagy Bash-rendszerhéjon adja meg az Azure CLI-parancsot egy Azure-erőforráscsoport létrehozásához a következő néven rg-demo:

az group create \
    --location eastus \
    --name rg-demo \
    --subscription YOUR-SUBSCRIPTION-NAME-OR-ID

5. Computer Vision-erőforrás létrehozása

Az erőforráscsoport létrehozása lehetővé teszi az erőforrások egyszerű megtalálását és törlését, ha elkészült. Ehhez az erőforrástípushoz meg kell egyeznie a Felelős használat szerződéssel. Az alábbi lista segítségével megtudhatja, hogyan hozhatja létre gyorsan a megfelelő erőforrást:

Az első Computer Vision-erőforrás – elfogadja a felelősségteljes használatról szóló megállapodást
További Computer Vision – már megállapodtak a felelős használatról szóló megállapodásban

6. Az első Computer Vision-erőforrás létrehozása

Ha ez az első AI-szolgáltatása, létre kell hoznia a szolgáltatást a portálon keresztül, és el kell fogadnia a felelős használati szerződést az erőforrás-létrehozás részeként. Ha nem ez az első erőforrás, amely felelősségteljes használati szerződést igényel, létrehozhatja az erőforrást az Azure CLI-vel, amely a következő szakaszban található.

Az alábbi táblázat segítségével hozhatja létre az erőforrást az Azure Portalon.

Beállítás	Érték
Erőforráscsoport	rg-demo
Név	demo-ComputerVision
SKU	S1
Hely	eastus

7. Hozzon létre egy további Computer Vision-erőforrást

Futtassa a következő parancsot a Computer Vision-erőforrás létrehozásához:

az cognitiveservices account create \
    --name demo-ComputerVision \
    --resource-group rg-demo \
    --kind ComputerVision \
    --sku S1 \
    --location eastus \
    --yes

8. Computer Vision-erőforrásvégpont és kulcsok lekérése

Az eredmények között keresse meg és másolja ki a properties.endpoint. Erre később lesz szüksége.

...
"properties":{
    ...
    "endpoint": "https://eastus.api.cognitive.microsoft.com/",
    ...
}
...

A kulcsok lekéréséhez futtassa az alábbi parancsot .

az cognitiveservices account keys list \
--name demo-ComputerVision \
--resource-group rg-demo

Másolja ki az egyik kulcsot, erre később lesz szüksége.

{
  "key1": "8eb7f878bdce4e96b26c89b2b8d05319",
  "key2": "c2067cea18254bdda71c8ba6428c1e1a"
}

9. Környezeti változók hozzáadása a helyi környezethez

Az erőforrás használatához a helyi kódnak rendelkezésre kell állnia a kulcsnak és a végpontnak. Ez a kódbázis a környezeti változókban tárolja azokat:

REACT_APP_AZURE_COMPUTER_VISION_KEY
REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT

Futtassa a következő parancsot a változók környezethez való hozzáadásához.

Bash
Cmd

export REACT_APP_AZURE_COMPUTER_VISION_KEY="REPLACE-WITH-YOUR-KEY"
export REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT="REPLACE-WITH-YOUR-ENDPOINT"

set REACT_APP_AZURE_COMPUTER_VISION_KEY="REPLACE-WITH-YOUR-KEY"
set REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT="REPLACE-WITH-YOUR-ENDPOINT"

10. Környezeti változók hozzáadása a távoli környezethez

Az Azure Static-webalkalmazások használatakor a környezeti változókat, például a titkos kulcsokat át kell adni a GitHub-műveletből a statikus webalkalmazásnak. A GitHub-művelet létrehozza az alkalmazást, beleértve az adattár GitHub-titkos kulcsából átadott Computer Vision-kulcsot és végpontot, majd leküldi a kódot a környezeti változókkal együtt a statikus webalkalmazásba.

Egy webböngészőben a GitHub-adattárban válassza a Gépház, majd a Titkos kódok, majd az Új tárház titkos kódja lehetőséget.
Adja meg az előző szakaszban használt végpont nevét és értékét. Ezután hozzon létre egy másik titkos kulcsot ugyanazzal a névvel és értékkel, mint amelyet az előző szakaszban használt.

11. Helyi react alkalmazás futtatása ComputerVision-erőforrással

Indítsa újra az alkalmazást a parancssorban:
```
npm start
```
Hagyja üresen a szövegmezőt, és jelöljön ki egy képet az alapértelmezett katalógusból, és válassza az Elemzés gombot.

A rendszer véletlenszerűen választja ki a képet a rendszerképek katalógusából ./src/DefaultImages.js.
Az Elemzés gombra kattintva megtekintheti a többi képet és eredményt.

12. A helyi ág leküldése a GitHubra

A Visual Studio Code terminálban küldje le a helyi ágat main a távoli adattárba.

git push origin main

Nem kellett véglegesítenie a módosításokat, mert még nem történt módosítás.

13. Statikus webalkalmazás-erőforrás létrehozása

Válassza az Azure ikont , majd kattintson a jobb gombbal a Static Web Apps szolgáltatásra, majd válassza a Statikus webalkalmazás létrehozása (Speciális) lehetőséget.
Ha egy előugró ablak megkérdezi, hogy folytatni szeretné-e az ágat, válassza a main Folytatás lehetőséget.

Adja meg a következő adatokat a következő mezőkben, és egyenként jelenik meg.

Mezőnév	Érték
Válasszon egy erőforráscsoportot az új erőforrásokhoz.	Válassza ki a ComputerVision-erőforráshoz létrehozott erőforráscsoportot. `demo-ComputerVision`
Adja meg az új statikus webalkalmazás nevét.	`Demo-ComputerVisionAnalyzer`
Díjszabási lehetőség kiválasztása	Válassza az ingyenes lehetőséget.
Válassza ki az alkalmazáskód helyét.	Válassza ki ugyanazt a helyet, amelyet az erőforráscsoport létrehozásakor választott. `eastus`
Az alapértelmezett projektstruktúra konfigurálásához válassza a buildbeállítást.	`React`
Válassza ki az alkalmazáskód helyét.	`/`
Adja meg az Azure Functions-kód helyét.	Adja meg az alapértelmezett értéket.
Adja meg a build kimenetének elérési útját az alkalmazás helyéhez viszonyítva.	`build`

14. A GitHub-művelet frissítése titkos környezeti változókkal

A Computer Vision-kulcs és a végpont az adattár titkos kulcsgyűjteményében található, de még nem szerepel a GitHub-műveletben. Ez a lépés hozzáadja a kulcsot és a végpontot a művelethez.

Az Azure-erőforrás létrehozásakor végrehajtott módosítások lekérése a GitHub-műveletfájl lekéréséhez.
```
git pull origin main
```

A Visual Studio Code-szerkesztőben szerkessze az itt található ./.github/workflows/ GitHub Action-fájlt a titkos kódok hozzáadásához.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - from-local
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - from-local

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RANDOM_NAME_HERE }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT: ${{secrets.REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT}}
          REACT_APP_AZURE_COMPUTER_VISION_KEY:  ${{secrets.REACT_APP_AZURE_COMPUTER_VISION_KEY}}

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RANDOM_NAME_HERE }}
          action: "close"

Adja hozzá és véglegesítse a módosítást a helyi main ágban.
```
git add . && git commit -m "add secrets to action"
```
Küldje el a módosítást a távoli adattárba, és hozzon létre egy új buildelési és üzembe helyezési műveletet az Azure Static-webalkalmazásban.
```
git push origin main
```

15. A GitHub Action buildelési folyamatának megtekintése

Egy webböngészőben nyissa meg az oktatóanyaghoz tartozó GitHub-adattárat, és válassza a Műveletek lehetőséget.
Válassza ki a legfelső buildet a listában, majd válassza a Build and Deploy Job (Build and Deploy Job ) lehetőséget a bal oldali menüben a buildelési folyamat megtekintéséhez. Várjon, amíg a buildelés és üzembe helyezés sikeresen befejeződik.

16. Távoli Azure statikus webhely megtekintése böngészőben

A Visual Studio Code-ban válassza a jobb szélső menüBen az Azure ikont, majd válassza a Statikus webalkalmazást, majd kattintson a jobb gombbal a Webhely tallózása parancsra, majd a Megnyitás gombra a nyilvános statikus webhely megtekintéséhez.

Select `Browse site`, then select `Open` to view the public static web site.

A webhely URL-címét a következő helyen találja:

az Erőforrás Azure Portalján, az Áttekintés lapon.
a GitHub-művelet buildelési és üzembe helyezési kimenete a webhely URL-címével rendelkezik a szkript végén

17. Erőforrások eltávolítása statikus webalkalmazáshoz

Miután elvégezte ezt az oktatóanyagot, el kell távolítania az erőforráscsoportot, amely tartalmazza a Computer Vision erőforrást és a Statikus webalkalmazást, hogy biztosan ne kelljen többet fizetnie a használatért.

A VS Code-ban válassza ki az Azure Explorert, majd kattintson a jobb gombbal az előfizetés alatt felsorolt erőforráscsoportra, és válassza a Törlés lehetőséget.

Partial screen shot of VS Code, selecting resource group from list of resource groups, then right-clicking to select `Delete`.

Az erőforráscsoport törléséhez használja az Azure CLI parancsot egy terminálban:

az group delete --name rg-demo  -y

Ez a parancs eltarthat néhány percig.

Kód: Computer Vision hozzáadása a helyi React alkalmazáshoz

Az npm használatával adja hozzá a Computer Visiont a package.json fájlhoz.

npm install @azure/cognitiveservices-computervision

Kód: Computer Vision-kód hozzáadása külön modulként

A Computer Vision-kód egy külön fájlban ./src/azure-cognitiveservices-computervision.jstalálható. A modul fő funkciója ki van emelve.

// ./src/azure-cognitiveservices-computervision.js

// Azure SDK client libraries
import { ComputerVisionClient } from '@azure/cognitiveservices-computervision';
import { ApiKeyCredentials } from '@azure/ms-rest-js';

// List of sample images to use in demo
import RandomImageUrl from './DefaultImages';

// Authentication requirements
const key = process.env.REACT_APP_AZURE_COMPUTER_VISION_KEY;
const endpoint = process.env.REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT;

console.log(`key = ${key}`)
console.log(`endpoint = ${endpoint}`)

// Cognitive service features
const visualFeatures = [
    "ImageType",
    "Faces",
    "Adult",
    "Categories",
    "Color",
    "Tags",
    "Description",
    "Objects",
    "Brands"
];

export const isConfigured = () => {
    const result = (key && endpoint && (key.length > 0) && (endpoint.length > 0)) ? true : false;
    console.log(`key = ${key}`)
    console.log(`endpoint = ${endpoint}`)
    console.log(`ComputerVision isConfigured = ${result}`)
    return result;
}

// Computer Vision detected Printed Text
const includesText = async (tags) => {
    return tags.filter((el) => {
        return el.name.toLowerCase() === "text";
    });
}
// Computer Vision detected Handwriting
const includesHandwriting = async (tags) => {
    return tags.filter((el) => {
        return el.name.toLowerCase() === "handwriting";
    });
}
// Wait for text detection to succeed
const wait = (timeout) => {
    return new Promise(resolve => {
        setTimeout(resolve, timeout);
    });
}

// Analyze Image from URL
export const computerVision = async (url) => {

    // authenticate to Azure service
    const computerVisionClient = new ComputerVisionClient(
        new ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': key } }), endpoint);

    // get image URL - entered in form or random from Default Images
    const urlToAnalyze = url || RandomImageUrl();
    
    // analyze image
    const analysis = await computerVisionClient.analyzeImage(urlToAnalyze, { visualFeatures });

    // text detected - what does it say and where is it
    if (includesText(analysis.tags) || includesHandwriting(analysis.tags)) {
        analysis.text = await readTextFromURL(computerVisionClient, urlToAnalyze);
    }

    // all information about image
    return { "URL": urlToAnalyze, ...analysis};
}
// analyze text in image
const readTextFromURL = async (client, url) => {
    
    let result = await client.read(url);
    let operationID = result.operationLocation.split('/').slice(-1)[0];

    // Wait for read recognition to complete
    // result.status is initially undefined, since it's the result of read
    const start = Date.now();
    console.log(`${start} -${result?.status} `);
    
    while (result.status !== "succeeded") {
        await wait(500);
        console.log(`${Date.now() - start} -${result?.status} `);
        result = await client.getReadResult(operationID);
    }
    
    // Return the first page of result. 
    // Replace[0] with the desired page if this is a multi-page file such as .pdf or.tiff.
    return result.analyzeResult; 
}

Kód: Képek katalógusának hozzáadása külön modulként

Az alkalmazás véletlenszerű képet választ ki egy katalógusból, ha a felhasználó nem ad meg kép URL-címet. A véletlenszerű kijelölési függvény ki van emelve

// ./src/DefaultImages.js

const describeURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/celebrities.jpg';
const categoryURLImage = 'https://moderatorsampleimages.blob.core.windows.net/samples/sample16.png';
const tagsURL = 'https://moderatorsampleimages.blob.core.windows.net/samples/sample16.png';
const objectURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-node-sdk-samples/master/Data/image.jpg';
const brandURLImage = 'https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/images/red-shirt-logo.jpg';
const facesImageURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/faces.jpg';
const printedTextSampleURL = 'https://moderatorsampleimages.blob.core.windows.net/samples/sample2.jpg';
const multiLingualTextURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/MultiLingual.png';
const adultURLImage = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/celebrities.jpg';
const colorURLImage = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/celebrities.jpg';
// don't use with picture analysis
// eslint-disable-next-line
const mixedMultiPagePDFURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/MultiPageHandwrittenForm.pdf';
const domainURLImage = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/landmark.jpg';
const typeURLImage = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-python-sdk-samples/master/samples/vision/images/make_things_happen.jpg';

const DefaultImages = [
    describeURL,
    categoryURLImage,
    tagsURL,
    objectURL,
    brandURLImage,
    facesImageURL,
    adultURLImage,
    colorURLImage,
    domainURLImage,
    typeURLImage,
    printedTextSampleURL,
    multiLingualTextURL,
    //mixedMultiPagePDFURL
];

const RandomImageUrl = () => {
    return DefaultImages[Math.floor(Math.random() * Math.floor(DefaultImages.length))];
}

export default RandomImageUrl;

Kód: Egyéni Computer Vision-modul hozzáadása a React alkalmazáshoz

Metódusok hozzáadása a Reacthez app.js. A rendszer kiemeli a képelemzést és az eredmények megjelenítését.

// ./src/App.js

import React, { useState } from 'react';
import './App.css';
import { computerVision, isConfigured as ComputerVisionIsConfigured } from './azure-cognitiveservices-computervision';

function App() {

  const [fileSelected, setFileSelected] = useState(null);
  const [analysis, setAnalysis] = useState(null);
  const [processing, setProcessing] = useState(false);
  
  const handleChange = (e) => {
    setFileSelected(e.target.value)
  }
  const onFileUrlEntered = (e) => {

    // hold UI
    setProcessing(true);
    setAnalysis(null);

    computerVision(fileSelected || null).then((item) => {
      // reset state/form
      setAnalysis(item);
      setFileSelected("");
      setProcessing(false);
    });

  };

  // Display JSON data in readable format
  const PrettyPrintJson = (data) => {
    return (<div><pre>{JSON.stringify(data, null, 2)}</pre></div>);
  }

  const DisplayResults = () => {
    return (
      <div>
        <h2>Computer Vision Analysis</h2>
        <div><img src={analysis.URL} height="200" border="1" alt={(analysis.description && analysis.description.captions && analysis.description.captions[0].text ? analysis.description.captions[0].text : "can't find caption")} /></div>
        {PrettyPrintJson(analysis)}
      </div>
    )
  };
  
  const Analyze = () => {
    return (
    <div>
      <h1>Analyze image</h1>
      {!processing &&
        <div>
          <div>
            <label>URL</label>
            <input type="text" placeholder="Enter URL or leave empty for random image from collection" size="50" onChange={handleChange}></input>
          </div>
          <button onClick={onFileUrlEntered}>Analyze</button>
        </div>
      }
      {processing && <div>Processing</div>}
      <hr />
      {analysis && DisplayResults()}
      </div>
    )
  }
  
  const CantAnalyze = () => {
    return (
      <div>Key and/or endpoint not configured in ./azure-cognitiveservices-computervision.js</div>
    )
  }
  
  function Render() {
    const ready = ComputerVisionIsConfigured();
    if (ready) {
      return <Analyze />;
    }
    return <CantAnalyze />;
  }

  return (
    <div>
      {Render()}
    </div>
    
  );
}

export default App;

Következő lépések

SPA, amely bejelentkezik a felhasználókba, és webes API-t hív meg

Share via