Tutorial: Membuat aplikasi obrolan tanpa server dengan layanan Azure Web PubSub dan Azure Static Web Apps

2024-12-12

Azure Web PubSub membantu Anda membangun aplikasi web olahpesan real time menggunakan WebSocket. Azure Static Web Apps membantu Anda membangun dan menyebarkan aplikasi web tumpukan penuh secara otomatis ke Azure dari repositori kode. Dalam tutorial ini, Anda mempelajari cara menggunakan Web PubSub dan Static Web Apps bersama-sama untuk membangun aplikasi ruang obrolan real time.

Lebih khusus lagi, Anda mempelajari cara:

Membangun aplikasi obrolan tanpa server
Menangani input fungsi Web PubSub dan pengikatan output
Bekerja dengan Static Web Apps

Penting

String koneksi mentah muncul dalam artikel ini hanya untuk tujuan demonstrasi.

String koneksi menyertakan informasi otorisasi yang diperlukan agar aplikasi Anda mengakses layanan Azure Web PubSub. Kunci akses di dalam string koneksi mirip dengan kata sandi root untuk layanan Anda. Di lingkungan produksi, selalu lindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman dan mengamankan koneksi Anda dengan WebPubSubServiceClient.

Hindari mendistribusikan kunci akses ke pengguna lain, melakukan hard-coding, atau menyimpannya di mana saja dalam teks biasa yang dapat diakses orang lain. Putar kunci Anda jika Anda yakin bahwa kunci tersebut mungkin telah disusupi.

Gambaran Umum

Diagram memperlihatkan cara kerja Azure Web PubSub dengan Azure Static Web Apps.

GitHub atau Azure Repos menyediakan kontrol sumber untuk Static Web Apps. Azure memantau cabang repositori yang Anda pilih, dan setiap kali ada perubahan kode pada repositori sumber, build baru aplikasi web Anda secara otomatis dijalankan dan disebarkan ke Azure. Pengiriman berkelanjutan disediakan oleh GitHub Actions dan Azure Pipelines. Static Web Apps mendeteksi build baru dan menyajikannya kepada pengguna titik akhir.

Contoh aplikasi ruang obrolan yang disediakan dengan tutorial ini memiliki alur kerja berikut.

Saat pengguna masuk ke aplikasi, Api Azure Functions login dipicu untuk menghasilkan URL koneksi klien layanan Web PubSub.
Ketika klien menginisialisasi permintaan koneksi ke Web PubSub, layanan mengirim peristiwa sistem connect yang memicu Functions connect API untuk mengautentikasi pengguna.
Saat klien mengirim pesan ke layanan Azure Web PubSub, layanan merespons dengan peristiwa pengguna message dan Functions message API dipicu untuk disiarkan, pesan ke semua klien yang terhubung.
Api Functions validate dipicu secara berkala untuk Perlindungan Penyalahgunaan CloudEvents ketika peristiwa di Azure Web PubSub dikonfigurasi dengan parameter {event}yang telah ditentukan sebelumnya , yaitu, https://$STATIC_WEB_APP/api/{event}.

Catatan

API connect Functions dan message dipicu saat layanan Azure Web PubSub dikonfigurasi dengan dua peristiwa ini.

Prasyarat

Akun GitHub.
Akun Azure. Jika Anda tidak memiliki langganan Azure, buat akun gratis Azure sebelum memulai.
Azure CLI (versi 2.29.0 atau lebih tinggi) atau Azure Cloud Shell untuk mengelola sumber daya Azure.

Membuat sumber daya Web PubSub

Masuk ke Azure CLI dengan menggunakan perintah berikut ini.
```
az login
```

Buat grup sumber daya.

az group create \
  --name my-awps-swa-group \
  --location "eastus2"

Buat sumber daya Web PubSub.

az webpubsub create \
  --name my-awps-swa \
  --resource-group my-awps-swa-group \
  --location "eastus2" \
  --sku Free_F1

Dapatkan dan tahan kunci akses untuk digunakan nanti.

String koneksi mentah muncul dalam artikel ini hanya untuk tujuan demonstrasi. Di lingkungan produksi, selalu lindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman dan mengamankan koneksi Anda dengan WebPubSubServiceClient.
```
az webpubsub key show \
  --name my-awps-swa \
  --resource-group my-awps-swa-group
```
```
AWPS_ACCESS_KEY=<YOUR_AWPS_ACCESS_KEY>
```
Ganti tempat penampung <YOUR_AWPS_ACCESS_KEY> dengan nilai untuk primaryConnectionString dari langkah sebelumnya.

Membuat repositori

