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 애플리케이션이 로컬로 생성되고 개발 서버가 시작됩니다. 다음으로 src/App.js 파일에 React 구성 요소를 작성할 수 있습니다.

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에 파일을 업로드할 수 있습니다.

// 上传文件
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 Storage에 파일을 성공적으로 업로드했습니다.

4. Azure Blob Storage에서 파일 다운로드

다음으로 다음 코드를 사용하여 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);
}

이 방법으로 Azure Blob Storage에서 파일을 성공적으로 다운로드했습니다.

5. Azure 정적 웹 사이트에 배포

마지막으로 Azure에서 제공하는 정적 웹 사이트 서비스를 사용하여 React 애플리케이션을 클라우드에 배포할 수 있습니다. 먼저 터미널에서 다음 명령을 실행하여 필요한 종속 라이브러리를 설치합니다.

npm i -g azure-storage-cli

그런 다음 프로젝트 루트 디렉터리에 ".env"라는 파일을 만들고 다음 내용을 추가합니다.

AZURE_STORAGE_ACCOUNT=youraccount
AZURE_STORAGE_KEY=yourkey

다음으로 터미널에서 실행 사용 다음 명령을 사용하여 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

이러한 방식으로 우리는 Azure 정적 웹 사이트에 React 애플리케이션을 성공적으로 배포했습니다.

결론

이 문서에서는 React 및 Microsoft Azure를 사용하여 안정적인 클라우드 애플리케이션을 구축하는 방법을 설명합니다. Azure 서비스에 연결하면 파일을 쉽게 업로드하고 다운로드할 수 있습니다. Azure Static Website에 배포하면 React 애플리케이션을 클라우드에 빠르게 배포할 수 있습니다. 이 글이 도움이 되었기를 바라며 질문이나 제안을 환영합니다.

위 내용은 React와 Microsoft Azure를 사용하여 안정적인 클라우드 애플리케이션을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!