Een statische web-app bouwen en implementeren in Azure

  • Artikel

In deze zelfstudie bouwt en implementeert u lokaal een React/TypeScript-clienttoepassing in een Statische Azure-web-app met een GitHub-actie. Met de React-app kunt u een afbeelding analyseren met Cognitive Services Computer Vision.

Een bestaand Azure-abonnement maken of gebruiken

U hebt een Azure-gebruikersaccount met een actief abonnement nodig. Maak gratis een account.

Vereisten

  • Node.js en npm - geïnstalleerd op uw lokale computer.
  • Visual Studio Code - geïnstalleerd op uw lokale computer.
  • Git : wordt gebruikt om naar GitHub te pushen, waarmee de GitHub-actie wordt geactiveerd.
  • GitHub-account : naar een fork en push naar een opslagplaats
  • Gebruik Azure Cloud Shell met behulp van de bash-omgeving.
  • Aan uw Azure-account moet de rol van Cognitive Services-inzender zijn toegewezen, zodat u akkoord kunt gaan met de verantwoordelijke AI-voorwaarden en een resource kunt maken. Als u deze rol wilt toewijzen aan uw account, volgt u de stappen in de documentatie over rollen toewijzen of neemt u contact op met de beheerder.

Wat is een statische Azure-web-app?

Bij het bouwen van statische web-apps hebt u verschillende keuzes in Azure, op basis van de mate van functionaliteit en controle waarin u geïnteresseerd bent. Deze zelfstudie richt zich op de eenvoudigste service met veel van de keuzes die voor u zijn gemaakt, zodat u zich kunt richten op uw front-endcode en niet op de hostingomgeving.

De React -app (create-react-app) biedt de volgende functionaliteit:

  • Bericht weergeven als Azure-sleutel en -eindpunt voor Cognitive Services Computer Vision niet is gevonden
  • Hiermee kunt u een afbeelding analyseren met Cognitive Services Computer Vision
    • Voer een openbare afbeeldings-URL in of analyseer de afbeelding uit de verzameling
    • Wanneer de analyse is voltooid
      • Afbeelding weergeven
      • JSON-resultaten van Computer Vision weergeven

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

Als u de statische web-app wilt implementeren, gebruikt u een GitHub-actie, die begint wanneer een push naar een specifieke vertakking plaatsvindt:

  • GitHub-geheimen voor Computer Vision-sleutel en -eindpunt invoegen in build
  • Hiermee bouwt u de React-client (create-react-app)
  • Verplaatst de resulterende bestanden naar uw Azure Static Web App-resource

1. Fork de voorbeeldopslagplaats

Fork de opslagplaats in plaats van deze alleen naar uw lokale computer te klonen, zodat u een Eigen GitHub-opslagplaats hebt om wijzigingen naar te pushen.

  1. Open een afzonderlijk browservenster of tabblad en meld u aan bij GitHub.

  2. Navigeer naar de GitHub-voorbeeldopslagplaats.

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

  3. Selecteer Fork in de rechterbovenhoek van de pagina.

  4. Selecteer Code en kopieer vervolgens de locatie-URL voor uw fork.

    Partial screenshot of GitHub website, select **Code** then copy the location for your fork.

2. Lokale ontwikkelomgeving maken

  1. Kloon uw fork in een terminal- of bash-venster naar uw lokale computer. Vervang door YOUR-ACCOUNT-NAME de naam van uw GitHub-account.

    git clone https://github.com/YOUR-ACCOUNT-NAME/js-e2e-client-cognitive-services

  2. Ga naar de nieuwe map en installeer de afhankelijkheden.

    cd js-e2e-client-cognitive-services && npm install

    De installatiestap installeert de vereiste afhankelijkheden, waaronder @azure/cognitiveservices-computervision.

3. Voer het lokale voorbeeld uit

  1. Voet het voorbeeld uit.

    npm start

    Partial browser screenshot of React Cognitive Service Computer Vision sample for image analysis before key and endpoint set.

  2. De app stoppen. Sluit het terminalvenster of gebruik control+c het in de terminal.

4. Maak uw resourcegroep

Voer in een terminal- of bash-shell de Azure CLI-opdracht in om een Azure-resourcegroep te maken, met de naam rg-demo:

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

