Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Dalam artikel ini, Anda belajar menyebarkan aplikasi React ke Azure Static Web Apps menggunakan portal Azure.
Prasyarat
| Resource | Notes |
|---|---|
| Langganan Azure | Jika Anda tidak memiliki langganan Azure, buat akun uji coba gratis. |
| Akun GitHub | Jika Anda tidak memiliki akun GitHub, Anda dapat membuatnya secara gratis. |
| Resource | Notes |
|---|---|
| Langganan Azure | Jika Anda tidak memiliki langganan Azure, buat akun uji coba gratis. |
| akun Azure DevOps | Jika Anda tidak memiliki akun GitHub, Anda dapat buat satu. |
Membuat repositori
Artikel ini menggunakan repositori templat GitHub untuk memudahkan Anda memulai. Templat ini menampilkan aplikasi pemula untuk disebarkan ke Azure Static Web Apps.
Navigasi ke lokasi berikut untuk membuat repositori baru:
Beri nama repositori Anda my-first-static-web-app.
Pilih Buat repositori dari templat.
Artikel ini menggunakan repositori Azure DevOps untuk memudahkan Anda memulai. Repositori ini memuat aplikasi awal yang digunakan untuk mengimplementasikan menggunakan Azure Static Web Apps.
Masuk ke Azure DevOps.
Pilih Repositori baru.
Di jendela Buat proyek baru , perluas menu Tingkat Lanjut dan buat pilihan berikut:
Setting Nilai Proyek Masukkan my-first-web-static-app. Keterlihatan Pilih Privat. Pengendalian Versi Pilih Git. Proses item kerja Pilih opsi yang paling sesuai dengan metode pengembangan Anda. Pilih Buat.
Pilih item menu Repositori .
Pilih item menu File.
Di bawah kartu Impor repositori, pilih Impor.
Salin URL repositori untuk framework pilihan Anda, dan tempelkan ke dalam kotak Clone URL.
Pilih Impor dan tunggu hingga proses impor selesai.
Membuat Static Web App
Setelah repositori dibuat, Anda dapat membuat aplikasi web statik dari portal Microsoft Azure.
- Buka portal Azure.
- Pilih Buat Sumber Daya.
- Cari Static Web App.
- Pilih Aplikasi Web Statis.
- Pilih Buat.
Di bagian Dasar-dasar, mulailah dengan mengonfigurasi aplikasi baru Anda dan menautkannya ke repositori GitHub.
| Setting | Nilai |
|---|---|
| Subscription | Pilih langganan Azure Anda. |
| Grup Sumber Daya | Pilih tautan Buat baru, dan masukkan static-web-apps-test di kotak teks. |
| Nama | Masukkan my-first-static-web-app di kotak teks. |
| Tipe rencana | Pilih Gratis. |
| Sumber | Pilih GitHub dan masuk ke GitHub jika perlu. |
Setelah Anda masuk dengan GitHub, masukkan informasi repositori.
| Setting | Nilai |
|---|---|
| Organisasi | Pilih organisasi Anda. |
| Penyimpanan | Pilih my-first-web-static-app. |
| Branch | Pilih menu utama. |
Note
Jika Anda tidak melihat repositori apa pun:
- Anda mungkin perlu mengotorisasi Azure Static Web Apps di GitHub. Telusuri ke repositori GitHub Anda dan buka Pengaturan> Aplikasi> Aplikasi OAuth Resmi, pilih Azure Static Web Apps, dan kemudian pilih Grant.
- Anda mungkin perlu mengotorisasi Azure Static Web Apps di organisasi Azure DevOps Anda. Anda harus menjadi pemilik organisasi untuk memberikan izin. Minta akses aplikasi pihak ketiga melalui OAuth. Untuk informasi selengkapnya, lihat Mengotorisasi akses ke REST API dengan OAuth 2.0.
Di bagian Dasar , mulailah dengan mengonfigurasi aplikasi baru Anda dan menautkannya ke repositori Azure DevOps.
| Setting | Nilai |
|---|---|
| Subscription | Pilih langganan Azure Anda. |
| Grup Sumber Daya | Pilih tautan Buat baru, dan masukkan static-web-apps-test di kotak teks. |
| Nama | Masukkan my-first-static-web-app di kotak teks. |
| Tipe rencana | Pilih Gratis. |
| Sumber | Pilih DevOps. |
| Organisasi | Pilih organisasi Anda. |
| Proyek | Pilih proyek Anda. |
| Penyimpanan | Pilih my-first-web-static-app. |
| Branch | Pilih menu utama. |
Note
Pastikan cabang yang Anda gunakan tidak dilindungi, dan Anda memiliki izin yang memadai untuk mengeluarkan push perintah. Untuk memverifikasi, telusuri ke repositori DevOps Anda dan buka Repositori ->Branches dan pilih Opsi lainnya. Selanjutnya, pilih cabang Anda, lalu Branch policies untuk memastikan bahwa kebijakan yang diwajibkan belum diaktifkan.
Di bagian Detail Build, tambahkan detail konfigurasi khusus untuk kerangka kerja ujung depan pilihan Anda.
Pilih React dari menu dropdown Build Presets .
Pertahankan nilai default dalam kotak Lokasi aplikasi.
Biarkan kotak Lokasi Api kosong.
Ketik build dalam kotak Lokasi artefak aplikasi .
Pilih Tinjau + kreasikan.
Note
Anda dapat mengedit file alur kerja untuk mengubah nilai-nilai ini setelah membuat aplikasi.
Pilih Buat.
Pilih Pergi ke sumber daya.
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 yang membangun dan menerbitkan aplikasi Anda.
Sebelum Anda dapat mengakses situs baru yang bersifat statis, pembangunan penyebaran harus diselesaikan terlebih dahulu.
Jendela Gambaran Umum Static Web Apps menampilkan serangkaian tautan yang membantu Anda berinteraksi dengan aplikasi web Anda.
Memilih GitHub Action runs dalam Ikhtisar akan membawa Anda ke GitHub Actions yang sedang berjalan pada repositori Anda. Verifikasi bahwa tindakan penyebaran selesai sebelum melanjutkan.
Setelah alur kerja GitHub Actions selesai, Anda dapat memilih tautan URL untuk membuka situs web di tab baru.
Setelah alur kerja selesai, Anda dapat memilih tautan URL untuk membuka situs web di tab baru.
Membersihkan sumber daya
Jika ingin berhenti menggunakan aplikasi ini, Anda dapat menghapus instans Azure Static Web Apps melalui langkah-langkah berikut:
- Buka portal Azure.
- Cari my-first-web-static-app dari bilah pencarian bagian atas.
- Pilih nama aplikasi.
- Pilih Hapus.
- Pilih Ya untuk mengonfirmasi tindakan penghapusan (tindakan ini mungkin perlu beberapa saat untuk diselesaikan).