Gyakorlat – Statikus webhely üzemeltetése tárfiókban
Most, hogy az API üzembe lett helyezve a felhőben, Tailwind Traders-mérnökként frissítenie kell az ügyfélkódot, és telepítenie kell, hogy támogassa az Azure Functionshez érkező SignalR-üzeneteket.
Az ügyfélalkalmazás frissítése
A Visual Studio Code-ban nyissa meg
./start/client/src/index.js
és cserélje le az összes kódot a SignalR-üzenetek figyeléséhez. A kód lekéri a kezdeti készletlistát egy HTTP-kéréssel, majd figyeli a SignalR-kapcsolat frissítéseit. Egy részvény frissítésekor az ügyfél frissíti a részvény árát a felhasználói felületen.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();
Nyissa meg
./start/client/index.html
és illessze be az alábbi kódot az aktuális DIV helyett az alkalmazás azonosítójával.<!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>
Ez a korrektúra tartalmaz egy áttűnés elemet, amely lehetővé teszi, hogy Vue.js finom animációt futtasson a részvényadatok változásakor. A tőzsdei adat frissülésekor a csempe elhalványul, majd gyorsan visszaáll az eredeti megjelenésre. Így ha az oldal már nagyon sok adatot tartalmaz, a felhasználó könnyebben láthatja, hogy mely tőzsdeinformációk módosulnak éppen.
Adja hozzá a következő szkriptblokkot a bundle.js hivatkozás fölé a SignalR SDK hozzáadásához.
<script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.0.3/dist/browser/signalr.js"></script>
Az ügyfél .env frissítése
Hozzon létre egy környezeti változófájlt a
start/client
nevesített.env
mappában.Adjon hozzá egy elnevezett
BACKEND_URL
változót, és adja hozzá az 5. egységből másolt értékét.BACKEND_URL=https://YOUR-FUNTIONS-APP-NAME.azurewebsites.net
Azure Static Web Apps-erőforrás létrehozása és ügyfél üzembe helyezése
Nyissa meg az Azure Portalt egy új Azure Static Web Apps-erőforrás létrehozásához.
Az alábbi információk segítségével fejezze be az erőforrás-létrehozás alapjai lapot.
Név szerint Érték Előfizetés Válassza ki előfizetését. Erőforráscsoport Használja az erőforráscsoportot stock-prototype
.Statikus webalkalmazás neve Írja fel a nevét a (z) gombra client
. Például:client-jamie
.Üzemeltetési terv típusa Válassza az Ingyenes lehetőséget. Központi telepítés forrása Válassza a GitHub lehetőséget. Organization A GitHub-fiók kiválasztása Adattár Keressen rá, és válassza a lehetőséget mslearn-advocates.azure-functions-and-signalr
.Ág Válassza ki a fő ágat. Előre beállított buildek Válassza Vue.js. Alkalmazás helye Írja be /start/client
.API-hely Hagyja üresen. Kimeneti hely Írja be dist
.Válassza az Előzetes verziójú munkafolyamat-fájlt az üzembehelyezési beállítások áttekintéséhez. A buildelési és üzembe helyezési lépésnek az alábbihoz hasonlóan kell kinéznie:
- 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 ######
A módosítás mentéséhez válassza a Bezárás lehetőséget.
Válassza a Véleményezés + Létrehozás lehetőséget, majd az erőforrás létrehozásához válassza a Létrehozás lehetőséget . Folytatás előtt várja meg, amíg az üzembe helyezési folyamat befejeződik.
Válassza az Ugrás az erőforrásra lehetőséget az új Azure Static Web App-erőforrás megnyitásához.
Az Áttekintés lapon másolja ki az URL-címet. Ez az üzembe helyezett statikus webalkalmazás alap URL-címe.
A BACKEND_URL változó hozzáadása az adattárhoz
A munkafolyamatnak az BACKEND_URL
5. egységből az üzembe helyezett Azure Functions-alkalmazás alap URL-címére kell beállítania a környezeti változót.
A mintaadattár GitHub-elágazásának böngészőben válassza a Gépház –> Biztonság –> Titkos kódok és változók –> Műveletek lehetőséget.
Válassza a Változók lehetőséget, majd válassza az Új adattár változót.
A változó létrehozásához használja az alábbi táblázatot:
Név szerint Érték BACKEND_URL Az üzembe helyezett Azure Functions-alkalmazás alap URL-címe. Az URL-címnek a következő formátumban kell lennie: https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net
Válassza a Változó hozzáadása lehetőséget a változó adattárba való mentéséhez.
A GitHub üzembehelyezési munkafolyamatának szerkesztése
A Visual Studio Code terminálban húzza le az új munkafolyamat-fájlt az elágazásból (forrásból).
git pull origin main
Nyissa meg a
.github/workflows/azure-static-web-apps-*.yml
fájlt.Módosítsa a
name
fájl tetején lévő értéket a következőreClient
: .A buildelési és üzembe helyezési lépés szerkesztésével adja hozzá a környezeti változó env tulajdonságát
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" ```
Mentse és küldje el a módosításokat az adattárba.
git add . git commit -m "Add BACKEND_URL environment variable" git push
Nyissa meg a Műveletek lapot a GitHub-tárházban az üzembe helyezés megtekintéséhez.
CORS frissítése a függvényalkalmazásban
Alapértelmezés szerint a függvényalkalmazások nem engedélyezik a CORS-kérelmeket. A statikus webalkalmazásból érkező kérések engedélyezéséhez frissítenie kell a függvényalkalmazást.
Az Azure Portalon keresse meg az 5. leckében létrehozott Azure Functions-alkalmazást.
A bal oldali menüben válassza az API –> CORS lehetőséget.
Válassza a Hozzáférés-vezérlés engedélyezése hitelesítő adatok engedélyezése lehetőséget.
Adja hozzá a Static Web Apps erőforrás URL-címéhez másolt értéket.
Tulajdonság Érték Engedélyezett eredetek Az üzembe helyezett statikus webalkalmazás alap URL-címe. A CORS-beállítások mentéséhez válassza a Mentés lehetőséget.
Az ügyfél üzembe helyezésének tesztelése
- A böngészőben az üzembe helyezett statikus webalkalmazás URL-címével nyissa meg az ügyfelet.
- Nyissa meg a fejlesztői eszközöket, hogy megnézhesse a konzolt, hogy mikor érkeznek meg a frissített részvények SignalR-adatai. Ne feledje, hogy ezek nem HTTP-kérések, ezért nem fogja látni őket a Hálózat lapon.
Gratulálunk! A SignalR használatával továbbfejlesztettük a készletalkalmazást!