Exercice : Utiliser un compte de stockage pour héberger un site web statique
Maintenant que l’API est déployée dans le cloud, en tant qu’ingénieur Tailwind Traders, vous devez mettre à jour le code client et le déployer pour prendre en charge les messages SignalR à venir pour Azure Functions.
Mettre à jour l’application cliente
Dans Visual Studio Code, ouvrez
./start/client/src/index.js
et remplacez tout le code pour écouter les messages SignalR. Le code obtient la liste de stock initiale avec une requête HTTP, puis écoute les mises à jour de la connexion SignalR. Lorsqu’un stock est mis à jour, le client met à jour le cours de l’action dans l’interface utilisateur.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();
Ouvrez
./start/client/index.html
et collez le code suivant à la place de la DIV actuelle avec l’ID de l’application.<!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>
Ce balisage inclut un élément de transition, qui permet Vue.js d’exécuter une animation subtile à mesure que les données de stock changent. Quand une action est mise à jour, la vignette disparaît, puis réapparaît rapidement. Ainsi, si la page est pleine de données boursières, les utilisateurs peuvent facilement voir les actions qui ont été modifiées.
Ajoutez le bloc de script suivant juste au-dessus de la référence à bundle.js pour inclure le Kit de développement logiciel (SDK) SignalR.
<script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.0.3/dist/browser/signalr.js"></script>
Mettre à jour le client .env
Créez un fichier de variables d’environnement dans le dossier
start/client
nommé.env
.Ajoutez une variable nommée
BACKEND_URL
et ajoutez sa valeur que vous avez copiée à partir de l’unité 5.BACKEND_URL=https://YOUR-FUNTIONS-APP-NAME.azurewebsites.net
Créer une ressource Azure Static Web Apps et déployer un client
Ouvrez le Portail Microsoft Azure pour créer une ressource Azure Static Web Apps.
Utilisez les informations suivantes pour terminer la création de ressources onglet Informations de base .
Nom Valeur Abonnement Sélectionnez votre abonnement. Resource group Utilisez le groupe de ressources stock-prototype
.Nom de l’application web statique Ajoutez votre nom à client
. Par exemple :client-jamie
.Type de plan d’hébergement Sélectionnez Gratuit. Source de déploiement Sélectionnez GitHub. Organization Sélectionner votre compte GitHub Référentiel Recherchez et sélectionnez mslearn-advocates.azure-functions-and-signalr
.Branche Sélectionnez la branche main. Présélections de build Sélectionnez Vue.js. Emplacement de l’application Entrez /start/client
.Emplacement de l’API Laissez ce champ vide. Emplacement de sortie Entrez dist
.Sélectionnez fichier de flux de travail en préversion pour passer en revue les paramètres de déploiement. L’étape Générer et déployer doit ressembler à ce qui suit :
- 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 ######
Sélectionnez Fermer pour enregistrer la modification.
Sélectionnez Vérifier + Créer, puis sélectionnez Créer pour créer la ressource. Attendez que le déploiement se termine avant de continuer.
Sélectionnez Accéder à la ressource pour ouvrir la nouvelle ressource Azure Static Web App.
Sur la page Présentation, copiez la valeur de l'URL. Il s’agit de l’URL de base de l’application web statique déployée.
Ajouter la variable BACKEND_URL au référentiel
Le flux de travail doit avoir la variable d’environnement BACKEND_URL
définie sur l’URL de base de l’application Azure Functions déployée à partir de l’unité 5.
Dans un navigateur pour votre fork GitHub de l'exemple de référentiel, sélectionnez Paramètres -> Security -> Secrets and variables -> Actions.
Sélectionnez variables, puis sélectionnez nouvelle variable de référentiel.
Utilisez le tableau suivant pour créer la variable :
Nom Valeur BACKEND_URL URL de base de l’application Azure Functions déployée. L’URL doit être au format de https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net
Sélectionnez Ajouter une variable pour enregistrer la variable dans le référentiel.
Modifier le flux de travail de déploiement GitHub
Dans le terminal Visual Studio Code, extrayez le nouveau fichier de flux de travail à partir de votre fourche (origine).
git pull origin main
Ouvrez le fichier
.github/workflows/azure-static-web-apps-*.yml
.Modifiez la valeur
name
en haut du fichier enClient
.Modifiez l’étape Générer et déployer pour ajouter la propriété env pour la variable d’environnement
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" ```
Enregistrez et envoyez les modifications au référentiel.
git add . git commit -m "Add BACKEND_URL environment variable" git push
Ouvrez l’onglet Actions dans le référentiel de duplication GitHub pour surveiller le déploiement.
Mettre à jour CORS dans l’application de fonction
Par défaut, les applications de fonction n’autorisent pas les requêtes CORS. Vous devez mettre à jour l’application de fonction pour autoriser les requêtes de l’application web statique.
Dans le Portail Microsoft Azure, accédez à l’application Azure Functions créée dans l’unité 5.
Dans le menu de gauche, sélectionnez API -> CORS.
Sélectionnez Activer Access-Control-Allow-Credentials.
Ajoutez la valeur que vous avez copiée pour l’URL de ressource Static Web Apps.
Propriété Valeur Origines autorisées URL de base de l’application web statique déployée. Sélectionnez Enregistrer pour enregistrer les paramètres CORS.
Tester le déploiement du client
- Dans un navigateur, utilisez l’URL de l’application web statique déployée pour ouvrir le client.
- Ouvrez les outils de développement pour regarder la console pour voir quand les données SignalR pour le stock mis à jour sont reçues. N’oubliez pas que ces requêtes ne sont pas HTTP. Vous ne les verrez donc pas sous l’onglet Réseau.
Félicitations ! Vous avez déployé votre application stock améliorée avec SignalR !