Menggunakan alur kerja Tindakan GitHub untuk menempatkan situs web statik Anda di Azure Storage

Memulai Tindakan GitHub dengan menggunakan alur kerja untuk menempatkan situs statik ke akun penyimpanan Azure. Setelah Anda menyiapkan alur kerja Tindakan GitHub, Anda akan dapat memindahkan situs ke Azure dari GitHub secara otomatis saat membuat perubahan pada kode situs Anda.

Catatan

Jika Anda menggunakan Azure Static Web Apps, maka Anda tidak perlu menyiapkan alur kerja Tindakan GitHub secara manual. Azure Static Web Apps membuat alur kerja Tindakan GitHub secara otomatis untuk Anda.

Prasyarat

Langganan Azure dan akun GitHub.

• Akun Azure dengan langganan aktif. Buat akun secara gratis.
• Repositori GitHub dengan kode situs web statik Anda. Jika Anda tidak memiliki akun GitHub, daftar gratis.
• Situs web statik yang berfungsi dihosting di Azure Storage. Pelajari cara Menghosting situs web statik di Azure Storage. Untuk mengikuti contoh ini, Anda juga harus menerapkan Azure CDN.

Catatan

Merupakan hal yang umum untuk menggunakan jaringan pengiriman konten (CDN) untuk mengurangi latensi bagi pengguna Anda di seluruh dunia dan untuk mengurangi jumlah transaksi ke akun penyimpanan Anda. Memindahkan konten statik ke layanan penyimpanan berbasis cloud dapat mengurangi kebutuhan instans komputasi yang berpotensi mahal. Untuk informasi selengkapnya, lihat Pola Hosting Konten Statik.

Membuat kredensial penyebaran

OpenID Connect

Untuk menggunakan tindakan Azure Login dengan OIDC, Anda perlu mengonfigurasi kredensial identitas gabungan pada aplikasi Microsoft Entra atau identitas terkelola yang ditetapkan pengguna.

Opsi 1: Aplikasi Microsoft Entra

• Buat aplikasi Microsoft Entra dengan principal layanan menggunakan portal Azure, Azure CLI, atau Azure PowerShell.
• Salin nilai untuk ID Klien, ID Langganan, dan ID Direktori (penyewa) untuk digunakan nanti di alur kerja GitHub Actions Anda.
• Tetapkan peran yang sesuai untuk perwakilan layanan Anda dengan portal Azure, Azure CLI, atau Azure PowerShell.
• Konfigurasikan kredensial identitas gabungan pada aplikasi Microsoft Entra untuk mempercayai token yang dikeluarkan oleh GitHub Actions ke repositori GitHub Anda.

Opsi 2: Identitas terkelola yang ditetapkan pengguna

• Buat identitas terkelola yang ditetapkan pengguna.
• Salin nilai untuk ID Klien, ID Langganan, dan ID Direktori (penyewa) untuk digunakan nanti di alur kerja GitHub Actions Anda.
• Tetapkan peran yang sesuai ke identitas terkelola yang ditetapkan pengguna Anda.
• Konfigurasikan kredensial identitas federasi pada identitas terkelola yang ditetapkan pengguna untuk mempercayai token yang dikeluarkan oleh GitHub Actions ke repositori GitHub Anda.

Prinsipal layanan

• Buat aplikasi Microsoft Entra dengan perwakilan layanan dengan menggunakan portal Azure, Azure CLI, atau Azure PowerShell.
• Buat rahasia klien untuk perwakilan layanan Anda dengan portal Azure, Azure CLI, atau Azure PowerShell.
• Salin nilai untuk ID Klien, Rahasia Klien, ID Langganan, dan ID Direktori (penyewa) untuk digunakan nanti di alur kerja GitHub Actions Anda.
• Tetapkan peran yang sesuai untuk perwakilan layanan Anda dengan portal Azure, Azure CLI, atau Azure PowerShell.

Mengonfigurasi rahasia GitHub

OpenID Connect

Anda perlu memberikan ID Klien, ID Direktori (penyewa), dan ID Langganan aplikasi Anda ke tindakan masuk. Nilai ini bisa disediakan secara langsung di alur kerja atau bisa disimpan di rahasia GitHub dan direferensikan dalam alur kerja Anda. Menyimpan nilai sebagai GitHub rahasia adalah opsi yang lebih aman.

1. Di GitHub, buka repositori Anda.

2. Pilih Rahasia Keamanan dan variabel > Tindakan.

   

3. Pilih Rahasia repositori baru.

   Catatan

   Untuk meningkatkan keamanan alur kerja di repositori publik, gunakan rahasia lingkungan alih-alih rahasia repositori. Jika lingkungan memerlukan persetujuan, pekerjaan tidak dapat mengakses rahasia lingkungan hingga salah satu peninjau yang diperlukan menyetujuinya.

