React と Microsoft Azure を使用して信頼性の高いクラウド アプリケーションを構築する方法

React と Microsoft Azure を使用して信頼性の高いクラウド アプリケーションを構築する方法

クラウド コンピューティングの発展に伴い、ますます多くのアプリケーションがクラウドに移行し始めています。このプロセスでは、信頼性が高く効率的な開発フレームワークを選択することが非常に重要です。 React は人気のあるフロントエンド フレームワークであり、効率的なコンポーネント開発や仮想 DOM 更新などの機能を備えています。一方、Microsoft Azure は、強力なコンピューティング、ストレージ、展開機能を提供する柔軟なクラウド サービス プラットフォームです。この記事では、React と Microsoft Azure を使用して信頼性の高いクラウド アプリケーションを構築する方法を紹介し、いくつかの具体的なコード例を示します。

1. React アプリケーションの作成

まず、基本的な React アプリケーションを作成する必要があります。 create-react-app ツールを使用すると、React プロジェクトをすばやく初期化できます。コマンド ラインで次のコマンドを実行します。

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

これにより、my-app という名前の React アプリケーションがローカルに作成され、開発サーバーが起動されます。次に、React コンポーネントを src/App.js ファイルに記述します。

2. Azure サービスへの接続

Azure サービスに接続するには、Azure が提供する JS SDK を使用する必要があります。まず、ターミナルに必要な依存ライブラリをインストールする必要があります:

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

次に、必要なモジュールを src/App.js ファイルにインポートします:

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

次に、次のものを使用できます。このコードは、BlobServiceClient インスタンスを作成します。

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

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

このようにして、Azure Blob Storage サービスに正常に接続しました。

3. Azure Blob Storage へのファイルのアップロード

次に、次のコードを使用して、ファイルを Azure Blob Storage にアップロードします。ファイルをアップロードする Azure Blob Storage にアップロードされます。

4. Azure Blob storage からファイルをダウンロードする

次に、次のコードを使用して 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);
}

このようにして、正常にダウンロードされます。 Azure からのファイル BLOB ストレージからファイルをダウンロードします。

5. Azure 静的 Web サイトへのデプロイ

最後に、Azure が提供する静的 Web サイト サービスを使用して、React アプリケーションをクラウドにデプロイできます。まず、ターミナルで次のコマンドを実行して、必要な依存ライブラリをインストールします。

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

次に、プロジェクトのルート ディレクトリに「.env」という名前のファイルを作成し、次の内容を追加します。

npm i -g azure-storage-cli

次に、ターミナルで次のコマンドを実行して、React アプリケーションをデプロイします。

AZURE_STORAGE_ACCOUNT=youraccount
AZURE_STORAGE_KEY=yourkey

この方法で、React アプリケーションを Azure 静的 Web サイトに正常にデプロイしました。

結論

この記事では、React と Microsoft Azure を使用して信頼性の高いクラウド アプリケーションを構築する方法を紹介します。 Azure サービスに接続することで、ファイルを簡単にアップロードおよびダウンロードできます。 Azure Static Website にデプロイすることで、React アプリケーションをクラウドに迅速にデプロイできます。この記事がお役に立てば幸いです。ご質問やご提案をお待ちしております。

以上がReact と Microsoft Azure を使用して信頼性の高いクラウド アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。