Mulai cepat: Membangun aplikasi web statis pertama Anda

Azure Static Web Apps menerbitkan situs web ke lingkungan produksi dengan membangun aplikasi dari repositori Azure DevOps atau GitHub. Dalam mulai cepat ini, Anda akan menyebarkan aplikasi web ke Azure Static Web Apps menggunakan portal Microsoft Azure.

Prasyarat

• Jika Anda tidak memiliki langganan Azure, buat akun uji coba gratis.
• Akun GitHub

• Jika Anda tidak memiliki langganan Azure, buat akun uji coba gratis.
• Organisasi Azure DevOps

Membuat repositori

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

Tanpa Kerangka Kerja

1. Navigasi ke lokasi berikut untuk membuat repositori baru:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. Beri nama repositori Anda my-first-static-web-app

Catatan

Azure Static Web Apps memerlukan setidaknya satu file HTML untuk membuat aplikasi web. Repositori yang Anda buat dalam langkah ini mencakup satu file index.html.

Sudut

1. Navigasi ke lokasi berikut untuk membuat repositori baru:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Beri nama repositori Anda my-first-static-web-app

Blazor

1. Navigasi ke lokasi berikut untuk membuat repositori baru:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Beri nama repositori Anda my-first-static-web-app

React

1. Navigasi ke lokasi berikut untuk membuat repositori baru:
   1. https://github.com/staticwebdev/react-basic/generate
2. Beri nama repositori Anda my-first-static-web-app

Vue

1. Navigasi ke lokasi berikut untuk membuat repositori baru:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Beri nama repositori Anda my-first-static-web-app

Pilih Buat repositori.

Membuat repositori

Artikel ini menggunakan repositori Azure DevOps untuk memudahkan Anda memulai. Repositori ini menampilkan aplikasi pemula yang digunakan untuk menyebarkan menggunakan Azure Static Web Apps.

1. Masuk ke Azure DevOps.

2. Pilih Repositori baru.

3. Di jendela Buat proyek baru, perluas menu Tingkat Lanjut dan buat pilihan berikut:

   Pengaturan	Nilai
   Project	Masukkan my-first-web-static-app.
   Visibilitas	Pilih Privat.
   Kontrol versi	Pilih Git.
   Proses item kerja	Pilih opsi yang paling sesuai dengan metode pengembangan Anda.

4. Pilih Buat.

5. Pilih item menu Repos .

6. Pilih item menu File.

7. Di bawah kartu Impor repositori, pilih Impor.

8. Salin URL repositori untuk kerangka kerja pilihan Anda, dan tempelkan ke dalam kotak URL Kloning.

   Tanpa Kerangka Kerja

   https://github.com/staticwebdev/vanilla-basic.git

   Sudut

   https://github.com/staticwebdev/angular-basic.git

   Blazor

   https://github.com/staticwebdev/blazor-basic.git

   React

   https://github.com/staticwebdev/react-basic.git

   Vue

   https://github.com/staticwebdev/vue-basic.git

9. 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.

1. Buka portal Microsoft Azure.
2. Pilih Buat Sumber Daya.
3. Cari Static Web Apps.
4. Pilih Static Web Apps.
5. 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 paket	Pilih Gratis.
Azure Functions dan detail pementasan	Pilih wilayah terdekat dengan Anda.
Sumber	Pilih GitHub.

Pilih Masuk dengan GitHub dan autentikasi dengan GitHub.

Setelah Anda masuk dengan GitHub, masukkan informasi repositori.

Pengaturan	Nilai
Organisasi	Pilih organisasi Anda.
Repositori	Pilih my-first-web-static-app.
Cabang	Pilih <branch_name>.

Catatan

Jika Anda tidak melihat repositori apa pun:

• Anda mungkin perlu mengotorisasi Azure Static Web Apps di GitHub. Telusuri ke profil GitHub Anda dan buka aplikasi Pengaturan >> OAuth Apps Resmi, pilih Azure Static Web Apps, lalu pilih Berikan.
• 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 paket	Pilih Gratis.
Azure Functions dan detail pementasan	Pilih wilayah terdekat dengan Anda.
Sumber	Pilih DevOps.
Organisasi	Pilih organisasi Anda.
Project	Pilih proyek Anda.
Repositori	Pilih my-first-web-static-app.
Cabang	Pilih <branch_name>.

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 Repos ->Branches dan pilih Opsi lainnya. Selanjutnya, pilih cabang Anda, lalu Kebijakan cabang untuk memastikan kebijakan yang diperlukan tidak diaktifkan.

Di bagian Detail Build, tambahkan detail konfigurasi khusus untuk kerangka kerja ujung depan pilihan Anda.

Tanpa Kerangka Kerja

1. Pilih Kustom dari dropdown Buat Preset.
2. Ketik ./src di kotakLokasi aplikasi.
3. Biarkan kotak Lokasi Api kosong.
4. Ketik kotak lokasi artefak aplikasi ./src.

Sudut

1. Pilih Angular dari dropdown Buat Preset.
2. Pertahankan nilai default dalam kotak Lokasi aplikasi.
3. Biarkan kotak Lokasi Api kosong.
4. Ketik dist/angular-basic di kotak Lokasi artefak aplikasi.

Blazor

1. Pilih Blazor dari menu dropdown Build Presets .
2. Pertahankan nilai default Klien dalam kotak Lokasi aplikasi.
3. Biarkan kotak Lokasi Api kosong.
4. Pertahankan nilai default wwwroot di kotak Lokasi artefak aplikasi.

React

1. Pilih Reaksi dari dropdown Buat Preset.
2. Pertahankan nilai default dalam kotak Lokasi aplikasi.
3. Biarkan kotak Lokasi Api kosong.
4. Ketik build di kotak Lokasi artefak aplikasi.

Vue

1. Pilih Vue.js dari dropdown Buat Preset.
2. Pertahankan nilai default dalam kotak Lokasi aplikasi.
3. Biarkan kotak Lokasi Api kosong.
4. Pertahankan nilai default dalam kotak Lokasi artefak aplikasi.

Pilih Tinjau + buat.

Catatan

Anda dapat mengedit file alur kerja untuk mengubah nilai-nilai ini setelah membuat aplikasi.

Pilih Buat.

Pilih Buka 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, build penyebaran harus terlebih dahulu selesai berjalan.

Jendela Gambaran Umum Static Web Apps menampilkan serangkaian tautan yang membantu Anda berinteraksi dengan aplikasi web Anda.

1. Memilih pada banner yang bertuliskan, Pilih di sini untuk memeriksa status eksekusi GitHub Actions anda akan membawa Anda ke GitHub Actions yang berjalan terhadap repositori Anda. Setelah Anda memverifikasi pekerjaan penyebaran selesai, maka Anda dapat membuka situs web Anda melalui URL yang dihasilkan.

2. 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:

1. Buka portal Microsoft Azure.
2. Cari my-first-web-static-app dari bilah pencarian bagian atas.
3. Pilih nama aplikasi.
4. Pilih Hapus.
5. Pilih Ya untuk mengonfirmasi tindakan penghapusan (tindakan ini mungkin perlu beberapa saat untuk diselesaikan).

Langkah berikutnya

Menambahkan API