Tutorial: Menerbitkan situs VuePress ke Azure Static Web Apps

Artikel ini menunjukkan cara membuat dan menyebarkan aplikasi web VuePress ke Azure Static Web Apps. Hasil akhirnya adalah aplikasi Azure Static Web Apps baru dengan GitHub Actions terkait yang memberi Anda kontrol atas cara aplikasi dibuat dan diterbitkan.

Dalam tutorial ini, Anda akan mempelajari cara:

• Membuat aplikasi VuePress
• Menyiapkan Azure Static Web Apps
• Menyebarkan aplikasi VuePress ke Azure

Prasyarat

• Akun Azure dengan langganan aktif. Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
• Akun GitHub. Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
• Penyiapan Git terinstal. Jika Anda tidak memilikinya, Anda dapat menginstal Git.
• Node.js dipasang.

Membuat Aplikasi VuePress

Buat aplikasi VuePress dari Antarmuka Baris Perintah (CLI):

1. Buat folder baru untuk aplikasi VuePress.

   mkdir static-site
   

2. Tambahkan file README.md di folder.

   echo '# Hello From VuePress' > README.md
   

3. Menginisialisasi file package.json.

   npm init -y
   

4. Tambahkan VuePress sebagai devDependency.

   npm install --save-dev vuepress
   

5. Buka file package.json di editor teks dan tambahkan perintah build ke bagian scripts.

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. Buat file .gitignore untuk mengecualikan folder node_modules .

   echo 'node_modules' > .gitignore
   

7. Menginisialisasi repositori Git.

    git init
    git add -A
    git commit -m "initial commit"
   

Mendorong aplikasi Anda ke GitHub

Anda memerlukan repositori di GitHub agar dapat tersambung ke Azure Static Web Apps. Langkah-langkah berikut ini memperlihatkan cara membuat repositori untuk situs Anda.

1. Buat repositori GitHub kosong (jangan membuat README) dari https://github.com/new dengan nama vuepress-static-app.

2. Tambahkan repositori GitHub sebagai repositori jarak jauh ke repositori lokal Anda. Pastikan untuk menambahkan nama pengguna GitHub Anda sebagai pengganti <YOUR_USER_NAME> placeholder pada perintah berikut.

   git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
   

3. Dorong repositori lokal Anda ke GitHub.

   git push --set-upstream origin main
   

Menyebarkan aplikasi web Anda

Langkah-langkah berikut menunjukkan cara membuat aplikasi situs statis baru dan menerapkannya ke lingkungan produksi.

Buat aplikasi

1. Masuk ke portal Azure

2. Pilih Buat Sumber Daya

3. Cari Static Web Apps

4. Pilih Aplikasi Web Statis

5. Pilih Buat

6. Pada tab Dasar, masukkan nilai berikut ini untuk setiap pengaturan.

   Properti	Nilai
   Langganan	Nama langganan Azure Anda.
   Grup Sumber Daya	my-vuepress-group
   Nama	vuepress-static-app
   Jenis paket	Gratis
   Region for Azure Functions API dan lingkungan pementasan	Pilih wilayah terdekat dengan Anda.
   Sumber	GitHub

7. Pilih Masuk dengan GitHub dan autentikasi dengan GitHub.

8. Masukkan nilai GitHub berikut.

   Properti	Nilai
   Organisasi	Pilih organisasi GitHub yang Anda inginkan.
   Repositori	Pilih vuepress-static-app.
   Cabang	Pilih utama.

   Catatan

   Jika Anda tidak melihat repositori apa pun, Anda mungkin perlu mengotorisasi Azure Static Web Apps di GitHub. Telusuri ke repositori GitHub Anda dan buka Pengaturan > Aplikasi > OAuth Resmi Aplikasi, pilih Azure Static Web Apps, lalu pilih Berikan. Untuk repositori organisasi, Anda harus menjadi pemilik organisasi untuk memberikan izin.

9. Di bagian Detail Build, pilih VuePress dari menu drop-down Prasetel Build dan pertahankan nilai default.

Tinjau dan buat

1. Pilih Tinjau + Buat untuk memverifikasi bahwa detailnya sudah benar.

2. Pilih Buat untuk memulai pembuatan App Service Static Web App dan provisikan GitHub Actions untuk penyebaran.

3. Setelah penyebaran selesai, pilih Buka sumber daya.

4. Pada layar sumber daya, pilih tautan URL untuk membuka aplikasi yang Anda sebarkan. Anda mungkin perlu menunggu satu atau dua menit agar GitHub Actions selesai.

   

Membersihkan sumber daya

Jika ingin berhenti menggunakan aplikasi ini, Anda dapat menghapus sumber daya Azure Static Web Apps melalui langkah-langkah berikut:

1. Membuka portal Azure
2. Di bilah pencarian atas, cari aplikasi Anda menggunakan nama yang Anda berikan sebelumnya
3. Klik aplikasi
4. Klik tombol Hapus
5. Klik Ya untuk mengonfirmasi tindakan penghapusan

Langkah berikutnya

Menambahkan domain kustom