Comment créer des applications cloud fiables avec React et Microsoft Azure

Comment créer des applications cloud fiables à l'aide de React et Microsoft Azure

Avec le développement du cloud computing, de plus en plus d'applications commencent à migrer vers le cloud. Dans ce processus, il est très important de choisir un cadre de développement fiable et efficace. React, en tant que framework frontal populaire, possède des fonctionnalités telles que le développement efficace de composants et les mises à jour du DOM virtuel, tandis que Microsoft Azure est une plate-forme de services cloud flexible qui offre de puissantes capacités de calcul, de stockage et de déploiement. Cet article explique comment créer des applications cloud fiables à l'aide de React et Microsoft Azure, et fournit des exemples de code spécifiques.

1. Créer une application React

Tout d'abord, nous devons créer une application React de base. Vous pouvez utiliser l'outil create-react-app pour initialiser rapidement un projet React. Exécutez la commande suivante dans la ligne de commande :

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

Cela créera localement une application React nommée my-app et démarrera le serveur de développement. Ensuite, nous pouvons écrire le composant React dans le fichier src/App.js.

2. Connectez-vous au service Azure

Pour nous connecter au service Azure, nous devons utiliser le SDK JS fourni par Azure. Tout d'abord, nous devons installer les bibliothèques dépendantes nécessaires dans le terminal :

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

Ensuite, importez les modules requis dans le fichier src/App.js :

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

Ensuite, nous pouvons créer une instance BlobServiceClient en utilisant le code suivant :

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

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

De cette façon, nous nous sommes connectés avec succès au service de stockage Azure Blob.

3. Télécharger des fichiers sur Azure Blob Storage

Ensuite, nous pouvons utiliser le code suivant pour télécharger des fichiers sur 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);
}

De cette façon, nous avons réussi à télécharger le fichier sur Azure Blob Storage.

4. Télécharger des fichiers depuis Azure Blob Storage

Ensuite, nous pouvons utiliser le code suivant pour télécharger des fichiers depuis Azure Blob Storage :

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

De cette façon, nous avons réussi à télécharger des fichiers depuis Azure Blob Storage.

5. Déployer sur un site Web statique Azure

Enfin, nous pouvons utiliser le service de site Web statique fourni par Azure pour déployer l'application React sur le cloud. Tout d'abord, exécutez la commande suivante dans le terminal pour installer les bibliothèques dépendantes nécessaires :

npm i -g azure-storage-cli

Ensuite, créez un fichier nommé ".env" dans le répertoire racine du projet et ajoutez le contenu suivant :

AZURE_STORAGE_ACCOUNT=youraccount
AZURE_STORAGE_KEY=yourkey

Ensuite, exécutez dans le terminal Utiliser la commande suivante pour déployer l'application React :

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

De cette façon, nous avons déployé avec succès l'application React sur le site Web statique Azure.

Conclusion

Cet article explique comment créer des applications cloud fiables à l'aide de React et Microsoft Azure. En nous connectant aux services Azure, nous pouvons facilement télécharger et télécharger des fichiers. En déployant sur le site Web statique Azure, nous pouvons déployer rapidement des applications React sur le cloud. J'espère que cet article vous a été utile et je suis ouvert à toutes questions et suggestions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!