Bagikan melalui

Tutorial: Menerbitkan Azure Static Web Apps menggunakan templat ARM

  • Artikel

Artikel ini menjelaskan cara menyebarkan Azure Static Web Apps menggunakan templat Azure Resource Manager (template ARM).

Dalam tutorial ini, Anda mempelajari caranya:

  • Membuat Templat ARM untuk Azure Static Web Apps
  • Menyebarkan Templat ARM untuk membuat instans Azure Static Web App

Prasyarat

Membuat token akses pribadi GitHub

Salah satu parameter di templat ARM adalah repositoryToken, yang memungkinkan proses penyebaran ARM untuk berinteraksi dengan repositori GitHub yang menyimpan kode sumber statik.

  1. Dari Profil Akun GitHub Anda (di pojok kanan atas), pilih Pengaturan.

  2. Pilih Pengaturan Pengembang.

  3. Pilih Token Akses Pribadi.

  4. Pilih Buat Token Baru.

  5. Berikan nama untuk token ini di bidang Nama , misalnya myfirstswadeployment.

  6. Pilih Kedaluwarsa untuk token, defaultnya adalah 30 hari.

  7. Tentukan cakupan berikut: repo, workflow, write:packages

  8. Pilih Buat token.

  9. Salin nilai token dan tempelkan ke editor teks untuk digunakan nanti.

Penting

Pastikan Anda menyalin token ini dan menyimpannya di tempat yang aman. Pertimbangkan untuk menyimpan token ini di Azure Key Vault dan akses di Template ARM Anda.

Membuat repo GitHub

Artikel ini menggunakan repositori templat GitHub untuk memudahkan Anda memulai. Templat ini menggunakan aplikasi pemula yang disebarkan menggunakan Azure Static Web Apps.

  1. Buka lokasi berikut untuk membuat repositori baru:

    1. https://github.com/staticwebdev/vanilla-basic/generate

  2. Beri nama repositori myfirstswadeployment

    Catatan

    Azure Static Web Apps memerlukan setidaknya satu file HTML untuk membuat aplikasi web. Repositori yang Anda buat dalam langkah ini mencakup satu file index.html.

  3. Pilih Buat repositori.

    screenshot of the Create repository button.

Membuat templat ARM

Dengan prasyarat yang diberlakukan, langkah selanjutnya adalah menentukan file templat penyebaran ARM.

  1. Buat folder baru untuk menyimpan Templat ARM.

  2. Buat file baru dan beri nama azuredeploy.json.

  3. Tempelkan cuplikan templat ARM berikut ke azuredeploy.json.

        {
        "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
        "contentVersion": "1.0.0.0",
        "parameters": {
            "name": {
                "type": "string"
            },
            "location": {
                "type": "string"
            },
            "sku": {
                "type": "string"
            },
            "skucode": {
                "type": "string"
            },
            "repositoryUrl": {
                "type": "string"
            },
            "branch": {
                "type": "string"
            },
            "repositoryToken": {
                "type": "securestring"
            },
            "appLocation": {
                "type": "string"
            },
            "apiLocation": {
                "type": "string"
            },
            "appArtifactLocation": {
                "type": "string"
            },
            "resourceTags": {
                "type": "object"
            },
            "appSettings": {
                "type": "object"
            }
        },
        "resources": [
            {
                "apiVersion": "2021-01-15",
                "name": "[parameters('name')]",
                "type": "Microsoft.Web/staticSites",
                "location": "[parameters('location')]",
                "tags": "[parameters('resourceTags')]",
                "properties": {
                    "repositoryUrl": "[parameters('repositoryUrl')]",
                    "branch": "[parameters('branch')]",
                    "repositoryToken": "[parameters('repositoryToken')]",
                    "buildProperties": {
                        "appLocation": "[parameters('appLocation')]",
                        "apiLocation": "[parameters('apiLocation')]",
                        "appArtifactLocation": "[parameters('appArtifactLocation')]"
                    }
                },
                "sku": {
                    "Tier": "[parameters('sku')]",
                    "Name": "[parameters('skuCode')]"
                },
                "resources":[
                    {
                        "apiVersion": "2021-01-15",
                        "name": "appsettings",
                        "type": "config",
                        "location": "[parameters('location')]",
                        "properties": "[parameters('appSettings')]",
                        "dependsOn": [
                            "[resourceId('Microsoft.Web/staticSites', parameters('name'))]"
                        ]
                    }
                ]
            }
        ]
    }

  4. Buat file baru dan beri nama azuredeploy.parameters.json.

  5. Tempelkan cuplikan templat ARM berikut ke azuredeploy.parameters.json.

        {
        "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
        "contentVersion": "1.0.0.0",
        "parameters": {
            "name": {
                "value": "myfirstswadeployment"
            },
            "location": { 
                "value": "Central US"
            },   
            "sku": {
                "value": "Free"
            },
            "skucode": {
                "value": "Free"
            },
            "repositoryUrl": {
                "value": "https://github.com/<YOUR-GITHUB-USER-NAME>/<YOUR-GITHUB-REPOSITORY-NAME>"
            },
            "branch": {
                "value": "main"
            },
            "repositoryToken": {
                "value": "<YOUR-GITHUB-PAT>" 
            },
            "appLocation": {
                "value": "/"
            },
            "apiLocation": {
                "value": ""
            },
            "appArtifactLocation": {
                "value": "src"
            },
            "resourceTags": {
                "value": {
                    "Environment": "Development",
                    "Project": "Testing SWA with ARM",
                    "ApplicationName": "myfirstswadeployment"
                }
            },
            "appSettings": {
                "value": {
                    "MY_APP_SETTING1": "value 1",
                    "MY_APP_SETTING2": "value 2"
                }
            }
        }
    }

  6. Perbarui parameter berikut.

    Parameter Nilai yang diharapkan
    repositoryUrl Berikan URL ke repositori GitHub Static Web Apps Anda.
    repositoryToken Berikan token PAT GitHub.

  7. Simpan pembaruan sebelum menjalankan penyebaran di langkah berikutnya.

