Azure Cosmos DB의 API for MongoDB를 사용하여 Angular 앱 만들기 - Node.js Express 앱 만들기

아티클
08/15/2024

적용 대상: MongoDB

여러 부분으로 구성된 이 자습서에서는 Express 및 Angular를 사용하여 Node.js로 작성된 새 앱을 만든 다음 Azure Cosmos DB의 API for MongoDB로 구성된 Azure Cosmos DB 계정에 연결하는 방법을 보여 줍니다.

자습서의 2부는 소개를 기반으로 하고 다음과 같은 작업을 다룹니다.

Angular CLI 및 TypeScript 설치
Angular를 사용하여 새 프로젝트 만들기
Express 프레임워크를 사용하여 앱 빌드
Postman에서 앱 테스트

연습 동영상

필수 조건

자습서의 이 부분을 시작하기 전에 소개 비디오를 시청했는지 확인합니다.

또한 이 자습서를 사용하려면 다음이 필요합니다.

Node.js 버전 8.4.0 이상
Postman
Visual Studio Code 또는 즐겨 찾는 코드 편집기

팁

이 자습서에서는 애플리케이션을 구축하는 단계를 단계별로 설명합니다. 완료된 프로젝트를 다운로드하려는 경우 GitHub의 angular-cosmosdb repo에서 완성된 애플리케이션을 가져올 수 있습니다.

Angular CLI 및 TypeScript 설치

Windows 명령 프롬프트 또는 Mac 터미널 창을 열고 Angular CLI를 설치합니다.
```
npm install -g @angular/cli
```
프롬프트에서 다음 명령을 입력하여 TypeScript를 설치합니다.
```
npm install -g typescript
```

Angular CLI를 사용하여 새 프로젝트 만들기

명령 프롬프트에서 새 프로젝트를 만들려는 폴더로 변경하고 다음 명령을 실행합니다. 이 명령은 새 폴더 및 angular-cosmosdb라는 프로젝트를 만들고 새 앱에 필요한 Angular 구성 요소를 설치합니다. 또한 최소한의 설치를 사용하고(--minimal), 프로젝트에서 Sass를 사용하도록 지정합니다(플래그로 지정된 CSS 유사 구문 --style scss).
```
ng new angular-cosmosdb --minimal --style scss
```
명령이 완료되면 src/client 폴더로 디렉터리를 변경합니다.
```
cd angular-cosmosdb
```
그런 다음 Visual Studio Code에서 폴더를 엽니다.
```
code .
```

Express 프레임워크를 사용하여 앱 빌드

Visual Studio Code의 탐색기 창에서 src 폴더를 마우스 오른쪽 단추로 클릭하고 새 폴더를 클릭하고 새 폴더 이름을 server로 지정합니다.
탐색기 창에서 server 폴더를 마우스 오른쪽 단추로 클릭하고, 새 파일을 클릭하고, 새 파일 이름을 index.js로 지정합니다.
명령 프롬프트로 다시 돌아가서 본문 파서를 설치하는 다음 명령을 사용합니다. 이렇게 하면 앱에서 API를 통해 전달되는 JSON 데이터를 구문 분석할 수 있습니다.
```
npm i express body-parser --save
```
Visual Studio Code에서 index.js 파일에 다음 코드를 복사합니다. 이 코드에서는 다음을 수행합니다.
- 참조 Express
- 요청 본문에서 JSON 데이터를 읽기 위해 본문 파서 가져오기
- 경로라는 기본 제공 기능 사용
- 쉽게 코드의 위치를 찾을 수 있도록 루트 변수 설정
- 포트 설정
- Express 시작
- 서버를 제공하는 데 사용하려고 하는 미들웨어를 사용하는 방법을 앱에 지시합니다
- dist 폴더에 있는 모든 항목을 제공하여 고정 콘텐츠로 사용
- 애플리케이션 제공 및 서버에 없는 모든 GET 요청에 index.html 제공(딥 링크의 경우)
- app.listen에서 서버 시작
- arrow 함수를 사용하여 활성 포트 기록
```
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const routes = require('./routes');

const root = './';
const port = process.env.PORT || '3000';
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
app.use('/api', routes);
app.get('*', (req, res) => {
  res.sendFile('dist/angular-cosmosdb/index.html', {root});
});

app.listen(port, () => console.log(`API running on localhost:${port}`));
```
Visual Studio Code의 탐색기 창에서 server 폴더를 마우스 오른쪽 단추로 클릭하고 새 파일을 클릭합니다. 새 파일의 이름을 routes.js로 지정합니다.

다음 코드를 routes.js에 복사합니다. 이 코드에서는 다음을 수행합니다.

Express 라우터 참조
Heroes 가져오기
정의된 Heroes에 JSON 다시 전송

const express = require('express');
const router = express.Router();

router.get('/heroes', (req, res) => {
 res.send(200, [
    {"id": 10, "name": "Starlord", "saying": "oh yeah"}
 ])
});

module.exports=router;

수정한 모든 파일 저장
Visual Studio Code에서 디버그 단추 를 클릭하고 기어 단추 를 클릭합니다. Visual Studio Code에서 새로운 launch.json 파일이 열립니다.
launch.json 파일의 11줄에서 "${workspaceFolder}\\server"을 "program": "${workspaceRoot}/src/server/index.js"로 변경하고 파일을 저장합니다.
디버깅 시작 단추 를 클릭하여 앱을 실행합니다.

앱이 오류 없이 실행되어야 합니다.

Postman을 사용하여 앱 테스트

이제 Postman을 열고 GET 상자에 http://localhost:3000/api/heroes를 배치합니다.
보내기 단추를 클릭하고 앱에서 json 응답을 가져옵니다.

이 응답에서는 앱을 로컬로 실행된다고 표시합니다.

다음 단계

자습서의 이 부분에서는 다음을 수행했습니다.

Angular CLI를 사용하여 Node.js 프로젝트 만들기
Postman을 사용하여 앱 테스트

UI를 빌드하는 자습서의 다음 단계로 진행할 수 있습니다.

Angular를 사용하여 UI 빌드

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

기존 데이터베이스 클러스터의 vCore 및 서버 수만을 알고 있는 경우, vCore 또는 vCPU를 사용하여 요청 단위 추정을 참조하세요
현재 데이터베이스 워크로드에 대한 일반적인 요청 비율을 알고 있는 경우 Azure Cosmos DB 용량 계획 도구를 사용하여 요청 단위 예측에 대해 읽어보세요.

다음을 통해 공유