Artikel ini menggunakan repositori templat GitHub untuk memudahkan Anda memulai. Templat ini menampilkan aplikasi pemula yang Anda sebarkan ke Azure Static Web Apps.

https://github.com/Azure/awps-swa-sample/generate Buka untuk membuat repositori baru untuk tutorial ini.
Pilih diri Anda sebagai Pemilik dan beri nama repositori Anda my-awps-swa-app.
Anda dapat membuat repositori Publik atau Privat sesuai dengan preferensi Anda. Keduanya bekerja untuk tutorial.
Pilih Buat repositori dari templat.

Membuat Static Web App

Setelah repositori dibuat, Anda dapat membuat aplikasi web statis dari Azure CLI.

Buat variabel untuk menahan nama pengguna GitHub Anda.
```
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
```
Ganti tempat penampung <YOUR_GITHUB_USER_NAME> dengan nama pengguna GitHub Anda.

Buat aplikasi web statis baru dari repositori Anda. Saat Anda menjalankan perintah ini, CLI memulai masuk interaktif GitHub. Ikuti pesan untuk menyelesaikan otorisasi.

az staticwebapp create \
    --name my-awps-swa-app \
    --resource-group my-awps-swa-group \
    --source https://github.com/$GITHUB_USER_NAME/my-awps-swa-app \
    --location "eastus2" \
    --branch main \
    --app-location "src" \
    --api-location "api" \
    --login-with-github

Penting

URL yang diteruskan ke parameter --source tidak boleh menyertakan .git sebagai akhirannya.

Buka https://github.com/login/device.
Masukkan kode pengguna seperti yang ditampilkan pesan konsol Anda.
Pilih Lanjutkan.
Pilih Otorisasi AzureAppServiceCLI.

Konfigurasikan pengaturan aplikasi web statis.

az staticwebapp appsettings set \
  -n my-awps-swa-app \
  --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa

Menampilkan situs web

Ada dua aspek untuk menyebarkan aplikasi statis: Yang pertama membuat sumber daya Azure yang mendasar yang membentuk aplikasi Anda. Yang kedua adalah alur kerja GitHub Actions yang membangun dan menerbitkan aplikasi Anda.

Sebelum Anda dapat menavigasikan ke situs statik baru, build penyebaran harus selesai berjalan terlebih dahulu.

Kembali ke jendela konsol Anda dan jalankan perintah berikut untuk mencantumkan URL yang terkait dengan aplikasi Anda.
```
az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"
```
Output perintah ini mengembalikan URL ke repositori GitHub Anda.
Salin URL repositori dan tempelkan ke browser.
Pilih tab Tindakan.

Pada titik ini, Azure membuat sumber daya untuk mendukung aplikasi web statis Anda. Tunggu hingga ikon di samping alur kerja yang sedang berjalan berubah menjadi tanda centang dengan latar belakang ✅hijau . Operasi ini mungkin perlu waktu beberapa menit untuk diselesaikan.

Setelah ikon berhasil muncul, alur kerja selesai dan Anda dapat kembali ke jendela konsol Anda.
Jalankan perintah berikut untuk mengkueri URL situs web Anda.
```
az staticwebapp show \
  --name my-awps-swa-app \
  --query "defaultHostname"
```
Tahan url untuk diatur di penanganan aktivitas Web PubSub.
```
STATIC_WEB_APP=<YOUR_STATIC_WEB_APP>
```

Mengonfigurasi penanganan aktivitas Web PubSub

Anda sangat dekat untuk menyelesaikan. Langkah terakhir adalah mengonfigurasi Web PubSub sehingga permintaan klien ditransfer ke API fungsi Anda.

Jalankan perintah berikut untuk mengonfigurasi peristiwa layanan Web PubSub. Ini memetakan fungsi di bawah api folder di repositori Anda ke penanganan aktivitas Web PubSub.

az webpubsub hub create \
  -n "my-awps-swa" \
  -g "my-awps-swa-group" \
  --hub-name "sample_swa" \
  --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" system-event="connect"

Sekarang Anda siap untuk bermain dengan situs web Anda YOUR_STATIC_WEB_APP>.< Salin ke browser dan pilih Lanjutkan untuk mulai mengobrol dengan teman Anda.

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, Anda dapat menghapus grup sumber daya dan aplikasi web statis dengan menjalankan perintah berikut.

az group delete --name my-awps-swa-group

Langkah berikutnya

Dalam mulai cepat ini, Anda mempelajari cara mengembangkan dan menyebarkan aplikasi obrolan tanpa server. Sekarang, Anda dapat mulai membangun aplikasi Anda sendiri.

Bersenang-senang dengan demo yang dapat dimainkan

Pengikatan Azure Web PubSub untuk Azure Functions

Bagikan melalui