Latihan - Mulai Latihan

  • 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 disediakan untuk Anda melalui kotak pasir, yang menyediakan akses gratis 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 Anda buat dalam latihan sebelumnya. Untuk alasan ini, pilih kerangka kerja JavaScript dan gunakan untuk semua latihan berikutnya.

Membuat repositori

Untuk memulai, buat repositori dengan menggunakan templat GitHub. Serangkaian templat repositori tersedia, yang berisi aplikasi dasar yang diimplementasikan dalam berbagai kerangka kerja front-end.

  1. Akses halaman GitHub untuk membuat dari templat dan membuka repositori templat.

  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 Anda membuat proyek dari templat, GitHub membangun repositori Anda di latar belakang.

Jalankan aplikasi Anda secara lokal

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

  1. Buka jendela terminal di komputer Anda.

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

  2. Untuk mengkloning repositori ke komputer Anda, tempelkan kode berikut ke jendela prompt 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

    Nota

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

  3. Ubah ke direktori untuk kode sumber yang Anda kloning.

    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 ujung depan.

    npm start

    npm start

    npm run dev

    npm run serve

Telusuri ke aplikasi Anda

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

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

Cuplikan layar host lokal untuk aplikasi web Angular Anda.

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

Cuplikan layar host lokal untuk aplikasi web React Anda.

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

Cuplikan layar host lokal untuk aplikasi web Svelte Anda.

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

Cuplikan layar host lokal untuk aplikasi web Vue Anda.

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 pekerjaan batch Anda.

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

Membuat aplikasi web statis

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.

Menginstal 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. Buka Azure: Masuk dan ikuti petunjuk untuk mengautentikasi.

    Penting

    Pastikan untuk masuk ke Azure menggunakan akun yang sama dengan yang Anda gunakan untuk mengaktifkan kotak pasir di 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.

    Cuplikan layar memperlihatkan langganan pramutamu dipilih.

Menerapkan perubahan

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

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

  2. Masukkan lalu pilih Git Commit All.

  3. Masukkan penerapan awal ke bagian atas file.

  4. Simpan dan tutup file commit git.

    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 Aplikasi Web Statis....

    Masukkan nilai berikut untuk sisa perintah palet perintah.

    Cepat Nilai
    Abonemen Pilih Langganan Concierge
    Nama Masukkan my-static-web-app-and-api
    Wilayah Pilih wilayah yang paling dekat dengan Anda
    Prasetelan Pilih Sudut
    Lokasi kode aplikasi Masukkan angular-app
    Lokasi output Masukkan dist/angular-app

  1. Masukkan dan pilih Azure Static Web Apps: Membuat Aplikasi Web Statis....

    Masukkan nilai berikut untuk sisa perintah palet perintah.

    Cepat Nilai
    Abonemen Pilih Langganan Concierge
    Nama Masukkan my-static-web-app-and-api
    Wilayah Pilih wilayah yang paling dekat dengan Anda
    Pengaturan Awal Pilih React
    Lokasi kode aplikasi Masukkan react-app
    Lokasi output Masukkan dist

  1. Masukkan dan pilih Azure Static Web Apps: Buat Web Aplikasi Statis....

    Masukkan nilai berikut untuk sisa perintah palet perintah.

    Cepat Nilai
    Abonemen Pilih Langganan Concierge
    Nama Masukkan my-static-web-app-and-api
    Wilayah Pilih wilayah yang paling dekat dengan Anda
    Setelan awal Pilih Svelte
    Lokasi kode aplikasi Masukkan svelte-app
    Lokasi output Masukkan publik

  1. Masukkan dan pilih Azure Static Web Apps: Buat Aplikasi Web Statis....

    Masukkan nilai berikut untuk sisa perintah palet perintah.

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

Nota

Repositori ini berbeda dari proyek lain yang mungkin telah Anda gunakan di masa lalu. Proyek ini berisi empat aplikasi berbeda dalam empat folder yang berbeda. Setiap folder berisi aplikasi yang dibuat dalam kerangka kerja JavaScript yang berbeda. Biasanya, Anda hanya akan memiliki satu aplikasi di akar repositori Anda dan dengan demikian / default untuk lokasi jalur aplikasi. Ini adalah contoh yang bagus tentang bagaimana Azure Static Web Apps memungkinkan Anda mengonfigurasi lokasi di tempat pertama - Anda memiliki kontrol penuh atas cara aplikasi dibuat.

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

    Cuplikan layar Buka Tindakan di GitHub atau jendela pop-up Lihat/Edit Konfigurasi.

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

    Cuplikan layar memperlihatkan status produksi sebagai menunggu pendistribusian.

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

    Cuplikan layar memperlihatkan cara melihat GitHub Actions.

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

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

    Cuplikan layar memperlihatkan cara menggunakan ekstensi Visual Studio Code untuk menelusuri aplikasi web statis.

    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!

Nota

Jangan khawatir jika Anda melihat halaman web yang menyatakan aplikasi belum dibuat dan disebarkan. Coba refresh browser dalam satu menit. Layanan GitHub Action berjalan secara otomatis saat Azure Static Web App dibuat. Jadi, jika Anda melihat halaman pembuka, aplikasi masih sedang dioperasikan.

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

  3. Tekan Enter.

Langkah berikutnya

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