Öğretici: ARM şablonu kullanarak Azure statik Web Apps yayımlama

Makale
08/29/2021
Okumak için 4 dakika

Bu makalede, Azure statik Web Apps bir Azure Resource Manager şablonu (ARM şablonu) kullanılarak nasıl dağıtılacağı gösterilmektedir.

Bu öğreticide şunların nasıl yapıldığını öğrenirsiniz:

Azure statik Web Apps için ARM şablonu oluşturma
Azure statik Web uygulaması örneği oluşturmak için ARM şablonunu dağıtma

Önkoşullar

Etkin Azure hesabı: Bir hesabınız yoksa, ücretsiz olarak bir hesap oluşturabilirsiniz.
GitHub hesabı: bir tane yoksa, ücretsiz olarak GitHub bir hesap oluşturabilirsiniz
ARM şablonları Için Düzenleyici: Şablonları gözden geçirme ve düzenleme, JSON Düzenleyicisi gerektirir. Azure Resource Manager araçları uzantısı ile Visual Studio Code ARM şablonlarının düzenlenmesine uygun bir seçenektir. Visual Studio Code nasıl yükleneceğine ve yapılandırılacağına ilişkin yönergeler için bkz. hızlı başlangıç: Visual Studio Code ile ARM şablonları oluşturma.
Azure clı veya Azure PowerShell: ARM şablonlarının dağıtımı için bir komut satırı aracı gereklidir. Yükleme yönergeleri için bkz.:

GitHub kişisel erişim belirteci oluşturma

arm şablonundaki parametrelerden biri repositoryToken , arm dağıtım sürecinin statik site kaynak kodunu tutan GitHub depoyla etkileşime geçmesini sağlayan bir işlemdir.

GitHub hesap profilinizden (sağ üst köşede) Ayarlar' i seçin.
geliştirici Ayarlar seçin.
Kişisel erişim belirteçleri' ni seçin.
Yeni belirteç oluştur' u seçin.
Note alanına bu belirteç için bir ad girin, örneğin, myfirstswadeployment.
Şu kapsamları belirtin: Depo, iş akışı, yazma: paketler
Belirteç oluştur' u seçin.
Belirteç değerini kopyalayın ve daha sonra kullanmak üzere bir metin düzenleyicisine yapıştırın.

Önemli

Bu belirteci kopyalayıp güvenli bir yerde sakladığınızdan emin olun. Bu belirteci Azure Key Vault ' de DEPOLAMAYı ve ARM şablonunuzda ona erişmeyi düşünün.

GitHub deposu oluşturma

bu makalede, başlamanıza olanak sağlamak için GitHub şablon deposu kullanılmaktadır. Şablon, Azure statik Web Apps kullanarak dağıtmak için kullanılan bir başlangıç uygulaması sunar.

Yeni bir depo oluşturmak için aşağıdaki konuma gidin:
1. https://github.com/staticwebdev/vanilla-basic/generate
Deponuzu myfirstswadeployment adlandırın

Not

Azure statik Web Apps, bir Web uygulaması oluşturmak için en az bir HTML dosyası gerektirir. Bu adımda oluşturduğunuz depo, tek bir index.html dosyası içerir.
Şablondan depo oluştur’u seçin.

ARM şablonunu oluşturma

Önkoşullar söz konusu olduğunda, sonraki adım ARM dağıtım şablonu dosyasını tanımlamaktır.

ARM şablonlarını tutmak için yeni bir klasör oluşturun.
Yeni bir dosya oluşturun ve azuredeploy.jsüzerine adlandırın.

Aşağıdaki ARM şablon kod parçacığını üzerineazuredeploy.js yapıştırın.

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

Yeni bir dosya oluşturun ve azuredeploy.parameters.jsüzerine adlandırın.

Aşağıdaki ARM şablon kod parçacığını üzerineazuredeploy.parameters.js yapıştırın.

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

Aşağıdaki parametreleri güncelleştirin.

Parametre Beklenen değer

repositoryUrl statik Web Apps GitHub deponuzun URL 'sini sağlayın.

repositoryToken GitHub PAT belirtecini sağlayın.
Bir sonraki adımda dağıtımı çalıştırmadan önce güncelleştirmeleri kaydedin.

Parametre	Beklenen değer
`repositoryUrl`	statik Web Apps GitHub deponuzun URL 'sini sağlayın.
`repositoryToken`	GitHub PAT belirtecini sağlayın.

Dağıtımı çalıştırma

şablonu dağıtmak için Azure clı veya Azure PowerShell gerekir.

Bir şablonu dağıtmak için Azure CLı veya Azure PowerShell oturum açın.

Azure CLI
PowerShell

az login

Connect-AzAccount

Birden çok Azure aboneliğiniz varsa, kullanmak istediğiniz aboneliği seçin. <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME>Abonelik bilgileriniz ile değiştirin:

Azure CLI
PowerShell

az account set --subscription <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME>

Set-AzContext <SUBSCRIPTION-ID-OR-SUBSCRIPTION-NAME>

Kaynak grubu oluşturma

Bir şablonu dağıtırken ilgili kaynakları içeren bir kaynak grubu belirtirsiniz. Dağıtım komutunu çalıştırmadan önce Azure CLI veya Azure PowerShell ile kaynak grubunu oluşturun.

Not

Bu makaledeki CLı örnekleri bash kabuğu için yazılmıştır.

Azure CLI
PowerShell

resourceGroupName="myfirstswadeployRG"

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

$resourceGroupName = "myfirstswadeployRG"

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

Şablon dağıtma

Şablonu dağıtmak için bu dağıtım seçeneklerinden birini kullanın.

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

Azure CLı kullanarak şablon dağıtma hakkında daha fazla bilgi edinmek için bkz. ARM şablonları ve Azure CLI ile kaynak dağıtma.

$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

Azure PowerShell kullanarak şablon dağıtma hakkında daha fazla bilgi için bkz. ARM şablonlarıyla kaynak dağıtma ve Azure PowerShell.

Web sitesini görüntüleme

Statik uygulama dağıtmanın iki yönü vardır. Bunların ilki uygulamanızı oluşturan temel alınan Azure kaynaklarının sağlanmasıdır. İkincisi de, uygulamanızı derleyip yayımlayan GitHub Actions iş akışıdır.

Yeni statik sitenize gidebilmeniz için önce dağıtım derlemesinin çalıştırılması gerekir.

Statik Web Apps genel bakış penceresinde web uygulamanızla etkileşime başlamanıza yardımcı olacak bir dizi bağlantı görüntülenir.

Genel bakış penceresi

Yazılı başlığa tıkladığınızda, GitHub eylemlerinizin durumunu denetlemek için buraya tıklayın . Bu işlem sizi deponuza karşı çalışan GitHub eylemlerine götürür. Dağıtım işinin tamamlandığını doğruladıktan sonra, oluşturulan URL aracılığıyla Web sitenize gidebilirsiniz.
GitHub eylemleri iş akışı tamamlandıktan sonra, Web sitesini yeni sekmede açmak için URL bağlantısına tıklayabilirsiniz.

Kaynakları temizleme

Kaynak grubunu silerek dağıttığınız kaynakları temizleyin.

Azure portal, sol menüden kaynak grubu ' nu seçin.
Ada göre filtrele alanına kaynak grubu adını girin.
Kaynak grubu adını seçin.
Üstteki menüden kaynak grubunu sil ' i seçin.

Sonraki adımlar

Statik Web uygulamanızı yapılandırma