연습 - 폴링 기반 웹앱의 제한 사항에 대한 분석

15분

프로토타입을 변경하기 전에 프로토타입을 실행하여 가정의 유효성을 검사해야 합니다. 프로토타입은 GitHub의 소스 코드 리포지토리에 있습니다.

Azure 리소스 만들기

별도의 브라우저 탭 또는 창에서 mslearn-advocates.azure-functions-and-signalr 링크를 사용하여 GitHub의 샘플 리포지토리를 포크합니다. 이를 통해 변경 내용을 고유의 소스 코드 버전에 푸시할 수 있습니다. 이는 나중에 모듈에서 Azure에 소스 코드를 배포하기 위해 필요한 단계입니다.
터미널에서 리포지토리를 복제합니다. 다음 명령에서 MicrosoftDocs를 사용자 계정으로 바꿉니다.
```
git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype
```
setup-resources 폴더에 종속성을 설치합니다.
```
cd stock-prototype/setup-resources && npm install
```
EBADENGINE에 대한 경고를 받으면 무시할 수 있습니다.
Azure CLI를 사용하여 Azure에 로그인합니다.
```
az login
```
구독을 보고 기본 Azure 구독을 설정합니다.

구독을 확인합니다.
```
az account list --output json | jq -r '.[] | .name' | sort
```
기본 구독을 설정하려면 YOUR-SUBSCRIPTION-ID를 이전 Azure CLI 출력의 구독 ID로 바꿉니다.
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
이 기본 구독은 Azure 리소스를 만드는 데 사용됩니다.
Azure 리소스를 만들고 샘플 데이터를 데이터베이스에 업로드합니다. 프로세스를 완료하는 데 몇 분 정도 걸릴 수 있습니다.
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
이름을 큰따옴표로 묶어야 합니다. 해당 위치에 사용 가능한 리소스가 부족한 오류로 인해 스크립트 오류가 발생하면 스크립트를 편집하여 위치를 변경합니다. LOCATION=<NEW LOCATION>.
프로토타입을 실행하는 데 필요하므로 필요한 정보를 복사합니다.

리소스 종류 환경 변수

Azure Cosmos DB 참조: COSMOSDB_CONNECTION_STRING

Azure Storage 참조: STORAGE_CONNECTION_STRING

리소스 그룹 RESOURCE_GROUP_NAME이라고 합니다.
Node.js 스크립트를 사용하여 다음 명령으로 샘플 데이터를 데이터베이스에 업로드합니다.
```
npm start
```
터미널에서 root 폴더로 이동합니다.
```
cd ..
```

리소스 종류	환경 변수
Azure Cosmos DB	참조: COSMOSDB_CONNECTION_STRING
Azure Storage	참조: STORAGE_CONNECTION_STRING
리소스 그룹	RESOURCE_GROUP_NAME이라고 합니다.

종속성 설치 및 프로토타입 실행

종속성을 설치합니다.

cd start/client && npm install && cd ../..
cd start/server && npm install && cd ../..

작업 영역에 대해 Azure Functions 앱을 선택하라는 알림이 표시되면 start/server를 선택합니다. 이는 서버 쪽 코드를 실행하는 데 사용할 함수 앱입니다.
최신 Azure Functions Core Tools 설치에 대한 알림을 받으면 설치를 선택합니다.

클라이언트 및 서버 URL 가져오기

로컬로 실행할 때 클라이언트와 서버 애플리케이션은 서로를 찾을 수 있는 위치를 알아야 합니다. URL은 다음과 같습니다.

클라이언트: http://localhost:3000
서버: http://localhost:7071

Azure Functions 앱에 대한 로컬 설정 업데이트

프로토타입의 Azure Functions 앱에 연결 문자열을 추가합니다.

./start/server/local.settings.json 파일을 만들고 다음을 붙여넣습니다. 이 파일에는 로컬 함수 프로젝트에 대한 구성 설정이 있습니다.

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
  },
  "Host" : {
    "LocalHttpPort": 7071,
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

위에서 복사한 값으로 다음 변수를 업데이트합니다.

속성 값

AzureWebJobsStorage Storage 연결 문자열로 바꿉니다.

COSMOSDB_CONNECTION_STRING Cosmos DB 연결 문자열로 바꿉니다.

이제 Functions 앱은 클라이언트로부터 요청을 받은 다음 데이터베이스에 연결하고 타이머 트리거를 올바르게 관리할 수 있습니다.

속성	값
AzureWebJobsStorage	Storage 연결 문자열로 바꿉니다.
COSMOSDB_CONNECTION_STRING	Cosmos DB 연결 문자열로 바꿉니다.

클라이언트 앱에 대한 로컬 설정 추가

프로토타입의 클라이언트 애플리케이션에 서버 URL을 추가합니다.

./start/client를 열고 다음 콘텐츠로 .env 파일을 만듭니다.

BACKEND_URL=http://localhost:7071

서버 애플리케이션 실행

터미널에서 Azure Functions 애플리케이션을 시작합니다.
```
cd start/server && npm start
```

터미널에 API 엔드포인트가 표시될 때까지 기다립니다.

Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

클라이언트 애플리케이션 실행

새 터미널에서 클라이언트 애플리케이션을 시작합니다.
```
cd start/client && npm start
```
애플리케이션이 실행 중이라는 알림이 표시되면 브라우저에서 열기를 선택하여 프로토타입을 사용합니다.
단말기와 주가의 프로토타입을 동시에 볼 수 있도록 브라우저 창을 정렬합니다.
프로토타입 브라우저 창에서 브라우저의 개발자 도구를 엽니다. 데이터가 변경되지 않은 경우에도 브라우저는 모든 데이터에 대해 5초마다 API에 요청하고 있습니다.
브라우저 창에서 Azure Functions 앱의 출력을 살펴봅니다. 단일 주가는 1분마다 변경됩니다. API의 가격이 변경되면 다음번 클라이언트에서 모든 데이터를 가져올 때 해당 변경 내용이 포함됩니다.
클라이언트 시작 및 서버 시작 터미널 모두에서 Ctrl + C를 사용하여 애플리케이션을 중지하거나 휴지통 아이콘을 선택하여 터미널을 종료합니다.

이 단원에서 프로토타입을 실행했습니다. 클라이언트가 성공적으로 실행되기는 하지만 효율적이지 않습니다. 각 개별 클라이언트는 주식 수가 적어 이를 알아차리지 못할 수 있지만, 주식 수가 증가하고 서버에서 끌어오는 클라이언트 수가 늘어나면 상황이 달라집니다. 프로토타입은 개선될 수 있다. 다음 단원에서 그 방법을 알아보겠습니다.