5. Een Computer Vision-resource maken

Als u een resourcegroep maakt, kunt u de resources eenvoudig vinden en verwijderen wanneer u klaar bent. Voor dit type resource moet u akkoord gaan met de overeenkomst voor verantwoord gebruik. Gebruik de volgende lijst om te weten hoe u snel de juiste resource kunt maken:

6. Uw eerste Computer Vision-resource maken

Als dit uw eerste AI-service is, moet u de service maken via de portal en akkoord gaan met de overeenkomst voor verantwoordelijk gebruik, als onderdeel van het maken van die resource. Als dit niet uw eerste resource is waarvoor de overeenkomst voor verantwoordelijk gebruik is vereist, kunt u de resource maken met de Azure CLI, in de volgende sectie.

Gebruik de volgende tabel om de resource te maken in Azure Portal.

Instelling Weergegeven als
Resourcegroep rg-demo
Naam demo-ComputerVision
Sku S1
Locatie eastus

7. Maak een extra Computer Vision-resource

Voer de volgende opdracht uit om een Computer Vision-resource te maken:

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

8. Computer Vision-resource-eindpunt en -sleutels ophalen

  1. Zoek en kopieer de properties.endpoint. Dat hebt u later nodig.

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

  2. Voer de volgende opdracht uit om uw sleutels op te halen.

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

  3. Kopieer een van de sleutels, die u later nodig hebt.

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

9. Omgevingsvariabelen toevoegen aan uw lokale omgeving

Als u uw resource wilt gebruiken, moet de lokale code beschikken over de sleutel en het eindpunt. Deze codebasis slaat deze op in omgevingsvariabelen:

  • REACT_APP_AZURE_COMPUTER_VISION_KEY
  • REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT

  1. Voer de volgende opdracht uit om deze variabelen toe te voegen aan uw omgeving.

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

10. Omgevingsvariabelen toevoegen aan uw externe omgeving

Wanneer u Azure Static-web-apps gebruikt, moeten omgevingsvariabelen zoals geheimen worden doorgegeven vanuit de GitHub-actie aan de statische web-app. De GitHub-actie bouwt de app, inclusief de Computer Vision-sleutel en het eindpunt dat is doorgegeven vanuit de GitHub-geheimen voor die opslagplaats, en pusht vervolgens de code met de omgevingsvariabelen naar de statische web-app.

  1. Selecteer in een webbrowser in uw GitHub-opslagplaats Instellingen en vervolgens Geheimen en vervolgens Nieuw opslagplaatsgeheim..

    Partial browser screenshot of GitHub repository, creating new repository secret.

  2. Voer dezelfde naam en waarde in voor het eindpunt dat u in de vorige sectie hebt gebruikt. Maak vervolgens een ander geheim met dezelfde naam en waarde voor de sleutel als in de vorige sectie.

    Enter the same name and value for the endpoint. Then create another secret with the same name and value for the key.

11. Lokale react-app uitvoeren met ComputerVision-resource

  1. Start de app opnieuw op de opdrachtregel:

    npm start

    Partial browser screenshot of React Cognitive Service Computer Vision sample ready for URL or press enter.

  2. Laat het tekstveld leeg, selecteer een afbeelding in de standaardcatalogus en selecteer de knop Analyseren .

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

    De afbeelding wordt willekeurig geselecteerd uit een catalogus met afbeeldingen die zijn gedefinieerd in ./src/DefaultImages.js.

  3. Ga door met het selecteren van de knop Analyseren om de andere afbeeldingen en resultaten te bekijken.

12. Push de lokale vertakking naar GitHub

Push de lokale vertakking main in de Visual Studio Code-terminal naar uw externe opslagplaats.

git push origin main

U hoeft geen wijzigingen door te voeren omdat er nog geen wijzigingen zijn aangebracht.

