Latihan - Memulai

  • 7 menit

Dalam latihan ini, Anda membuat instans Azure Static Web App, termasuk GitHub Action yang secara otomatis membangun dan menerbitkan situs web Anda.

Modul ini menggunakan sumber daya yang tersedia untuk Anda melalui kotak pasir, yang menyediakan akses gratis dan sementara ke langganan Azure, bersama dengan sumber daya yang Anda butuhkan untuk menyelesaikan latihan. Pastikan untuk mengaktifkan kotak pasir di bagian atas halaman ini. Saat Anda mengerjakan latihan dalam modul ini, setiap unit bergantung pada konten yang dibuat di latihan sebelumnya. Oleh karena itu, pilih kerangka kerja JavaScript dan gunakan untuk semua latihan berikutnya.

Membuat repositori

Untuk memulai, buat repositori dengan menggunakan templat GitHub. Serangkaian template repositori tersedia, yang berisi aplikasi pemula yang diterapkan di berbagai kerangka kerja front-end.

  1. Buka GitHub halaman buat dari template untuk membuka repositori template.

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

  3. Untuk nama repositori, masukkan my-static-web-app-and-api.

  4. Pilih Buat repositori dari templat.

    Saat membuat proyek dari template, GitHub membangun repositori di latar belakang.

Menjalankan aplikasi Anda secara lokal

Sekarang Anda memiliki repositori GitHub bernama my-static-web-app-and-api di akun GitHub. Selanjutnya, Anda mengkloning repositori GitHub dan menjalankan kode secara lokal di komputer Anda.

  1. Buka jendela terminal di komputer Anda.

    Jika menggunakan Windows, Anda dapat memasukkan cmd di kotak pencarian baki sistem.

  2. Untuk mengkloning repositori ke mesin Anda, tempelkan kode berikut ke jendela perintah.

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

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

    Catatan

    Jika Anda mengalami masalah saat menyalin ke terminal prompt perintah, klik kanan ikon di bilah judul, dan di tab Properti , pastikan bahwa Gunakan Ctrl+Shift+C/V sebagai Salin/Tempel dicentang.

  3. Ubah ke direktori untuk kode sumber yang dikloning.

    cd my-static-web-app-and-api

  4. Buka direktori untuk kerangka kerja front-end pilihan Anda.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Instal dependensi aplikasi.

    npm install

  6. Pastikan versi terbaru dari setiap dependensi diinstal dengan perintah berikut.

    npm audit fix

  7. Jalankan aplikasi klien front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Telusuri aplikasi Anda

Ketika bundel aplikasi dihasilkan dan dikompilasi, tab browser akan secara otomatis terbuka untuk menampilkan aplikasi Anda yang berjalan secara lokal.

Host lokal untuk angular adalah http://localhost:4200.

Screenshot of the local host for your Angular web app.

Host lokal untuk bereaksi adalah http://localhost:3000.

Screenshot of the local host for your React web app.

Host lokal untuk svelte adalah http://localhost:5000.

Screenshot of the local host for your Svelte web app.

Host lokal untuk Vue adalah http://localhost:8080.

Screenshot of the local host for your Vue web app.

Aplikasi Anda harus mengatakan Memuat data ... karena belum ada data atau API. Anda menambahkan API untuk aplikasi web Anda nanti dalam pelajaran ini.

Di terminal, tekan Ctrl+C untuk menghentikan tugas batch Anda.

Selamat! Anda membuat aplikasi dan sekarang aplikasi berjalan secara lokal di browser Anda. Selanjutnya Anda dapat menerbitkan aplikasi ke Azure Static Web Apps.

Membuat Static Web App

Anda membuat repositori GitHub Anda sendiri. Sekarang Anda dapat membuat aplikasi web statis Anda sendiri menggunakan ekstensi Azure Static Web Apps untuk Visual Studio Code.

Memasang ekstensi Azure Static Web Apps untuk Visual Studio Code

  1. Buka Visual Studio Code.

  2. Dari menu atas, pilih Tampilkan>Ekstensi, dan masukkan Azure Static Web Apps di kotak pencarian.

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

Buka folder aplikasi

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

  2. Masukkan File: Buka Folder....

  3. Pilih folder my-static-web-app-and-api .

  4. Pilih Buka untuk membuka folder di Visual Studio Code.

Masuk ke Azure di Visual Studio Code

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

  2. Masukkan Azure: Masuk dan ikuti petunjuk untuk mengautentikasi.

    Penting

    Pastikan untuk masuk ke Azure menggunakan akun yang sama dengan yang digunakan untuk mengaktifkan sandbox dalam browser. Menggunakan akun yang sama membuat Langganan Concierge tersedia, yang memberi Anda akses ke sumber daya Azure gratis selama tutorial ini.

Pilih langganan Anda

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

  2. Masukkan Azure: Pilih Langganan, dan hapus semua pilihan kecuali Langganan Concierge.

    Screenshot showing concierge subscription is selected.

