Упражнение. Размещение статического веб-сайта в учетной записи хранения
Теперь, когда API развертывается в облаке, как инженер Tailwind Traders, необходимо обновить клиентский код и развернуть его для поддержки сообщений SignalR, поступающих для Функции Azure.
Обновление клиентского приложения
В Visual Studio Code откройте
./start/client/src/index.js
и замените весь код для прослушивания сообщений SignalR. Код получает начальный список акций с HTTP-запросом, а затем прослушивает обновления из подключения SignalR. При обновлении акций клиент обновляет цену акций в пользовательском интерфейсе.import './style.css'; import { BACKEND_URL } from './env'; const app = new Vue({ el: '#app', data() { return { stocks: [] } }, methods: { async getStocks() { try { const url = `${BACKEND_URL}/api/getStocks`; console.log('Fetching stocks from ', url); const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`); } app.stocks = await response.json(); } catch (ex) { console.error(ex); } } }, created() { this.getStocks(); } }); const connect = () => { const signalR_URL = `${BACKEND_URL}/api`; console.log(`Connecting to SignalR...${signalR_URL}`) const connection = new signalR.HubConnectionBuilder() .withUrl(signalR_URL) .configureLogging(signalR.LogLevel.Information) .build(); connection.onclose(() => { console.log('SignalR connection disconnected'); setTimeout(() => connect(), 2000); }); connection.on('updated', updatedStock => { console.log('Stock updated message received', updatedStock); const index = app.stocks.findIndex(s => s.id === updatedStock.id); console.log(`${updatedStock.symbol} Old price: ${app.stocks[index].price}, New price: ${updatedStock.price}`); app.stocks.splice(index, 1, updatedStock); }); connection.start().then(() => { console.log("SignalR connection established"); }); }; connect();
Откройте
./start/client/index.html
и вставьте следующий код вместо текущего DIV с идентификатором приложения.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" integrity="sha256-8B1OaG0zT7uYA572S2xOxWACq9NXYPQ+U5kHPV1bJN4=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <title>Stock Notifications | Enable automatic updates in a web application using Azure Functions and SignalR</title> </head> <body> <div id="app" class="container"> <h1 class="title">Stocks</h1> <div id="stocks"> <div v-for="stock in stocks" class="stock"> <transition name="fade" mode="out-in"> <div class="list-item" :key="stock.price"> <div class="lead">{{ stock.symbol }}: ${{ stock.price }}</div> <div class="change">Change: <span :class="{ 'is-up': stock.changeDirection === '+', 'is-down': stock.changeDirection === '-' }"> {{ stock.changeDirection }}{{ stock.change }} </span> </div> </div> </transition> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script> <script src="bundle.js" type="text/javascript"></script> </body> </html>
Эта разметка включает в себя элемент перехода, который позволяет Vue.js запускать тонкие анимации при изменении данных акций. При изменении курса акции плитка исчезает и снова появляется на экране. Благодаря этому, если на странице много биржевых данных, пользователь может легко увидеть, какие акции изменились.
Добавьте следующий блок скрипта чуть выше ссылки на bundle.js , чтобы включить пакет SDK SignalR.
<script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.0.3/dist/browser/signalr.js"></script>
Обновление клиента .env
Создайте файл переменных среды в папке
client/start
с именем.env
.Добавьте переменную с именем
BACKEND_URL
и добавьте его значение, скопированное из единицы 5.BACKEND_URL=https://YOUR-FUNTIONS-APP-NAME.azurewebsites.net
Создание ресурса статических веб-приложений Azure и развертывание клиента
Откройте портал Azure, чтобы создать новый ресурс Статические веб-приложения Azure.
Чтобы завершить вкладку "Основы создания ресурсов" , используйте следующие сведения.
Имя. Значение Отток подписок Выберите свою подписку. Группа ресурсов Используйте группу stock-prototype
ресурсов.Имя статического веб-приложения Добавьте имя client
в . Например,client-jamie
.Тип плана размещения Выберите Бесплатно. Источник развертывания Выберите GitHub. Организация Выбор учетной записи GitHub Репозиторий Поиск и выбор mslearn-advocates.azure-functions-and-signalr
.Ветвь Выберите главную ветвь. Предустановки сборки Выберите Vue.js. Расположение приложения Введите /start/client
.Расположение API Оставьте пустым. Расположение выходных данных Введите dist
.Выберите файл рабочего процесса предварительной версии, чтобы просмотреть параметры развертывания. Шаг "Сборка и развертывание " должен выглядеть следующим образом:
- name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123 }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: "upload" ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig app_location: "/solution/client" # App source code path api_location: "" # Api source code path - optional output_location: "dist" # Built app content directory - optional ###### End of Repository/Build Configurations ######
Нажмите кнопку "Закрыть ", чтобы сохранить изменение.
Выберите "Просмотр и создание", а затем нажмите кнопку "Создать ", чтобы создать ресурс. Дождитесь завершения развертывания, прежде чем продолжать работу.
Выберите "Перейти к ресурсу ", чтобы открыть новый ресурс статического веб-приложения Azure.
На странице обзора скопируйте значение URL-адреса. Это базовый URL-адрес развернутого статического веб-приложения.
Добавление переменной BACKEND_URL в репозиторий
Рабочий BACKEND_URL
процесс должен иметь переменную среды для развернутого Функции Azure базовый URL-адрес приложения из единицы 5.
В браузере для вилки GitHub примера репозитория выберите Параметры — Безопасность —>> Секреты и переменные —> Действия.
Выберите переменные, а затем выберите новую переменную репозитория.
Чтобы создать переменную, используйте следующую таблицу:
Имя. Значение BACKEND_URL Базовый URL-адрес развернутого приложения Функции Azure. URL-адрес должен быть в формате https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net
Выберите " Добавить переменную", чтобы сохранить переменную в репозитории.
Изменение рабочего процесса развертывания GitHub
В терминале Visual Studio Code извлеките новый файл рабочего процесса из вилки (источника).
git pull origin main
Откройте файл
.github/workflows/azure-static-web-apps-*.yml
.Измените
name
значение в верхней части файлаClient
на .Измените шаг сборки и развертывания , чтобы добавить свойство env для переменной
BACKEND_URL
среды.```yaml name: Client - Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v3 with: submodules: true lfs: false #Debug only - Did GitHub action variable get into workflow correctly? - name: Echo run: | echo "BACKEND_URL: ${{ vars.BACKEND_URL }}" - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123 }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: "upload" ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig app_location: "/solution/client" # App source code path api_location: "" # Api source code path - optional output_location: "dist" # Built app content directory - optional ###### End of Repository/Build Configurations ###### env: BACKEND_URL: ${{ vars.BACKEND_URL }} close_pull_request_job: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Close Pull Request Job steps: - name: Close Pull Request id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123 }} action: "close" ```
Сохраните и отправьте изменения в репозиторий.
git add . git commit -m "Add BACKEND_URL environment variable" git push
Откройте вкладку "Действия " в репозитории GitHub для просмотра развертывания.
Обновление CORS в приложении-функции
По умолчанию приложения-функции не разрешают запросы CORS. Необходимо обновить приложение-функцию, чтобы разрешить запросы из статического веб-приложения.
В портал Azure перейдите к приложению Функции Azure, созданному в уроке 5.
В меню слева выберите API —> CORS.
Выберите enable Access-Control-Allow-Credentials( Разрешить учетные данные).
Добавьте значение, скопированное для URL-адреса ресурса Статические веб-приложения.
Свойство Значение Допустимые источники Базовый URL-адрес развернутого статического веб-приложения. Нажмите кнопку "Сохранить", чтобы сохранить параметры CORS.
Тестирование развертывания клиента
- В браузере используйте URL-адрес развернутого статического веб-приложения, чтобы открыть клиент.
- Откройте средства разработчика, чтобы просмотреть консоль, чтобы узнать, когда данные SignalR для обновленной акции получены. Помните, что это не HTTP-запросы, поэтому вы не увидите их на вкладке "Сеть".
Поздравляем! Вы развернули ваше приложение для акций, улучшенное с помощью SignalR!