Упражнение. Анализ ограничений веб-приложения на основе опроса

15 мин

Перед изменением прототипа необходимо запустить его для проверки допущений. Прототип находится в репозитории исходного кода на GitHub.

Создание ресурсов Azure

На отдельной вкладке или окне браузера вилку примера репозитория на сайте GitHub со следующей ссылкой: mslearn-advocates.azure-functions-and-signalr. Это позволяет отправлять изменения в собственную версию исходного кода. Это обязательный шаг для развертывания исходного кода в 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 с помощью Azure CLI.
```
az login
```
Просмотрите подписки и задайте подписку Azure по умолчанию.

Просмотр подписок.
```
az account list --output json | jq -r '.[] | .name' | sort
```
Чтобы задать подписку по умолчанию, замените YOUR-SUBSCRIPTION-ID идентификатор подписки из предыдущего выходных данных Azure CLI.
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
Эта подписка по умолчанию используется для создания ресурсов Azure.
Создайте ресурсы Azure и отправьте примеры данных в базу данных. Процесс может занять несколько минут.
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
Убедитесь, что имя заключено в двойные кавычки.

Скопируйте необходимые сведения, они потребуются для запуска прототипа.

Тип ресурса	Переменная среды
Azure Cosmos DB	Называется COSMOSDB_CONNECTION_STRING
Хранилище Azure	Называется STORAGE_CONNECTION_STRING
Группа ресурсов	Называется RESOURCE_GROUP_NAME.

Используйте скрипт Node.js для отправки примеров данных в базу данных с помощью следующей команды.
```
npm start
```
В терминале перейдите в корневую папку.
```
cd ..
```

Установка зависимостей и запуск прототипа

Установите зависимости.

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

Если уведомление запрашивает выбор приложения функций Azure для рабочей области, выберите start/server. Это приложение-функция, которое будет использоваться для запуска серверного кода.
Если вы получите уведомление об установке последних Функции Azure Core Tools, нажмите кнопку "Установить".

Получение URL-адресов клиента и сервера

При локальном запуске клиентские и серверные приложения должны знать, где найти друг друга. URL-адреса:

Клиент: http://localhost:3000
Сервер: http://localhost:7071

Обновление локальных параметров для приложения Функции Azure

Добавьте строка подключения в приложение Функции Azure прототипа.

Создайте файл ./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	Замените служба хранилища строка подключения.
COSMOSDB_CONNECTION_STRING	Замените строка подключения Cosmos DB.

Теперь приложение "Функции" может получать запросы от клиента, а затем подключаться к базе данных и правильно управлять триггером таймера.

Добавление локальных параметров для клиентского приложения

Добавьте URL-адрес сервера в клиентское приложение прототипа.

Откройте ./start/client и создайте .env файл со следующим содержимым.

BACKEND_URL=http://localhost:7071

Запуск серверного приложения

В терминале запустите приложение Функции Azure.
```
cd start/server && npm start
```

Подождите, пока терминал не отобразит конечные точки API.

Functions:

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

        setPrice: timerTrigger

Выполнение клиентского приложения

В новом терминале запустите клиентское приложение.
```
cd start/client && npm start
```
Когда появится уведомление о запуске приложения, нажмите кнопку "Открыть в браузере ", чтобы использовать прототип.
Расположите окна браузера, чтобы вы могли видеть терминал и прототип цен на акции одновременно.
В окне браузера прототипа откройте средства разработчика браузера. Обратите внимание, что браузер выполняет запрос к API каждые 5 секунд для всех данных, даже если данные не изменились.
В окне браузера просмотрите выходные данные для приложения Функции Azure. Одна цена акций меняется каждую минуту. Когда цена в API изменяется, следующий клиент извлекает все данные, включая это изменение.
В начальных и начальных терминалах сервера остановите приложения с помощью ctrl + C или убейте терминал, выбрав значок корзины.

В этом уроке вы запустили прототип. Хотя клиент успешно работает, он не работает. Хотя каждый отдельный клиент может не заметить это с таким небольшим количеством акций, что изменится по мере роста количества акций и числа клиентов, извлекаемых с сервера. Прототип можно улучшить. Давайте узнаем, как в следующем уроке.

Продолжить