Menerapkan perubahan

Saat menginstal dependensi aplikasi, beberapa file dalam proyek Anda diperbarui dalam proses. Untuk melanjutkan, Anda perlu menerapkan perubahan tersebut ke repositori.

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

  2. Masukkan dan pilih Git Commit All.

  3. Masukkan initial commit ke bagian atas file.

  4. Simpan dan tutup file git commit.

    Jangan khawatir tentang menyinkronkan perubahan Anda dengan server pada saat ini. Pembaruan disalin ke GitHub saat Anda menerbitkan aplikasi web statis.

Membuat aplikasi web statis

Sesi terautentikasi Azure dan GitHub saat ini diperlukan untuk membuat aplikasi web statis. Jika Anda belum masuk ke kedua penyedia, ekstensi akan meminta Anda untuk masuk selama proses pembuatan.

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

  1. Masukkan dan pilih Azure Static Web Apps: Buat Static Web App....

    Masukkan nilai berikut untuk sisa permintaan palet perintah.

    Prompt Value
    Langganan Pilih Langganan Concierge
    Nama Masukkan my-static-web-app-and-api
    Wilayah Pilih wilayah yang paling dekat dengan Anda
    Preset Pilih Angular
    Lokasi kode aplikasi Masukkan angular-app
    Lokasi output Masukkan dist/angular-app

  1. Masukkan dan pilih Azure Static Web Apps: Buat Static Web App....

    Masukkan nilai berikut untuk sisa permintaan palet perintah.

    Prompt Value
    Langganan Pilih Langganan Concierge
    Nama Masukkan my-static-web-app-and-api
    Wilayah Pilih wilayah yang paling dekat dengan Anda
    Preset Pilih React
    Lokasi kode aplikasi Masukkan react-app
    Lokasi output Masukkan dist

  1. Masukkan dan pilih Azure Static Web Apps: Buat Static Web App....

    Masukkan nilai berikut untuk sisa permintaan palet perintah.

    Prompt Value
    Langganan Pilih Langganan Concierge
    Nama Masukkan my-static-web-app-and-api
    Wilayah Pilih wilayah yang paling dekat dengan Anda
    Preset Pilih Svelte
    Lokasi kode aplikasi Masukkan svelte-app
    Lokasi output Masukkan public

  1. Masukkan dan pilih Azure Static Web Apps: Buat Static Web App....

    Masukkan nilai berikut untuk sisa permintaan palet perintah.

    Prompt Value
    Langganan Pilih Langganan Concierge
    Nama Masukkan my-static-web-app-and-api
    Wilayah Pilih wilayah yang paling dekat dengan Anda
    Preset Pilih Vue
    Lokasi kode aplikasi Masukkan vue-app
    Lokasi output Masukkan dist

Catatan

Repositori ini berbeda dari proyek lain yang mungkin pernah Anda gunakan sebelumnya. Proyek ini berisi empat aplikasi berbeda dalam empat folder berbeda. Setiap folder berisi aplikasi yang dibuat dalam kerangka kerja JavaScript yang berbeda. Biasanya, Anda memiliki satu aplikasi di root repositori Anda dan demikian default / untuk lokasi jalur aplikasi. Ini adalah contoh yang bagus tentang bagaimana Azure Static Web Apps memungkinkan Anda mengonfigurasi lokasi sejak awal - Anda memiliki kontrol penuh atas cara aplikasi dibuat.

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

    Screenshots of the Open Actions in GitHub or View/Edit Config pop-up window.

    Saat mengonfigurasi build, Visual Studio Code melaporkan status build kepada Anda.

    Screenshot showing production status as waiting for deployment.

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

    Screenshot showing how to see GitHub Actions.

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

  3. Untuk menampilkan situs web di browser, klik kanan pada proyek di ekstensi Static Web Apps, dan pilih Telusuri Situs.

    Screenshot showing how to use the Visual Studio Code extension to browse the static web app.

    Aplikasi Anda harus mengatakan Memuat data ... karena belum ada data atau API. Anda menambahkan API untuk aplikasi web Anda nanti dalam modul ini.

Selamat! Aplikasi Anda disebarkan ke Azure Static Web Apps!

Catatan

Jangan khawatir jika Anda melihat halaman web yang menyatakan bahwa aplikasi belum dibuat dan disebarkan. Coba refresh browser dalam satu menit. Layanan GitHub Action berjalan secara otomatis saat Azure Static Web Apps dibuat. Jadi, 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 layanan Azure Static Web Apps.

  1. Buka Palet Perintah dengan menekan Ctrl+Shift+P.

  2. Masukkan dan pilih Git: Penarikan.

  3. Tekan Enter.

Langkah berikutnya

Selanjutnya Anda mempelajari cara membangun dan menjalankan API Anda menggunakan proyek Azure Functions.