Erstellen und Bereitstellen einer statischen Web-App in Azure
In diesem Tutorial erfahren Sie, wie Sie eine React-/TypeScript-Clientanwendung lokal erstellen und mit einer GitHub-Aktion für eine statische Azure-Web-App bereitstellen. Die React-App ermöglicht das Analysieren eines Bilds mit maschinellem Sehen von Cognitive Services.
Erstellen oder Verwenden eines vorhandenen Azure-Abonnements
Sie benötigen ein Azure-Benutzerkonto mit einem aktiven Abonnement. Erstellen Sie ein kostenloses Konto.
Voraussetzungen
- Node.js und npm (installiert auf Ihrem lokalen Computer)
- Visual Studio Code (installiert auf Ihrem lokalen Computer)
- Azure Static Web Apps zum Bereitstellen der React-App für die statische Azure-Web-App
- Git zum Pushen an GitHub, wodurch wiederum die GitHub-Aktion aktiviert wird
- GitHub-Konto zum Forken und zum Pushen an ein Repository
- Verwenden Sie Azure Cloud Shell unter Nutzung der Bash-Umgebung.
- Damit Sie den entsprechenden KI-Bedingungen zustimmen und eine Ressource erstellen können, muss Ihrem Azure-Konto die Rolle Cognitive Services-Mitwirkender zugewiesen sein. Um diese Rolle Ihrem Konto zuzuweisen, führen Sie die Schritte in der Dokumentation Zuweisen von Rollen aus, oder wenden Sie sich an Ihren Administrator.
Was ist eine statische Azure-Web-App?
Bei der Erstellung statischer Web-Apps stehen in Azure mehrere Optionen zur Verfügung, um den gewünschten Grad an Funktionalität und Kontrolle zu erhalten. In diesem Tutorial wird der einfachste Dienst erstellt. Dabei werden Ihnen viele der Entscheidungen abgenommen, sodass Sie sich ganz auf Ihren Front-End-Code konzentrieren können und sich nicht mit der Hostingumgebung beschäftigen müssen.
Die React-App (create-react-app) umfasst folgende Funktionen:
- Anzeige einer Meldung, wenn Azure-Schlüssel und -Endpunkt für maschinelles Sehen von Cognitive Services nicht gefunden werden
- Ermöglicht Es Ihnen, ein Bild mit Cognitive Services maschinelles Sehen zu analysieren
- Eingabe einer öffentlichen Bild-URL oder Analyse eines Bilds aus einer Sammlung
- Nach Abschluss der Analyse
- Bild anzeigen
- Anzeigen der JSON-Ergebnisse des maschinellen Sehens
Verwenden Sie zum Bereitstellen der statischen Web-App eine GitHub-Aktion, die gestartet wird, wenn ein Push an eine bestimmte Verzweigung erfolgt:
- Einfügen von GitHub-Geheimnissen für den Schlüssel und den Endpunkt für maschinelles Sehen in den Build
- Erstellen des React-Clients (create-react-app)
- Verschieben der resultierenden Dateien in Ihre statische Azure-Web-App-Ressource
1. Verzweigen des Beispiel-Repositorys
Forken Sie das Repository (anstatt es nur auf Ihrem Computer zu klonen), um über ein eigenes GitHub-Repository zu verfügen, an das Sie Änderungen pushen können.
Öffnen Sie ein separates Browserfenster oder einen separaten Browsertab, und melden Sie sich bei GitHub an.
Navigieren Sie zum GitHub-Beispiel-Repository.
https://github.com/Azure-Samples/js-e2e-client-cognitive-servicesWählen Sie rechts oben auf der Seite die Option Fork (Forken) aus.
Wählen Sie Code aus, und kopieren Sie anschließend die URL für Ihren Fork.
2. Erstellen einer lokalen Entwicklungsumgebung
Klonen Sie in einem Terminal- oder Bash-Fenster Ihren Fork auf Ihrem lokalen Computer. Ersetzen Sie
YOUR-ACCOUNT-NAMEdurch Ihren GitHub-Kontonamen.git clone https://github.com/YOUR-ACCOUNT-NAME/js-e2e-client-cognitive-servicesWechseln Sie zu dem neuen Verzeichnis, und installieren Sie die Abhängigkeiten.
cd js-e2e-client-cognitive-services && npm installDer Installationsschritt installiert die erforderlichen Abhängigkeiten, einschließlich @azure/cognitiveservices-computervision.
3. Führen Sie das lokale Beispiel aus.
Führen Sie das Beispiel aus.
npm start
Beenden Sie die App. Schließen Sie entweder das Terminalfenster, oder verwenden Sie
control+cam Terminal.
4. Erstellen Der Ressourcengruppe
Geben Sie an einem Terminal oder an einer Bash-Shell den Azure CLI-Befehl zum Erstellen einer Azure-Ressourcengruppe mit dem Namen rg-demo ein:
az group create \
--location eastus \
--name rg-demo \
--subscription YOUR-SUBSCRIPTION-NAME-OR-ID
5. Erstellen einer maschinelles Sehen Ressource
Durch die Erstellung einer Ressourcengruppe können Sie Ressourcen ganz einfach finden und wieder löschen, wenn Sie sie nicht mehr benötigen. Für diese Art von Ressource müssen Sie der Vereinbarung zur verantwortungsvollen Verwendung zustimmen. Verwenden Sie die folgende Liste, um zu erfahren, wie Sie schnell die richtige Ressource erstellen können:
- Ihre erste Ressource für maschinelles Sehen: Stimmen Sie der Vereinbarung zur verantwortungsvollen Verwendung zu.
- Weitere Ressource für maschinelles Sehen: Sie haben der Vereinbarung zur verantwortungsvollen Verwendung bereits zugestimmt.
6. Erstellen Ihrer ersten maschinelles Sehen Ressource
Wenn dies Ihr erster KI-Dienst ist, müssen Sie den Dienst über das Portal erstellen und im Rahmen der Ressourcenerstellung der Vereinbarung zur verantwortungsvollen Verwendung zustimmen. Ist dies nicht Ihre erste Ressource, für die die Vereinbarung zur verantwortungsvollen Verwendung erforderlich ist, können Sie die Ressource mit der Azure CLI erstellen (siehe nächster Abschnitt).
Die folgende Tabelle unterstützt Sie beim Erstellen der Ressource im Azure-Portal.
| Einstellung | Wert |
|---|---|
| Resource group | rg-demo |
| Name | demo-ComputerVision |
| Sku | S1 |
| Standort | eastus |
7. Erstellen einer zusätzlichen maschinelles Sehen Ressource
Führen Sie den folgenden Befehl aus, um eine Ressource für maschinelles Sehen zu erstellen:
az cognitiveservices account create \
--name demo-ComputerVision \
--resource-group rg-demo \
--kind ComputerVision \
--sku S1 \
--location eastus \
--yes
8. Abrufen maschinelles Sehen Ressourcenendpunkt und Schlüssel
Suchen Sie in den Ergebnissen nach dem Instrumentierungsschlüssel (
properties.endpoint), und kopieren Sie ihn. Diese benötigen Sie weiter unten.... "properties":{ ... "endpoint": "https://eastus.api.cognitive.microsoft.com/", ... } ...Führen Sie den folgenden Befehl aus, um Ihre Schlüssel abzurufen:
az cognitiveservices account keys list \ --name demo-ComputerVision \ --resource-group rg-demoKopieren Sie einen der Schlüssel für später.
{ "key1": "8eb7f878bdce4e96b26c89b2b8d05319", "key2": "c2067cea18254bdda71c8ba6428c1e1a" }
9. Hinzufügen von Umgebungsvariablen zu Ihrer lokalen Umgebung
Um Ihre Ressource verwenden zu können, muss der lokale Code über den Schlüssel und den Endpunkt verfügen. In dieser Codebasis werden diese Angaben in folgenden Umgebungsvariablen gespeichert:
- REACT_APP_AZURE_COMPUTER_VISION_KEY
- REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT
Führen Sie den folgenden Befehl aus, um diese Variablen Ihrer Umgebung hinzuzufügen:
10. Hinzufügen von Umgebungsvariablen zu Ihrer Remoteumgebung
Bei Verwendung statischer Azure-Web-Apps müssen Umgebungsvariablen wie etwa Geheimnisse von der GitHub-Aktion an die statische Web-App übergeben werden. Die GitHub-Aktion erstellt die App (einschließlich des Schlüssels und des Endpunkts für maschinelles Sehen aus den GitHub-Geheimnissen für dieses Repository) und pusht anschließend den Code mit den Umgebungsvariablen an die statische Web-App.
Navigieren Sie in einem Webbrowser in Ihrem GitHub-Repository zu Settings > Secrets > New repository secret („Einstellungen“ > „Geheimnisse“ > „Neues Repositorygeheimnis“).
Geben Sie den Namen und den Wert des Endpunkts aus dem vorherigen Abschnitt ein. Erstellen Sie anschließend ein weiteres Geheimnis mit dem Namen und dem Wert des Schlüssels aus dem vorherigen Abschnitt.
11. Ausführen einer lokalen React-App mit ComputerVision-Ressource
Starten Sie die App über die Befehlszeile erneut:
npm start
Lassen Sie das Textfeld leer, um ein Bild aus dem Standardkatalog auszuwählen, und wählen Sie die Schaltfläche Analysieren aus.
Das Bild wird nach dem Zufallsprinzip aus einem Katalog von Bildern ausgewählt, der in
./src/DefaultImages.jsdefiniert ist.Wählen Sie die Schaltfläche Analyze (Analysieren) wiederholt aus, um die anderen Bilder und Ergebnisse anzuzeigen.
12. Pushen Sie den lokalen Zweig an GitHub.
Pushen Sie im Visual Studio Code-Terminal den lokalen Branch main an Ihr Remoterepository.
git push origin main
Sie mussten keine Änderungen committen, da noch keine Änderungen vorgenommen wurden.
13. Erstellen einer statischen Web-App-Ressource
Wählen Sie das Symbol Azure aus. Klicken Sie anschließend mit der rechten Maustaste auf den Dienst Static Web Apps, und wählen Sie Create Static Web App (Advanced) (Statische Web-App erstellen (erweitert)) aus.
Wenn Sie in einem Popupfenster gefragt werden, ob Sie mit dem Branch
mainfortfahren möchten, wählen Sie Weiter aus.Geben Sie die folgenden Informationen in die nachfolgenden Felder ein, die jeweils nacheinander angezeigt werden:
Feldname value „Select a resource group for new resources.“ (Wählen Sie eine Ressourcengruppe für neue Ressourcen aus.) Wählen Sie die Ressourcengruppe aus, die Sie für Ihre ComputerVision-Ressource erstellt haben: demo-ComputerVision.Geben Sie einen Namen für die neue statische Web-App ein. Demo-ComputerVisionAnalyzerWählen Sie eine Preisoption aus. Wählen Sie Free aus. Wählen Sie den Speicherort Ihres Anwendungscodes aus. Wählen Sie denselben Standort aus, den Sie auch beim Erstellen Ihrer Ressourcengruppe ausgewählt haben ( eastus).„Choose build preset to configure default project structure.“ (Wählen Sie eine Buildvoreinstellung aus, um die Standardprojektstruktur zu konfigurieren.) ReactChoose the location of your application code. (Wählen Sie den Speicherort Ihres Anwendungscodes aus.) /Enter the location of your Azure Functions code. (Geben Sie den Speicherort Ihres Azure Functions-Codes ein.) Übernehmen Sie den Standardwert. Geben Sie den Pfad der Buildausgabe in Relation zum Speicherort Ihrer App ein. build
14. Aktualisieren der GitHub-Aktion mit geheimen Umgebungsvariablen
Schlüssel und Endpunkt für maschinelles Sehen befinden sich in der Geheimnissammlung des Repositorys, aber noch nicht in der GitHub-Aktion. In diesem Schritt werden der Schlüssel und der Endpunkt der Aktion hinzugefügt.
Rufen Sie die Änderungen ab, die im Zuge der Azure-Ressourcenerstellung vorgenommen wurden, um die GitHub-Aktionsdatei zu erhalten.
git pull origin mainBearbeiten Sie im Visual Studio Code-Editor unter
./.github/workflows/die GitHub-Aktionsdatei, um die Geheimnisse hinzuzufügen.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"Fügen Sie die Änderung dem lokalen Branch
mainhinzu, und committen Sie sie.git add . && git commit -m "add secrets to action"Pushen Sie die Änderung an das Remoterepository. Dadurch wird eine neue Erstellungs- und Bereitstellungsaktion für Ihre statische Azure-Web-App gestartet.
git push origin main
15. Anzeigen des GitHub Action-Buildprozesses
Öffnen Sie in einem Webbrowser Ihr GitHub-Repository für dieses Tutorial, und wählen Sie Actions (Aktionen) aus.
Wählen Sie in der Liste den obersten Build und anschließend im Menü auf der linken Seite die Option Build and Deploy Job (Auftrag zum Erstellen und Bereitstellen) aus, um den Buildprozess zu verfolgen. Warten Sie, bis der Auftrag Build And Deploy (Erstellen und Bereitstellen) erfolgreich abgeschlossen wurde.
16. Anzeigen der statischen Azure-Remotewebsite im Browser
- Wählen Sie in Visual Studio Code im rechten Menü das Symbol Azure aus. Wählen Sie dann Ihre statische Web-App aus, klicken Sie mit der rechten Maustaste auf Browse Site (Website durchsuchen), und wählen Sie Open (Öffnen) aus, um die öffentliche statische Website anzuzeigen.
Die URL für die Website finden Sie auch an folgenden Orten:
- Im Azure-Portal für Ihre Ressource auf der Seite Übersicht
- In der Ausgabe des Erstellungs- und Bereitstellungsvorgangs der GitHub-Aktion (ganz am Ende des Skripts)
17. Bereinigen von Ressourcen für statische Web-App
Nach Abschluss dieses Tutorials müssen Sie die Ressourcengruppe entfernen, die die Ressource für maschinelles Sehen sowie die statische Web-App enthält, um sicherzustellen, dass Ihnen keine weitere Nutzung in Rechnung gestellt wird.
Wählen Sie in VS Code den Azure-Explorer aus, klicken Sie dann mit der rechten Maustaste auf Ihre Ressourcengruppe, die unter dem Abonnement aufgeführt ist, und wählen Sie Löschen aus.
Code: Hinzufügen von maschinelles Sehen zur lokalen React-App
Verwenden Sie npm, um der Datei „package.json“ maschinelles Sehen hinzuzufügen.
npm install @azure/cognitiveservices-computervision
Code: Hinzufügen von maschinelles Sehen Code als separates Modul
Der Code für maschinelles Sehen ist in einer separaten Datei namens ./src/azure-cognitiveservices-computervision.js enthalten. Die Hauptfunktion des Moduls ist hervorgehoben:
// ./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: Hinzufügen eines Bilderkatalogs als separates Modul
Wenn der Benutzer keine Bild-URL eingibt, wird von der App nach dem Zufallsprinzip ein Bild aus einem Katalog ausgewählt. Die Funktion für die Zufallsauswahl ist hervorgehoben:
// ./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: Hinzufügen eines benutzerdefinierten maschinelles Sehen-Moduls zur React-App
Fügen Sie der Datei app.js von React Methoden hinzu. Bildanalyse Ergebnisanzeige sind hervorgehoben:
// ./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;