Tutorial: Menerbitkan Azure Static Web Apps menggunakan templat ARM

Artikel
05/11/2023

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

Akun Azure aktif: Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
Akun GitHub: Jika Anda tidak memilikinya, Anda dapat membuat Akun GitHub secara gratis
Editor untuk Templat ARM: Meninjau dan mengedit templat memerlukan editor JSON. Visual Studio Code dengan ekstensi Azure Resource Manager Tools sangat cocok untuk mengedit Templat ARM. Untuk petunjuk tentang cara menginstal dan mengonfigurasi Visual Studio Code, lihat Mulai Cepat: Membuat templat ARM dengan Visual Studio Code.
Azure CLI atau Azure PowerShell: Menyebarkan templat ARM memerlukan alat baris perintah. Untuk petunjuk penginstalan, lihat:

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.

Dari Profil Akun GitHub Anda (di pojok kanan atas), pilih Pengaturan.
Pilih Pengaturan Pengembang.
Pilih Token Akses Pribadi.
Pilih Buat Token Baru.
Berikan nama untuk token ini di bidang Nama , misalnya myfirstswadeployment.
Pilih Kedaluwarsa untuk token, defaultnya adalah 30 hari.
Tentukan cakupan berikut: repo, workflow, write:packages
Pilih Buat token.
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.

Buka lokasi berikut untuk membuat repositori baru:
1. https://github.com/staticwebdev/vanilla-basic/generate
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.
Pilih Buat repositori.

Membuat templat ARM

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

Buat folder baru untuk menyimpan Templat ARM.
Buat file baru dan beri nama azuredeploy.json.

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'))]"
                        ]
                    }
                ]
            }
        ]
    }

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

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"
                }
            }
        }
    }

Perbarui parameter berikut.

Parameter Nilai yang diharapkan

repositoryUrl Berikan URL ke repositori GitHub Static Web Apps Anda.

repositoryToken Berikan token PAT GitHub.
Simpan pembaruan sebelum menjalankan penyebaran di langkah berikutnya.

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

Menjalankan penyebaran

Anda memerlukan Azure PowerShell atau Azure CLI untuk menyebarkan templat.

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

Azure CLI
PowerShell

az login

Connect-AzAccount

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

Azure CLI
PowerShell

az account set --subscription <SUBSCRIPTION-ID>

Set-AzContext <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.

Azure CLI
PowerShell

resourceGroupName="myfirstswadeployRG"

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

$resourceGroupName = "myfirstswadeployRG"

New-AzResourceGroup `
  -Name $resourceGroupName `
  -Location "Central US"

Menyebarkan templat

Gunakan salah satu opsi penyebaran ini untuk menyebarkan templat.

Azure CLI
PowerShell


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.

$templateFile = Read-Host -Prompt "Enter the template file path and file name"
$templateparameterFile = Read-Host -Prompt "Enter the template parameter file path and file name"

New-AzResourceGroupDeployment `
  -Name DeployLocalTemplate `
  -ResourceGroupName $resourceGroupName `
  -TemplateFile $templateFile `
  -TemplateParameterFile $templateparameterfile `
  -verbose

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

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

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

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

Langkah berikutnya

Mengonfigurasi aplikasi web statis Anda