Menjalankan penyebaran

Anda memerlukan Azure PowerShell atau Azure CLI untuk menyebarkan templat.

Masuk ke Azure

Untuk menyebarkan templat, masuk ke Azure CLI atau Azure PowerShell.

az login

Jika Anda memiliki beberapa langganan Azure, pilih langganan yang ingin Anda gunakan. Ganti <SUBSCRIPTION-ID> dengan informasi langganan Anda:

az account set --subscription <SUBSCRIPTION-ID>

Buat grup sumber daya

Saat menyebarkan templat, Anda menentukan grup sumber daya yang berisi sumber daya. Sebelum menjalankan perintah penyebaran, buat grup sumber daya dengan Azure CLI atau Azure PowerShell.

Catatan

Contoh CLI dalam artikel ini ditulis untuk shell Bash.

resourceGroupName="myfirstswadeployRG"

az group create \
  --name $resourceGroupName \
  --location "Central US"

Menyebarkan templat

Gunakan salah satu opsi penyebaran ini untuk menyebarkan templat.


az deployment group create \
  --name DeployLocalTemplate \
  --resource-group $resourceGroupName \
  --template-file <PATH-TO-AZUREDEPLOY.JSON> \
  --parameters <PATH-TO-AZUREDEPLOY.PARAMETERS.JSON> \
  --verbose

Untuk mempelajari lebih lanjut tentang penyebaran templat menggunakan Azure CLI, lihat Menyebarkan sumber daya dengan templat ARM dan Azure CLI.

Menampilkan situs web

Ada dua aspek untuk menyebarkan aplikasi statik. Yang pertama menyediakan sumber daya Azure yang mendasari yang membentuk aplikasi Anda. Yang kedua adalah alur kerja GitHub Actions yang membangun dan menerbitkan aplikasi Anda.

Sebelum Anda dapat menavigasikan ke situs statik baru, build penyebaran harus selesai berjalan terlebih dahulu.

Jendela gambaran umum Static Web Apps menampilkan serangkaian tautan yang membantu Anda berinteraksi dengan aplikasi web Anda.

Overview window

  1. Mengeklik banner yang bertuliskan, Klik di sini untuk memeriksa status Tindakan GitHub Anda berjalan akan membawa Anda ke Tindakan GitHub yang berjalan di repositori Anda. Setelah Anda memverifikasi bahwa tugas penyebaran selesai, Anda dapat membuka situs web Anda melalui URL yang dihasilkan.

  2. Setelah alur kerja Tindakan GitHub selesai, Anda dapat mengeklik tautan URL untuk membuka situs web di tab baru.

Membersihkan sumber daya

Bersihkan sumber daya yang telah Anda sebarkan dengan menghapus grup sumber daya.

  1. Dari portal Azure, pilih Grup sumber daya dari menu sebelah kiri.
  2. Masukkan nama grup sumber daya di bidang Filter menurut nama.
  3. Pilih nama grup sumber daya.
  4. Pilih Hapus grup sumber daya dari menu atas.

Langkah berikutnya

Mengonfigurasi aplikasi web statis Anda