Cara membina aplikasi awan yang boleh dipercayai dengan React dan Microsoft Azure

Cara membina aplikasi awan yang boleh dipercayai menggunakan React dan Microsoft Azure

Dengan pembangunan pengkomputeran awan, semakin banyak aplikasi mula berhijrah ke awan. Dalam proses ini, adalah sangat penting untuk memilih rangka kerja pembangunan yang boleh dipercayai dan cekap. React, sebagai rangka kerja hadapan yang popular, mempunyai ciri seperti pembangunan komponen yang cekap dan kemas kini DOM maya, manakala Microsoft Azure ialah platform perkhidmatan awan fleksibel yang menyediakan keupayaan pengkomputeran, storan dan penggunaan yang berkuasa. Artikel ini akan memperkenalkan cara menggunakan React dan Microsoft Azure untuk membina aplikasi awan yang boleh dipercayai, dan menyediakan beberapa contoh kod khusus.

1 Buat aplikasi React

Pertama, kita perlu mencipta aplikasi React asas. Anda boleh menggunakan alat create-react-app untuk memulakan projek React dengan cepat. Jalankan arahan berikut dalam baris arahan:

npx create-react-app my-app
cd my-app
npm start

Ini akan mencipta aplikasi React bernama my-app secara setempat dan memulakan pelayan pembangunan. Seterusnya, kita boleh menulis komponen React dalam fail src/App.js.

2. Sambung ke perkhidmatan Azure

Untuk menyambung ke perkhidmatan Azure, kami perlu menggunakan JS SDK yang disediakan oleh Azure. Mula-mula, kita perlu memasang perpustakaan bergantung yang diperlukan dalam terminal:

npm i @azure/identity @azure/storage-blob

Kemudian, import modul yang diperlukan dalam fail src/App.js:

import { DefaultAzureCredential } from "@azure/identity";
import { BlobServiceClient } from "@azure/storage-blob";

Seterusnya, kita boleh mencipta contoh BlobServiceClient menggunakan kod berikut:

rreee

Dengan cara ini, kami telah berjaya menyambung ke perkhidmatan storan Azure Blob.

3. Muat naik fail ke Azure Blob Storage

Seterusnya, kita boleh menggunakan kod berikut untuk memuat naik fail ke Azure Blob Storage:

// 获取Azure身份凭证
const credential = new DefaultAzureCredential();

// 创建BlobServiceClient实例
const blobServiceClient = new BlobServiceClient(
  "https://youraccount.blob.core.windows.net/",
  credential
);

Dengan cara ini, kami telah berjaya memuat naik fail ke Azure Blob Storage.

4. Muat turun fail daripada Azure Blob Storage

Seterusnya, kami boleh menggunakan kod berikut untuk memuat turun fail daripada Azure Blob Storage:

// 上传文件
async function uploadFile(file) {
  // 获取Blob容器
  const containerClient = blobServiceClient.getContainerClient("containerName");

  // 生成Blob名称
  const blobName = `${Date.now()}-${file.name}`;

  // 获取Blob客户端
  const blobClient = containerClient.getBlobClient(blobName);

  // 上传文件
  await blobClient.blockBlobClient.uploadData(file);
}

Dengan cara ini, kami telah berjaya memuat turun fail daripada Azure Blob Storage.

5. Sebarkan ke tapak web statik Azure

Akhir sekali, kami boleh menggunakan perkhidmatan tapak web statik yang disediakan oleh Azure untuk menggunakan aplikasi React ke awan. Mula-mula, laksanakan arahan berikut dalam terminal untuk memasang perpustakaan bergantung yang diperlukan:

// 下载文件
async function downloadFile(blobName) {
  // 获取Blob容器
  const containerClient = blobServiceClient.getContainerClient("containerName");

  // 获取Blob客户端
  const blobClient = containerClient.getBlobClient(blobName);

  // 下载文件
  const response = await blobClient.download();
  const buffer = await response.blobBody;

  // 创建下载链接
  const downloadUrl = URL.createObjectURL(buffer);

  // 打开下载链接
  window.open(downloadUrl);
}

Kemudian, buat fail bernama ".env" dalam direktori akar projek dan tambah kandungan berikut:

npm i -g azure-storage-cli

Seterusnya, jalankan dalam terminal Gunakan arahan berikut untuk menggunakan aplikasi React:

AZURE_STORAGE_ACCOUNT=youraccount
AZURE_STORAGE_KEY=yourkey

Dengan cara ini, kami telah berjaya menggunakan aplikasi React ke tapak web statik Azure.

Kesimpulan

Artikel ini menerangkan cara membina aplikasi awan yang boleh dipercayai menggunakan React dan Microsoft Azure. Dengan menyambung kepada perkhidmatan Azure, kami boleh memuat naik dan memuat turun fail dengan mudah. Dengan menggunakan ke Tapak Web Statik Azure, kami boleh menggunakan aplikasi React dengan cepat ke awan. Saya harap artikel ini bermanfaat dan mengalu-alukan sebarang pertanyaan dan cadangan.

Atas ialah kandungan terperinci Cara membina aplikasi awan yang boleh dipercayai dengan React dan Microsoft Azure. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!