Share via

Membangun dan menyebarkan aplikasi Web Statik ke Azure

  • Artikel

Dalam tutorial ini, bangun dan sebarkan aplikasi klien React/TypeScript secara lokal ke Azure Static Web App dengan tindakan GitHub. Aplikasi React memungkinkan Anda menganalisis citra dengan Computer Vision Cognitive Services.

Membuat atau menggunakan langganan Azure yang sudah ada

Anda memerlukan akun pengguna Azure dengan langganan aktif. Buat akun gratis.

Prasyarat

  • Node.js dan npm - diinstal ke mesin lokal Anda.
  • Visual Studio Code - diinstal ke komputer lokal Anda.
  • Git - digunakan untuk mendorong ke GitHub - yang mengaktifkan tindakan GitHub.
  • Akun GitHub - untuk melakukan fork dan mendorong ke repositori
  • Menggunakan Azure Cloud Shell dengan menggunakan lingkungan bash.
  • Akun Azure Anda harus memiliki peran Layanan Cognitive Services yang ditetapkan agar Anda menyetujui persyaratan AI yang bertanggung jawab dan membuat sumber daya. Agar peran ini ditetapkan ke akun Anda, ikuti langkah-langkah dalam dokumentasi Menetapkan peran, atau hubungi administrator Anda.

Apa itu aplikasi web Azure Static

Saat membangun aplikasi web statik, Anda memiliki beberapa pilihan di Azure, berdasarkan tingkat fungsionalitas dan kontrol yang Anda minati. Tutorial ini berfokus pada layanan termudah dengan banyak pilihan yang dibuat untuk Anda, sehingga Anda dapat fokus pada kode front-end dan bukan lingkungan hosting.

React (create-react-app) menyediakan fungsionalitas berikut:

  • Menampilkan pesan jika kunci dan titik akhir Azure untuk Cognitive Services Computer Vision tidak ditemukan
  • Memungkinkan Anda menganalisis gambar dengan Visi Komputer Cognitive Services
    • Masukkan URL citra publik atau analisa citra dari koleksi
    • Ketika analisis selesai
      • Menampilkan citra
      • Menampilkan hasil JSON Computer Vision

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

Untuk menyebarkan aplikasi web statik, gunakan tindakan GitHub, yang aktif saat dorongan ke cabang tertentu terjadi:

  • Menyisipkan rahasia GitHub untuk kunci dan titik akhir Computer Vision ke dalam build
  • Membangun klien React (create-react-app)
  • Memindahkan file yang dihasilkan ke sumber daya Aplikasi web Statik Azure Anda

1. Melakukan fork pada repositori sampel

Lakukan fork pada repositori, alih-alih hanya mengkloning ke komputer lokal Anda, untuk memiliki repositori GitHub Anda sendiri untuk mendorong perubahan.

  1. Buka jendela atau tab browser terpisah, dan masuk ke GitHub.

  2. Navigasikan ke Repositori sampel GitHub.

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

  3. Di bagian kanan atas halaman, pilih Fork.

  4. Pilih Kode, kemudian salin URL lokasi untuk fork Anda.

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

2. Membuat lingkungan pengembangan lokal

  1. Di jendela terminal atau bash, kloning fork ke komputer lokal Anda. Ganti YOUR-ACCOUNT-NAME dengan nama akun GitHub Anda.

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

  2. Ubah ke direktori baru dan instal dependensi.

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

    Langkah penginstalan menginstal dependensi yang diperlukan, termasuk @azure/cognitiveservices-computervision.

3. Menjalankan sampel lokal

  1. Jalankan sampel.

    npm start

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

  2. Hentikan aplikasinya. Entah tutup jendela terminal atau gunakan control+c di terminal.

4. Membuat grup sumber daya Anda

Di shell terminal atau bash, masukkan perintah Azure CLI untuk membuat grup sumber daya Azure, dengan nama rg-demo:

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

5. Membuat sumber daya Computer Vision

Membuat grup sumber daya memungkinkan Anda untuk dengan mudah menemukan sumber daya, dan menghapusnya ketika Anda selesai. Jenis sumber daya ini mengharuskan Anda menyetujui perjanjian Penggunaan Bertanggung Jawab. Gunakan daftar berikut untuk mengetahui bagaimana Anda dapat dengan cepat membuat sumber daya yang benar:

6. Membuat sumber daya Computer Vision pertama Anda

Jika ini adalah layanan AI pertama Anda, Anda harus membuat layanan melalui portal dan menyetujui perjanjian Penggunaan Bertanggung Jawab, sebagai bagian dari pembuatan sumber daya tersebut. Jika ini bukan sumber daya pertama Anda yang memerlukan perjanjian Penggunaan Bertanggung Jawab, Anda dapat membuat sumber daya dengan Azure CLI, yang ditemukan di bagian berikutnya.

Gunakan tabel berikut untuk membantu membuat sumber daya dalam portal Microsoft Azure.

Pengaturan Nilai
Grup sumber daya rg-demo
Nama demo-ComputerVision
SKU S1
Lokasi eastus

7. Membuat sumber daya Computer Vision tambahan

Jalankan perintah berikut untuk membuat sumber daya Computer Vision:

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

8. Mendapatkan titik akhir dan kunci sumber daya Computer Vision

  1. Dalam hasil, temukan dan salin properties.endpoint. Anda akan membutuhkannya nanti.

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

  2. Jalankan perintah berikut untuk mendapatkan kunci Anda.

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

  3. Salin salah satu kunci, Anda akan membutuhkannya nanti.

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

9. Menambahkan variabel lingkungan ke lingkungan lokal Anda

Untuk menggunakan sumber daya Anda, kode lokal harus memiliki kunci dan titik akhir yang tersedia. Basis kode ini menyimpan yang ada dalam variabel lingkungan:

  • REACT_APP_AZURE_COMPUTER_VISION_KEY
  • REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT

  1. Jalankan perintah berikut untuk menambahkan variabel-variabel ini ke lingkungan Anda.

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

10. Menambahkan variabel lingkungan ke lingkungan jarak jauh Anda

Saat menggunakan aplikasi web Azure Static, variabel lingkungan seperti rahasia, perlu diteruskan dari tindakan GitHub ke aplikasi web Statik. Tindakan GitHub membangun aplikasi, termasuk kunci dan titik akhir Computer Vision yang diteruskan dari rahasia GitHub untuk repositori tersebut, kemudian mendorong kode dengan variabel lingkungan ke aplikasi web statik.

  1. Pada browser web, di repositori GitHub Anda, pilih Pengaturan, lalu Rahasia, kemudian Rahasia repositori baru..

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

  2. Masukkan nama dan nilai yang sama untuk titik akhir yang Anda gunakan di bagian sebelumnya. Kemudian buat rahasia lain dengan nama dan nilai yang sama untuk kunci seperti yang digunakan di bagian sebelumnya.

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

11. Menjalankan aplikasi react lokal dengan sumber daya ComputerVision

  1. Mulai aplikasi kembali, di baris perintah:

    npm start

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

  2. Biarkan bidang teks kosong, untuk memilih citra dari katalog default, dan pilih tombol Analisis.

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

    Citra dipilih secara acak dari katalog citra yang didefinisikan dalam ./src/DefaultImages.js.

  3. Lanjutkan untuk memilih tombol Analisis untuk melihat citra dan hasil lainnya.

12. Mendorong cabang lokal untuk GitHub

Pada terminal Visual Studio Code, dorong cabang lokal, main ke repositori jarak jauh Anda.

git push origin main

Anda tidak perlu melakukan perubahan apa pun karena belum ada perubahan yang dilakukan.

