Membangun dan menyebarkan aplikasi Web Statik ke Azure
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.
- Azure Static Web Apps - digunakan untuk menyebarkan aplikasi React ke Aplikasi web Azure Static Web.
- 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
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.
Buka jendela atau tab browser terpisah, dan masuk ke GitHub.
Navigasikan ke Repositori sampel GitHub.
https://github.com/Azure-Samples/js-e2e-client-cognitive-services
Di bagian kanan atas halaman, pilih Fork.
Pilih Kode, kemudian salin URL lokasi untuk fork Anda.
2. Membuat lingkungan pengembangan lokal
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
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
Jalankan sampel.
npm start
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:
- Sumber daya Computer Vision pertama Anda - menyetujui perjanjian Penggunaan Bertanggung Jawab
- Computer Vision Tambahan - sudah menyetujui perjanjian Penggunaan Bertanggung Jawab
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
Dalam hasil, temukan dan salin
properties.endpoint
. Anda akan membutuhkannya nanti.... "properties":{ ... "endpoint": "https://eastus.api.cognitive.microsoft.com/", ... } ...
Jalankan perintah berikut untuk mendapatkan kunci Anda.
az cognitiveservices account keys list \ --name demo-ComputerVision \ --resource-group rg-demo
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
Jalankan perintah berikut untuk menambahkan variabel-variabel ini ke lingkungan Anda.
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.
Pada browser web, di repositori GitHub Anda, pilih Pengaturan, lalu Rahasia, kemudian Rahasia repositori baru..
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.
11. Menjalankan aplikasi react lokal dengan sumber daya ComputerVision
Mulai aplikasi kembali, di baris perintah:
npm start
Biarkan bidang teks kosong, untuk memilih citra dari katalog default, dan pilih tombol Analisis.
Citra dipilih secara acak dari katalog citra yang didefinisikan dalam
./src/DefaultImages.js
.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
Pilih ikon Azure, lalu klik kanan pada layanan Aplikasi Web Statik, kemudian pilih Buat Aplikasi Web Statik (Lanjutan).
Jika jendela pop-up menanyakan apakah Anda ingin melanjutkan pada cabang
main
, pilih Lanjutkan.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.
Tarik ke bawah perubahan yang dibuat dari pembuatan sumber daya Azure, untuk mendapatkan file tindakan GitHub.
git pull origin main
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"
Tambahkan dan terapkan perubahan ke cabang
main
lokal.git add . && git commit -m "add secrets to action"
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
Di browser web, buka repositori GitHub Anda untuk tutorial ini, dan pilih Tindakan.
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.
16. Melihat situs web statik Azure jarak jauh di browser
- 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.
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.
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
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk