Mulai cepat: Membangun situs statis pertama Anda dengan Azure Static Web Apps

  • Artikel

Azure Static Web Apps menerbitkan situs web dengan membangun aplikasi dari repositori kode. Dalam mulai cepat ini, Anda menyebarkan aplikasi ke aplikasi Azure Static Web menggunakan ekstensi Visual Studio Code.

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

Prasyarat

Membuat repositori

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

  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.

Pilih Buat repositori.

Cuplikan layar tombol Buat repositori.

Mengklon repositori

Dengan repositori yang dibuat di akun GitHub Anda, kloning proyek ke komputer lokal Anda menggunakan perintah berikut.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Pastikan untuk mengganti <YOUR_GITHUB_ACCOUNT_NAME> dengan nama pengguna GitHub Anda.

Selanjutnya, buka Visual Studio Code dan buka File > Buka Folder untuk membuka repositori kloning di editor.

Menginstal ekstensi Azure Static Web Apps

Jika Anda belum memiliki ekstensi Azure Static Web Apps untuk ekstensi Visual Studio Code , Anda dapat menginstalnya di Visual Studio Code.

  1. Pilih Tampilkan>Ekstensi.
  2. Di Ekstensi Pencarian di Marketplace, ketik Azure Static Web Apps.
  3. Pilih Instal untuk Azure Static Web Apps.

Membuat Static Web App

  1. Di dalam Visual Studio Code, pilih logo Azure di Bilah Aktivitas untuk membuka jendela ekstensi Azure.

    Logo Azure

    Catatan

    Anda diharuskan masuk ke Azure dan GitHub di Visual Studio Code untuk melanjutkan. Jika Anda belum diautentikasi, ekstensi akan meminta Anda untuk masuk ke kedua layanan selama proses pembuatan.

  2. Pilih F1 untuk membuka palet perintah Visual Studio Code.

  3. Masukkan Buat aplikasi web statis di kotak perintah.

  4. Pilih Azure Static Web Apps: Buat aplikasi web statis....

  5. Pilih langganan Azure Anda.

  6. Masukkan my-first-static-web-app untuk nama aplikasi.

  7. Pilih wilayah yang terdekat dengan Anda.

  8. Masukkan nilai pengaturan yang cocok dengan pilihan kerangka kerja Anda.

    Pengaturan Nilai
    Kerangka Pilih Kustom
    Lokasi kode aplikasi Masukkan /src
    Lokasi build Masukkan /src

  9. Setelah aplikasi dibuat, pemberitahuan konfirmasi ditampilkan di Visual Studio Code.

    Konfirmasi yang dibuat

    Jika GitHub memberi Anda tombol berlabel Aktifkan Tindakan pada repositori ini, pilih tombol untuk memungkinkan tindakan build berjalan di repositori Anda.

    Saat penyebaran sedang berlangsung, ekstensi Visual Studio Code melaporkan status build kepada Anda.

    Menunggu penyebaran

    Setelah penyebaran selesai, Anda dapat menavigasi langsung ke situs web Anda.

  10. Untuk melihat situs web di browser, klik kanan proyek di ekstensi Static Web Apps, dan pilih Jelajahi Situs.

    Menelusuri situs

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, Anda dapat menghapus instans Azure Static Web Apps melalui ekstensi.

Di jendela Visual Studio Code Azure, kembali ke bagian Sumber Daya dan di bawah Static Web Apps, klik kanan my-first-static-web-app dan pilih Hapus.

Langkah berikutnya

Menambahkan API