13. Membuat sumber daya Aplikasi web Statik

  1. Pilih ikon Azure, lalu klik kanan pada layanan Aplikasi Web Statik, kemudian pilih Buat Aplikasi Web Statik (Lanjutan).

    Visual Studio Code screenshot with Visual Studio extension

  2. Jika jendela pop-up menanyakan apakah Anda ingin melanjutkan pada cabang main, pilih Lanjutkan.

  3. Masukkan informasi berikut di bidang berikutnya, disajikan satu per satu.

    Nama bidang value
    Pilih grup sumber daya untuk sumber daya baru. Pilih grup sumber daya yang Anda buat untuk sumber daya ComputerVision Anda, demo-ComputerVision.
    Masukkan nama untuk aplikasi web statik baru. Demo-ComputerVisionAnalyzer
    Pilih opsi harga Pilih Gratis.
    Pilih lokasi kode aplikasi Anda. Pilih lokasi yang sama dengan yang Anda pilih saat membuat grup sumber daya, eastus.
    Pilih preset build untuk mengonfigurasi struktur proyek default. React
    Pilih lokasi kode aplikasi Anda. /
    Masukkan lokasi kode Azure Functions Anda. Ambil nilai default.
    Masukkan jalur output build Anda relatif terhadap lokasi aplikasi Anda. build

14. Memperbarui tindakan GitHub dengan variabel lingkungan rahasia

Kunci dan titik akhir Computer Vision ada dalam koleksi rahasia repositori, tetapi belum berada dalam tindakan GitHub. Langkah ini menambahkan kunci dan titik akhir ke tindakan.

  1. Tarik ke bawah perubahan yang dibuat dari pembuatan sumber daya Azure, untuk mendapatkan file tindakan GitHub.

    git pull origin main

  2. Di editor Visual Studio Code, edit file GitHub Action yang ditemukan di ./.github/workflows/ untuk menambahkan rahasia.

    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. Tambahkan dan terapkan perubahan ke cabang main lokal.

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

  4. Dorong perubahan terhadap repositori jarak jauh, mulai tindakan build-and-deploy baru ke aplikasi web Azure Static Anda.

    git push origin main

15. Melihat proses pembangunan GitHub Action

  1. Di browser web, buka repositori GitHub Anda untuk tutorial ini, dan pilih Tindakan.

  2. Pilih build teratas dalam daftar, kemudian pilih Pekerjaan Bangun dan Sebarkan di menu sisi kiri untuk menonton proses pembangunan. Tunggu hingga Bangun Dan Sebarkan berhasil selesai.

    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. Melihat situs web statik Azure jarak jauh di browser

  1. Di Visual Studio Code, pilih ikon Azure di menu paling kanan, lalu pilih aplikasi web Statik Anda, lalu klik kanan Telusuri situs, lalu pilih Buka untuk melihat situs web statik publik.

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

Anda juga dapat menemukan URL untuk situs tersebut di:

  • portal Microsoft Azure untuk sumber daya Anda, di halaman Gambaran Umum.
  • output build-and-deploy tindakan GitHub memiliki URL situs di bagian paling akhir skrip

17. Membersihkan sumber daya untuk aplikasi web statik

Setelah Anda menyelesaikan tutorial ini, Anda perlu menghapus grup sumber daya, yang mencakup sumber daya Computer Vision dan aplikasi web Statik, untuk memastikan Anda tidak ditagih untuk penggunaan lebih lanjut.

Di VS Code, pilih penjelajah Azure, lalu klik kanan pada grup sumber daya Anda yang tercantum pada langganan, dan pilih Hapus.

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

Kode: Tambahkan Computer Vision ke aplikasi React lokal

Gunakan npm untuk menambahkan Computer Vision ke file package.json.

npm install @azure/cognitiveservices-computervision

Kode: Tambahkan kode Computer Vision sebagai modul terpisah

Kode Computer Vision terkandung dalam file terpisah bernama ./src/azure-cognitiveservices-computervision.js. Fungsi utama modul disorot.

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

Kode: Tambahkan katalog citra sebagai modul terpisah

Aplikasi ini memilih citra acak dari katalog jika pengguna tidak memasukkan URL citra. Fungsi seleksi acak disorot

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

Kode: Tambahkan modul Computer Vision kustom ke aplikasi React

Tambahkan metode ke React app.js. Analisis citra dan tampilan hasil disorot.

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

Langkah berikutnya