4. Membuat rahasia untuk AZURE_CLIENT_ID, AZURE_TENANT_ID, dan AZURE_SUBSCRIPTION_ID. Salin nilai-nilai ini dari aplikasi Microsoft Entra atau identitas terkelola yang ditetapkan pengguna untuk rahasia GitHub Anda:

   Rahasia GitHub	Aplikasi Microsoft Entra atau identitas terkelola yang ditetapkan pengguna
   AZURE_CLIENT_ID	ID klien
   AZURE_SUBSCRIPTION_ID	ID Langganan
   AZURE_TENANT_ID	ID (tenant) direktori

   Catatan

   Untuk alasan keamanan, sebaiknya gunakan Rahasia GitHub daripada meneruskan nilai langsung ke alur kerja.

Prinsipal layanan

1. Di GitHub, buka repositori Anda.

2. Buka Pengaturan di menu navigasi.

3. Pilih Rahasia dan variabel Keamanan > Tindakan.

   

4. Pilih Rahasia repositori baru.

5. Tempelkan seluruh output JSON dari perintah CLI Azure ke bidang nilai rahasia. Namai rahasia sebagai AZURE_CREDENTIALS.

6. Pilih Tambahkan rahasia.

Menambahkan alur kerja Anda

OpenID Connect

1. Buka Tindakan untuk repositori GitHub Anda.

   

2. Pilih Siapkan alur kerja Anda sendiri.

3. Hapus semuanya setelah bagian on: dari file alur kerja Anda. Misalnya, alur kerja Anda yang tersisa mungkin terlihat seperti ini.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   

4. Menambahkan bagian izin.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   

5. Tambahkan aksi pembayaran dan masuk. Tindakan ini akan memeriksa kode situs Anda dan mengautentikasi dengan Azure dengan menggunakan rahasia GitHub yang Anda buat sebelumnya.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   

6. Gunakan tindakan Azure CLI untuk mengunggah kode Anda ke penyimpanan blob dan untuk membersihkan titik akhir CDN Anda. Untuk az storage blob upload-batch, gantikan placeholder dengan nama akun penyimpanan Anda. Skrip akan diunggah ke kontainer $web. Untuk az cdn endpoint purge, ganti placeholder dengan nama profil CDN Anda, nama titik akhir CDN, dan grup sumber daya Anda. Untuk mempercepat penghapusan menyeluruh CDN, Anda dapat menambahkan opsi --no-wait ke az cdn endpoint purge. Untuk meningkatkan keamanan, Anda juga dapat menambahkan opsi --account-key dengan kunci akun penyimpanan Anda.

       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   

7. Selesaikan alur kerja Anda dengan menambahkan tindakan untuk keluar dari Azure. Berikut adalah alur kerja yang telah selesai. File akan muncul di folder .github/workflows repositori Anda.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   
     # Azure logout
       - name: logout
         run: |
               az logout
         if: always()
   

Prinsipal layanan

1. Buka Tindakan untuk repositori GitHub Anda.

   

2. Pilih Siapkan alur kerja Anda sendiri.

3. Hapus semuanya setelah bagian on: dari file alur kerja Anda. Misalnya, alur kerja Anda yang tersisa mungkin terlihat seperti ini.

   name: CI
   
   on:
       push:
           branches: [ main ]
   

4. Ganti nama alur kerja sebagai Blob storage website CI dan tambahkan tindakan selesai dan masuk. Tindakan ini akan menyelesaikan kode situs Anda dan mengautentikasi dengan Azure menggunakan AZURE_CREDENTIALS GitHub rahasia yang Anda buat sebelumnya.

   name: Blob storage website CI
   
   on:
       push:
           branches: [ main ]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
             creds: ${{ secrets.AZURE_CREDENTIALS }}
   

5. Gunakan tindakan Azure CLI untuk mengunggah kode Anda ke penyimpanan blob dan untuk membersihkan titik akhir CDN Anda. Untuk az storage blob upload-batch, ganti tempat penampung dengan nama akun penyimpanan. Skrip akan diunggah ke kontainer $web. Untuk az cdn endpoint purge, ganti placeholder dengan nama profil CDN Anda, nama titik akhir CDN, dan grup sumber daya. Untuk mempercepat penghapusan menyeluruh CDN, Anda dapat menambahkan opsi --no-wait ke az cdn endpoint purge. Untuk meningkatkan keamanan, Anda juga dapat menambahkan opsi --account-key dengan kunci akun penyimpanan Anda.

       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   

6. Selesaikan alur kerja Anda dengan menambahkan tindakan untuk logout dari Azure. Berikut adalah alur kerja yang telah selesai. File akan muncul di folder .github/workflows repositori Anda.

   name: Blob storage website CI
   
   on:
       push:
           branches: [ main ]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
             creds: ${{ secrets.AZURE_CREDENTIALS }}
   
       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   
     # Azure logout
       - name: logout
         run: |
               az logout
         if: always()
   

Meninjau penerapan Anda

1. Buka Tindakan untuk repositori GitHub Anda.

2. Buka hasil pertama untuk melihat log terperinci dari eksekusi alur kerja Anda.

   

Membersihkan sumber daya

Saat situs web statik dan repositori GitHub Anda tidak lagi diperlukan, bersihkan sumber daya yang Anda terapkan dengan menghapus grup sumber daya dan repositori GitHub Anda.

Langkah berikutnya

Pelajari tentang Azure Static Web Apps