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 Angular ke Azure Static Web Apps menggunakan portal Azure.
Prasyarat
| Sumber daya | Catatan |
|---|---|
| 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. |
| Sumber daya | Catatan |
|---|---|
| Langganan Azure | Jika Anda tidak memiliki langganan Azure, buat akun uji coba gratis. |
| Akun Azure DevOps | Jika Anda tidak memiliki akun GitHub, Anda dapat membuatnya. |
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 menampilkan aplikasi contoh yang digunakan untuk menerapkan 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:
Pengaturan 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 kerangka kerja pilihan Anda, lalu tempelkan ke dalam kotak URL Kloning.
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.
| Pengaturan | Nilai |
|---|---|
| Langganan | 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. |
| Jenis rencana | Pilih Gratis. |
| Sumber | Pilih GitHub dan masuk ke GitHub jika perlu. |
Setelah Anda masuk dengan GitHub, masukkan informasi repositori.
| Pengaturan | Nilai |
|---|---|
| Organisasi | Pilih organisasi Anda. |
| Repositori | Pilih my-first-web-static-app. |
| Cabang | Pilih main. |
Catatan
Jika Anda tidak melihat repositori apa pun:
- Anda mungkin perlu mengotorisasi Azure Static Web Apps di GitHub. Telusuri repositori GitHub Anda dan buka Pengaturan > Aplikasi > Aplikasi OAuth yang Resmi, pilih Azure Static Web Apps, lalu pilih Izinkan.
- 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.
| Pengaturan | Nilai |
|---|---|
| Langganan | 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. |
| Jenis rencana | Pilih Gratis. |
| Sumber | Pilih DevOps. |
| Organisasi | Pilih organisasi Anda. |
| Proyek | Pilih proyek Anda. |
| Repositori | Pilih my-first-web-static-app. |
| Cabang | Pilih main. |
Catatan
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 buka Kebijakan Cabang untuk memastikan kebijakan yang diperlukan tidak diaktifkan.
Di bagian Detail Build, tambahkan detail konfigurasi khusus untuk kerangka kerja ujung depan pilihan Anda.
Pilih Angular dari dropdown Buat Preset.
Pertahankan nilai default dalam kotak Lokasi aplikasi.
Biarkan kotak Lokasi API kosong.
Ketik dist/angular-basic di kotak Lokasi Output.
Catatan
Jika Anda menggunakan instruksi ini dengan kode Anda sendiri dan Angular 17 atau lebih tinggi, nilai lokasi output harus diakhir dengan /browser.
Pilih Tinjau dan buat.
Catatan
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 statik. 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 membuka situs statis baru Anda, proses build harus terlebih dahulu selesai berjalan.
Jendela Gambaran Umum Static Web Apps menampilkan serangkaian tautan yang membantu Anda berinteraksi dengan aplikasi web Anda.
Memilih pelaksanaan GitHub Actions di Gambaran Umum akan membawa Anda ke pelaksanaan GitHub Actions yang dijalankan terhadap repositori Anda. Verifikasi bahwa tindakan penyebaran selesai sebelum melanjutkan.
Setelah alur kerja Tindakan GitHub 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).