Latihan - Memulai

  • 7 menit

Dalam latihan ini, Anda akan membuat instans Azure Static Web Apps termasuk GitHub Action yang otomatis membuild dan menerbitkan aplikasi Anda.

Modul ini menggunakan kotak pasir Azure untuk menyediakan langganan Azure gratis sementara yang dapat digunakan untuk menyelesaikan latihan Anda. Sebelum melanjutkan, pastikan Anda telah mengaktifkan kotak pasir di bagian atas halaman ini.

Tip

Jika Anda mengalami masalah dengan dependensi simpul, pastikan Anda telah menginstal Manajer Versi Node dan dapat beralih ke versi yang lebih lama.

Membuat repositori

Selanjutnya, buat repositori baru dengan menggunakan repositori templat GitHub. Serangkaian templat tersedia dan masing-masing berisi aplikasi starter yang dibangun dengan kerangka kerja ujung depan yang berbeda.

  1. Buka halaman buat dari templat untuk repositori templat.

    • Jika Anda mendapatkan kesalahan 404 Halaman Tidak Ditemukan, masuk ke GitHub dan coba lagi.

  2. Jika diminta untuk Pemilik, pilih salah satu akun GitHub Anda.

  3. Beri nama repositori Anda my-static-web-app-authn.

  4. Pilih Buat repositori dari templat.

Mengkloning aplikasi Anda secara lokal

Anda baru saja membuat repositori GitHub bernama my-static-web-app-authn di akun GitHub Anda. Selanjutnya, Anda akan mengkloning repo dan menjalankan kode secara lokal di komputer.

  1. Buka terminal pada komputer Anda.

  2. Mulailah dengan mengkloning repositori GitHub ke komputer Anda.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. Buka folder tersebut untuk kode sumber Anda.

    cd my-static-web-app-authn

Mengonfigurasi CORS secara lokal

Anda tidak perlu khawatir tentang berbagi sumber daya lintas-asal (CORS) saat menerbitkan ke Azure Static Web Apps. Azure Static Web Apps otomatis mengonfigurasi aplikasi Anda sehingga dapat berkomunikasi dengan API di Azure menggunakan proksi terbalik. Tetapi saat berjalan secara lokal, Anda perlu mengonfigurasi CORS untuk memungkinkan aplikasi web dan API berkomunikasi.

Sekarang, instruksikan Azure Functions untuk mengizinkan aplikasi web Anda membuat permintaan HTTP ke API di komputer Anda.

  1. Buat file bernama api/local.settings.json.

  2. Tambahkan konten berikut ke file:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Catatan

File local.settings.json yang ada tercantum dalam file .gitignore, yang mencegah file ini didorong ke GitHub. Ini karena Anda dapat menyimpan rahasia dalam file ini yang tidak Anda inginkan di GitHub. Inilah alasan Anda harus membuat file saat membuat repo dari templat.

Menjalankan API

Folder api berisi proyek Azure Functions dengan titik akhir HTTP untuk aplikasi web. Mulai dengan menjalankan API secara lokal dengan mengikuti langkah berikut:

Catatan

Pastikan untuk menginstal Alat Inti Azure Functions yang memungkinkan Anda menjalankan Azure Functions secara lokal.

  1. Di Visual Studio Code, buka palet perintah dengan menekan F1.

  2. Masuk dan pilih Terminal: Buat Terminal Terpadu Baru.

  3. Buka folder api:

    cd api

  4. Jalankan aplikasi Azure Functions secara lokal:

    func start

Jalankan aplikasi web

  1. Selanjutnya, buka folder kerangka kerja front-end pilihan Anda, sebagai berikut:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. Sekarang instal dependensi aplikasi.

    npm install

  3. Terakhir, jalankan aplikasi klien front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Telusuri aplikasi Anda

Saatnya melihat aplikasi Anda berjalan secara lokal. Setiap aplikasi front-end berjalan pada port yang berbeda.

  1. Klik tautan untuk menelusuri aplikasi Anda.

  1. Telusuri http://localhost:4200.

    Screenshot showing the UI of your Angular web app.

  1. Telusuri http://localhost:3000.

    Screenshot showing the UI of your React web app.

  1. Telusuri http://localhost:5000.

    Screenshot showing the UI of your Svelte web app.

  1. Telusuri http://localhost:8080.

    Screenshot showing the UI of your Vue web app.

Aplikasi Anda harus menampilkan daftar produk.

  1. Sekarang, hentikan aplikasi yang berjalan dengan menekan Ctrl-C di terminal.

Anda membuild aplikasi dan sekarang aplikasi berjalan secara lokal di browser Anda.

Selanjutnya, Anda akan menerbitkan aplikasi ke Azure Static Web Apps.

Membuat Static Web App

Setelah membuat repositori GitHub, Anda dapat membuat instans Static Web Apps menggunakan ekstensi Azure Static Web Apps untuk Visual Studio Code.

Memasang ekstensi Azure Static Web Apps untuk Visual Studio Code

  1. Buka Visual Studio Marketplace dan instal ekstensi Azure Static Web Apps untuk Visual Studio Code.

  2. Saat tab ekstensi dimuat di Visual Studio Code, pilih Instal.

  3. Setelah penginstalan selesai, pilih Isi Ulang.

Masuk ke Azure di Visual Studio Code

  1. Di Visual Studio Code, masuk ke Azure dengan memilih Tampilkan>Palet Perintah, lalu masukkan Azure: Masuk.

    Penting

    Masuk ke Azure menggunakan akun yang sama dengan yang digunakan untuk membuat kotak pasir. Kotak pasir menyediakan akses ke Langganan Concierge.

  2. Ikuti perintah untuk menyalin dan menempelkan kode yang disediakan di browser web, yang mengautentikasi sesi Visual Studio Code.

Pilih langganan Anda

  1. Buka Visual Studio Code, dan pilih File > Buka untuk membuka repositori yang Anda kloning ke komputer di penyunting.

  2. Verifikasi bahwa Anda telah memfilter langganan Azure untuk menyertakan Langganan Concierge dengan membuka palet perintah F1, memasukkan Azure: Select Subscriptions, dan menekan Enter.

  3. Pilih Langganan Concierge, lalu tekan Enter.

    Screenshot showing how to filter by subscription.

Membuat Static Web Apps dengan Visual Studio Code

  1. Buka Visual Studio Code, dan pilih File > Buka untuk membuka repositori yang Anda kloning ke komputer di penyunting.

  2. Di dalam Visual Studio Code, pilih logo Azure di bilah aktivitas untuk membuka jendela ekstensi Azure.

    Screenshot of the Azure Logo in VS Code.

    Catatan

    Proses perincian masuk Azure dan GitHub diperlukan. Jika Anda belum masuk ke Azure dan GitHub dari Visual Studio Code, ekstensi akan meminta Anda untuk masuk ke keduanya selama proses pembuatan.

  3. Letakkan mouse Anda di atas label Static Web Apps, dan pilih + (tanda plus).

    Screenshot showing the application name typed out.

  4. Saat palet perintah terbuka di bagian atas editor, pilih Langganan Pramutamu, dan tekan Enter.

    Screenshot showing how to select a subscription.

  5. Masukkan my-static-web-app-and-authn, dan tekan Enter.

    Screenshot showing how to create Static Web Apps.

  6. Pilih wilayah yang paling dekat dengan Anda, dan tekan Enter.

    Screenshot showing location selection.

  7. Pilih opsi kerangka kerja yang sesuai, dan tekan Enter.

  1. Pilih angular-app sebagai lokasi untuk kode aplikasi, lalu tekan Enter.

    Screenshot showing the Angular application code location.

  2. Masukkan dist/angular-app sebagai lokasi output tempat file dibuat untuk produksi di aplikasi Anda, dan tekan Enter.

    Screenshot showing the Angular app files path.

  1. Pilih react-app sebagai lokasi untuk kode aplikasi, lalu tekan Enter.

    Screenshot showing the React application code location.

  2. Masukkan build sebagai lokasi output tempat file dibuat untuk produksi di aplikasi Anda, dan tekan Enter.

    Screenshot showing the React app files path.

  1. Pilih svelte-app sebagai lokasi untuk kode aplikasi, lalu tekan Enter.

    Screenshot showing the Svelte application code location.

  2. Masukkan publik sebagai lokasi output tempat file dibuat untuk produksi di aplikasi Anda, dan tekan Enter.

    Screenshot showing the Svelte app files path.

  1. Pilih vue-app sebagai lokasi untuk kode aplikasi, lalu tekan Enter.

    Screenshot showing the Vue application code location.

  2. Masukkan dist sebagai lokasi output tempat file dibuat untuk produksi di aplikasi Anda, dan tekan Enter.

    Screenshot showing the Vue app files path.

Catatan

Repositori Anda mungkin sedikit berbeda dari yang telah Anda gunakan di masa lalu. Repositori ini berisi empat aplikasi yang berbeda dalam empat folder yang berbeda. Setiap folder berisi aplikasi yang dibuat dalam kerangka kerja JavaScript yang berbeda. Biasanya, Anda memiliki satu aplikasi di root repositori Anda dan menentukan / untuk lokasi jalur aplikasi. Ini adalah contoh yang bagus mengapa Azure Static Web Apps memungkinkan Anda untuk mengonfigurasi lokasi - Anda mendapatkan kontrol penuh atas bagaimana aplikasi dibangun.

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

    Screenshot showing the Open Actions in GitHub or View/Edit Config pop-up window.

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

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

  1. Anda dapat melihat kemajuan penyebaran menggunakan tindakan GitHub dengan memperluas menu Tindakan.

    Screenshot showing the GitHub Actions menu in VS Code.

    Setelah penyebaran selesai, Anda dapat langsung membuka situs web Anda.

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

    Screenshot showing the browse site button.

Selamat! Anda telah menyebarkan aplikasi Anda ke Azure Static Web Apps!

Catatan

Jangan khawatir jika Anda melihat halaman web yang menyatakan bahwa aplikasi belum dibuat dan disebarkan. Refresh browser beberapa saat. GitHub Action berjalan secara otomatis saat Azure Static Web Apps dibuat. Jika Anda melihat halaman splash, aplikasi masih disebarkan.

Menarik perubahan dari GitHub

Tarik perubahan terbaru dari GitHub untuk menurunkan file alur kerja yang dibuat oleh Azure Static Web Apps:

  1. Buka palet perintah dengan menekan F1.

  2. Masuk dan pilih Git: Pull, lalu tekan Enter.

Langkah berikutnya

Selanjutnya, Anda akan mempelajari cara mengintegrasikan autentikasi pengguna ke dalam aplikasi Anda.