다음을 통해 공유

React 및 Azure Cosmos DB를 사용하여 MongoDB 앱 만들기

  • 적용 대상: ✅ MongoDB

적용 대상: Mongodb

중요합니다

기존 MongoDB 애플리케이션을 마이그레이션하거나 MQL(MongoDB 쿼리 언어) 기능을 사용하시겠습니까? Azure DocumentDB를 고려합니다.

여러 지역에서 99.999% 가용성 서비스 수준 계약, 즉각적인 자동 크기 조정 및 자동 장애 조치(failover)가 있는 대규모 시나리오에 대한 데이터베이스 솔루션을 찾고 있나요? NoSQL용 Azure Cosmos DB를 고려합니다.

이 다중 파트 비디오 자습서에서는 React 프런트 엔드를 사용하여 히어로 추적 앱을 만드는 방법을 설명합니다. 앱에서 서버에 노드 및 Express를 사용하고, Azure Cosmos DB의 API for MongoDB를 사용하여 구성된 Azure Cosmos DB 데이터베이스에 연결하고, 앱의 서버 부분에 React 프런트 엔드를 연결합니다. 이 자습서에는 Azure Portal에서 Azure Cosmos DB 포인트 클릭 동작 크기 조정을 수행하는 방법 및 모든 사용자가 즐겨 찾는 Heroes를 추적할 수 있도록 인터넷에 앱을 배포하는 방법을 보여줍니다.

Azure Cosmos DB는 MongoDB와의 유선 프로토콜 호환성을 지원하므로 클라이언트가 MongoDB 대신 Azure Cosmos DB를 사용할 수 있습니다.

이 다중 파트 자습서에서 다루는 작업은 다음과 같습니다.

  • 소개
  • 프로젝트 설치
  • React를 사용하여 UI 빌드
  • Azure Portal을 사용하여 Azure Cosmos DB 계정 만들기
  • Mongoose를 사용하여 Azure Cosmos DB에 연결
  • React 추가, 앱에 작업 만들기, 업데이트, 추가 및 삭제

Angular를 사용하여 동일한 앱을 빌드하시겠습니까? Angular 자습서 비디오 시리즈를 참조하세요.

필수 조건

  • Node.js: v14.x 이상(LTS 권장) node --version을 사용하여 확인
  • HTTP 테스트 도구: 불면증, curlVisual Studio 또는 PowerShell Invoke-RestMethod. 도구를 한 번 실행하여 가용성을 확인합니다(예: curl --version).

완료된 프로젝트

GitHub에서 완성된 애플리케이션을 가져옵니다.

소개

이 비디오에서는 Burke Holland는 Azure Cosmos DB를 소개하고 이 비디오 시리즈에서 생성된 응용 프로그램을 설명합니다.
성공 확인: 전체 앱 아키텍처(React UI, Node/Express API, MongoDB용 Azure Cosmos DB)를 이해합니다.

프로젝트 설정

이 비디오에서는 동일한 프로젝트에서 Express 및 React를 설정하는 방법을 보여줍니다. 그런 다음 Burke가 프로젝트에 있는 코드를 설명합니다.
성공 확인: 프로젝트가 npm start(또는 해당하는 시작 스크립트)를 사용하여 오류 없이 로컬에서 실행됩니다.

UI 빌드

이 비디오에서는 React를 사용하여 애플리케이션의 UI(사용자 인터페이스)를 만드는 방법을 보여줍니다.
성공 확인: React UI는 브라우저에서 렌더링되고 Hero 목록 레이아웃을 표시합니다.

참고 사항

이 비디오에서 참조되는 CSS는 react-cosmosdb GitHub 리포지토리에서 찾을 수 있습니다.

Azure Cosmos DB에 연결

이 비디오는 Azure Portal에서 Azure Cosmos DB 계정을 만들고, MongoDB 및 Mongoose 패키지를 설치하고, Azure Cosmos DB 연결 문자열을 사용하여 새로 만든 계정에 앱을 연결하는 방법을 보여줍니다.

예: Mongoose를 사용하여 연결

const mongoose = require("mongoose");

mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.on("connected", () => {
  console.log("Connected to Azure Cosmos DB for MongoDB");
});

확인: 앱을 시작하고 콘솔 로그를 확인합니다 Connected to Azure Cosmos DB for MongoDB.

앱에서 영웅을 읽고 만들기

이 비디오에서는 Azure Cosmos DB 데이터베이스에서 Heroes를 읽고 Heroes를 만드는 방법과 HTTP 테스트 유틸리티 및 React UI를 사용하여 이러한 메서드를 테스트하는 방법을 보여 줍니다.
성공 확인: Hero를 만들면 HTTP 201(또는 200)이 반환되고 새 영웅이 UI 목록에 나타납니다.

앱에서 Heroes 삭제 및 업데이트

이 비디오는 앱의 Heroes를 삭제하고 업데이트하며 UI에서 업데이트를 표시하는 방법을 보여줍니다.
성공 확인: 업데이트 및 삭제는 즉시 UI에 반영되고 데이터베이스에 유지됩니다.

앱 완성

이 비디오는 앱을 완성하고 백 엔드 API에 대한 UI 연결을 완성하는 방법을 보여줍니다.
성공 확인: 전체 만들기, 읽기, 업데이트 및 삭제 워크플로는 종단 간 작동합니다.

리소스 정리

이 응용 프로그램을 계속 사용하지 않으려면 Azure Portal에서 다음 단계에 따라 이 자습서에서 만든 리소스를 모두 삭제합니다.

  1. Azure Portal의 왼쪽 메뉴에서 리소스 그룹을 클릭한 다음 만든 리소스의 이름을 클릭합니다.
  2. 리소스 그룹 페이지에서 삭제를 클릭하고 텍스트 상자에서 삭제할 리소스의 이름을 입력한 다음 삭제를 클릭합니다.

다음 단계

이 자습서에서는 다음 방법에 대해 알아보았습니다.

  • React, 노드, Express 및 Azure Cosmos DB에서 앱 만들기
  • Azure Cosmos DB 계정 만들기
  • 앱을 Azure Cosmos DB 계정에 연결
  • HTTP 테스트 유틸리티를 사용하여 앱 테스트
  • 애플리케이션 실행 및 데이터베이스에 Heroes 추가

다음 자습서로 진행하여 Azure Cosmos DB로 MongoDB 데이터를 가져오는 방법을 알아볼 수 있습니다.

Azure Cosmos DB로 MongoDB 데이터 가져오기

Azure Cosmos DB로 마이그레이션하기 위한 용량 계획을 수행하려고 하시나요? 용량 계획을 위해 기존 데이터베이스 클러스터에 대한 정보를 사용할 수 있습니다.

  • Last updated on