13. Een resource voor een statische web-app maken

  1. Selecteer het Azure-pictogram en klik met de rechtermuisknop op de Static Web Apps-service en selecteer vervolgens Statische web-app maken (geavanceerd).

    Visual Studio Code screenshot with Visual Studio extension

  2. Als u in een pop-upvenster wordt gevraagd of u wilt doorgaan in de main vertakking, selecteert u Doorgaan.

  3. Voer de volgende gegevens in de volgende velden in, die één voor één worden weergegeven.

    Veldnaam waarde
    Selecteer een resourcegroep voor nieuwe resources. Selecteer de resourcegroep die u hebt gemaakt voor uw ComputerVision-resource. demo-ComputerVision
    Voer een naam in voor de nieuwe statische web-app. Demo-ComputerVisionAnalyzer
    Prijsoptie selecteren Selecteer gratis.
    Selecteer de locatie van uw toepassingscode. Selecteer dezelfde locatie die u hebt geselecteerd toen u de resourcegroep maakte. eastus
    Kies vooraf ingestelde build om de standaardprojectstructuur te configureren. React
    Kies de locatie van uw toepassingscode. /
    Voer de locatie van uw Azure Functions-code in. Neem de standaardwaarde.
    Voer het pad in van de build-uitvoer ten opzichte van de locatie van uw app. build

14. Werk de GitHub-actie bij met geheime omgevingsvariabelen

De Computer Vision-sleutel en het eindpunt bevinden zich in de geheimenverzameling van de opslagplaats, maar bevinden zich nog niet in de GitHub-actie. Met deze stap voegt u de sleutel en het eindpunt toe aan de actie.

  1. Haal de wijzigingen op die zijn aangebracht van het maken van de Azure-resource om het GitHub-actiebestand op te halen.

    git pull origin main

  2. Bewerk in de Visual Studio Code-editor het GitHub Action-bestand dat u ./.github/workflows/ hebt gevonden om de geheimen toe te voegen.

    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"

  3. Voeg de wijziging toe aan de lokale main vertakking en voer deze door.

    git add . && git commit -m "add secrets to action"

  4. Push de wijziging naar de externe opslagplaats en start een nieuwe build-and-deploy-actie naar uw Statische Azure-web-app.

    git push origin main

15. Bekijk het buildproces voor GitHub Action

  1. Open in een webbrowser uw GitHub-opslagplaats voor deze zelfstudie en selecteer Acties.

  2. Selecteer de bovenste build in de lijst en selecteer vervolgens Build and Deploy Job in het menu aan de linkerkant om het buildproces te bekijken. Wacht totdat de build en implementatie is voltooid.

    Select the top build in the list, then select `Build and Deploy Job` on the left-side menu to watch the build process. Wait until the build successfully finishes.

16. Externe statische Azure-website weergeven in browser

  1. Selecteer in Visual Studio Code het Azure-pictogram in het menu uiterst rechts, selecteer vervolgens uw statische web-app, klik met de rechtermuisknop op Bladeren en selecteer Vervolgens Openen om de openbare statische website weer te geven.

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

U kunt ook de URL voor de site vinden op:

  • Azure Portal voor uw resource op de pagina Overzicht .
  • De build-and-deploy-uitvoer van de GitHub-actie heeft de site-URL aan het einde van het script

17. Resources opschonen voor statische web-app

Nadat u deze zelfstudie hebt voltooid, moet u de resourcegroep, die de Computer Vision-resource en de Statische web-app bevat, verwijderen om ervoor te zorgen dat u niet meer wordt gefactureerd voor gebruik.

Selecteer in VS Code de Azure-verkenner en klik met de rechtermuisknop op uw resourcegroep die wordt vermeld onder het abonnement en selecteer Verwijderen.

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

Code: Computer Vision toevoegen aan lokale React-app

Gebruik npm om Computer Vision toe te voegen aan het package.json-bestand.

npm install @azure/cognitiveservices-computervision

Code: Computer Vision-code toevoegen als afzonderlijke module

De Computer Vision-code bevindt zich in een afzonderlijk bestand met de naam ./src/azure-cognitiveservices-computervision.js. De belangrijkste functie van de module is gemarkeerd.

// ./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; 
}

Code: Catalogus met afbeeldingen toevoegen als afzonderlijke module

De app selecteert een willekeurige afbeelding uit een catalogus als de gebruiker geen afbeeldings-URL invoert. De functie willekeurige selectie is gemarkeerd

// ./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;

Code: Aangepaste Computer Vision-module toevoegen aan React-app

Methoden toevoegen aan react app.js. De afbeeldingsanalyse en weergave van resultaten zijn gemarkeerd.

// ./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;

Volgende stappen