Latihan - Menggunakan akun penyimpanan untuk meng-hosting situs web statik
Sekarang setelah API disebarkan ke cloud, sebagai teknisi Tailwind Traders, Anda perlu memperbarui kode klien dan menyebarkannya untuk mendukung pesan SignalR yang datang untuk Azure Functions.
Memperbarui aplikasi klien
Di Visual Studio Code, buka
./start/client/src/index.jsdan ganti semua kode untuk mendengarkan pesan SignalR. Kode mendapatkan daftar stok awal dengan permintaan HTTP lalu mendengarkan pembaruan dari koneksi SignalR. Saat saham diperbarui, klien memperbarui harga saham di UI.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();Buka
./start/client/index.htmldan tempel kode berikut sebagai pengganti DIV saat ini dengan ID aplikasi.<!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>Markup ini mencakup elemen transisi, yang memungkinkan Vue.js menjalankan animasi halang saat data stok berubah. Ketika stok diperbarui, petak peta memudar dan dengan cepat kembali ke tampilan. Dengan cara ini jika halaman penuh dengan data stok, pengguna dapat dengan mudah melihat saham mana yang telah berubah.
Tambahkan blok skrip berikut tepat di atas referensi ke bundle.js untuk menyertakan SignalR SDK.
<script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.0.3/dist/browser/signalr.js"></script>
Memperbarui klien .env
Buat file variabel lingkungan di
start/clientfolder bernama.env.Tambahkan variabel bernama
BACKEND_URLdan tambahkan nilainya yang Anda salin dari unit 5.BACKEND_URL=https://YOUR-FUNTIONS-APP-NAME.azurewebsites.net
Membuat sumber daya aplikasi Azure Static Web dan menyebarkan klien
Buka portal Azure untuk membuat sumber daya Azure Static Web Apps baru.
Gunakan informasi berikut untuk menyelesaikan tab Dasar pembuatan sumber daya.
Nama Nilai Langganan Pilih langganan Anda. Grup sumber daya Gunakan grup stock-prototypesumber daya .Nama Aplikasi Web Statis Pascapending nama Anda ke client. Contohnya,client-jamie.Jenis paket Hosting Pilih Gratis. Sumber penyebaran Pilih GitHub. Organization Pilih akun GitHub Anda Repositori Cari dan pilih mslearn-advocates.azure-functions-and-signalr.Cabang Pilih cabang utama. Bangun Preset Pilih Vue.js. Lokasi aplikasi Memasuki /start/client.Lokasi API Biarkan kosong. Lokasi Output Memasuki dist.Pilih Pratinjau file alur kerja untuk meninjau pengaturan penyebaran. Langkah Build And Deploy akan terlihat seperti berikut ini:
- 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 ######Pilih Tutup untuk menyimpan perubahan.
Pilih Tinjau + Buat, lalu pilih Buat untuk membuat sumber daya. Tunggu hingga penerapan selesai sebelum melanjutkan.
Pilih Buka sumber daya untuk membuka sumber daya Azure Static Web App baru.
Pada halaman Gambaran Umum , salin nilai URL . Ini adalah URL dasar dari aplikasi web statis yang disebarkan.
Menambahkan variabel BACKEND_URL ke repositori
Alur kerja harus mengatur BACKEND_URL variabel lingkungan ke URL dasar aplikasi Azure Functions yang disebarkan dari unit 5.
Di browser untuk fork GitHub Anda dari repositori sampel, pilih Pengaturan - Keamanan ->> Rahasia dan variabel -> Tindakan.
Pilih Variabel, lalu pilih Variabel repositori baru.
Gunakan tabel berikut untuk membuat variabel:
Nama Nilai BACKEND_URL URL dasar aplikasi Azure Functions yang disebarkan. URL harus dalam format https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.netPilih Tambahkan variabel untuk menyimpan variabel ke repositori.
Edit alur kerja penyebaran GitHub
Di terminal Visual Studio Code, tarik ke bawah file alur kerja baru dari fork Anda (asal).
git pull origin mainBuka file
.github/workflows/azure-static-web-apps-*.yml.nameUbah nilai di bagian atas file menjadiClient.Edit langkah Build And Deploy untuk menambahkan properti env untuk
BACKEND_URLvariabel lingkungan.```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" ```Simpan dan dorong perubahan ke repositori.
git add . git commit -m "Add BACKEND_URL environment variable" git pushBuka tab Tindakan di repositori fork GitHub untuk menonton penyebaran.
Memperbarui CORS di aplikasi fungsi
Secara default, aplikasi fungsi tidak mengizinkan permintaan CORS. Anda perlu memperbarui aplikasi fungsi untuk mengizinkan permintaan dari aplikasi web statis.
Di portal Azure, navigasikan ke aplikasi Azure Functions yang dibuat di unit 5.
Di menu sebelah kiri, pilih API -> CORS.
Pilih Aktifkan Access-Control-Allow-Credentials.
Tambahkan nilai yang Anda salin untuk URL sumber daya Static Web Apps.
Properti Nilai Asal yang dibolehkan URL dasar aplikasi web statis yang disebarkan. Pilih Simpan untuk menyimpan pengaturan CORS.
Menguji penyebaran klien
- Di browser, gunakan URL aplikasi web statis yang disebarkan untuk membuka klien.
- Buka alat pengembang untuk menonton Konsol untuk melihat kapan data SignalR untuk stok yang diperbarui diterima. Ingat ini bukan permintaan HTTP, sehingga Anda tidak akan melihatnya di tab Jaringan.
Selamat! Anda telah menyebarkan aplikasi stok yang ditingkatkan dengan SignalR!