So erstellen Sie zuverlässige Cloud-Anwendungen mit React und Microsoft Azure

So erstellen Sie zuverlässige Cloud-Anwendungen mit React und Microsoft Azure

Mit der Entwicklung des Cloud Computing beginnen immer mehr Anwendungen in die Cloud zu migrieren. In diesem Prozess ist es sehr wichtig, ein zuverlässiges und effizientes Entwicklungsframework zu wählen. React verfügt als beliebtes Front-End-Framework über Funktionen wie effiziente Komponentenentwicklung und virtuelle DOM-Updates, während Microsoft Azure eine flexible Cloud-Service-Plattform ist, die leistungsstarke Rechen-, Speicher- und Bereitstellungsfunktionen bietet. In diesem Artikel erfahren Sie, wie Sie zuverlässige Cloud-Anwendungen mit React und Microsoft Azure erstellen, und stellen einige spezifische Codebeispiele bereit.

1. Erstellen Sie eine React-Anwendung

Zuerst müssen wir eine grundlegende React-Anwendung erstellen. Mit dem Tool „create-react-app“ können Sie schnell ein React-Projekt initialisieren. Führen Sie den folgenden Befehl in der Befehlszeile aus:

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

Dadurch wird lokal eine React-Anwendung mit dem Namen my-app erstellt und der Entwicklungsserver gestartet. Als nächstes können wir die React-Komponente in die Datei src/App.js schreiben.

2. Verbindung zum Azure-Dienst herstellen

Um eine Verbindung zum Azure-Dienst herzustellen, müssen wir das von Azure bereitgestellte JS SDK verwenden. Zuerst müssen wir die erforderlichen abhängigen Bibliotheken im Terminal installieren:

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

Dann importieren wir die erforderlichen Module in die Datei src/App.js:

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

Als nächstes können wir eine BlobServiceClient-Instanz mit dem folgenden Code erstellen:

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

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

Auf diese Weise haben wir uns erfolgreich mit dem Azure Blob Storage-Dienst verbunden.

3. Dateien in Azure Blob Storage hochladen

Als nächstes können wir den folgenden Code verwenden, um Dateien in Azure Blob Storage hochzuladen:

// 上传文件
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);
}

Auf diese Weise haben wir die Datei erfolgreich in Azure Blob Storage hochgeladen.

4. Dateien von Azure Blob Storage herunterladen

Als nächstes können wir den folgenden Code verwenden, um Dateien von Azure Blob Storage herunterzuladen:

// 下载文件
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);
}

Auf diese Weise haben wir erfolgreich Dateien von Azure Blob Storage heruntergeladen.

5. Bereitstellung auf einer statischen Azure-Website

Schließlich können wir den von Azure bereitgestellten statischen Website-Dienst verwenden, um die React-Anwendung in der Cloud bereitzustellen. Führen Sie zunächst den folgenden Befehl im Terminal aus, um die erforderlichen abhängigen Bibliotheken zu installieren:

npm i -g azure-storage-cli

Erstellen Sie dann eine Datei mit dem Namen „.env“ im Projektstammverzeichnis und fügen Sie den folgenden Inhalt hinzu:

AZURE_STORAGE_ACCOUNT=youraccount
AZURE_STORAGE_KEY=yourkey

Als nächstes im Terminal ausführen Verwenden Geben Sie den folgenden Befehl ein, um die React-Anwendung bereitzustellen:

az storage cors add --methods OPTIONS GET HEAD POST PUT --origins "*" --allowed-headers "*" --exposed-headers "*" --max-age 200 --services b
az storage blob service-properties update --account-name youraccount --static-website --404-document index.html --index-document index.html
az storage blob service-properties update --account-name youraccount --static-website --default-index-document-path index.html
az storage blob upload-batch --destination "web" --source build

Auf diese Weise haben wir die React-Anwendung erfolgreich auf der statischen Azure-Website bereitgestellt.

Fazit

In diesem Artikel wird erklärt, wie Sie zuverlässige Cloud-Anwendungen mit React und Microsoft Azure erstellen. Durch die Verbindung mit Azure-Diensten können wir problemlos Dateien hoch- und herunterladen. Durch die Bereitstellung auf der Azure Static-Website können wir React-Anwendungen schnell in der Cloud bereitstellen. Ich hoffe, dieser Artikel war hilfreich und freue mich über alle Fragen und Anregungen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie zuverlässige Cloud-Anwendungen mit React und Microsoft Azure. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!