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 サイトの他の関連記事を参照してください。