Öğretici: ARM Şablonu kullanarak Azure Static Web Apps yayımlama

Bu makalede, Azure Resource Manager şablonu (ARM şablonu) kullanarak Azure Static Web Apps'in nasıl dağıtılacağı gösterilmektedir.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

• Azure Static Web Apps için ARM Şablonu oluşturma
• Azure Statik Web Uygulaması örneği oluşturmak için ARM Şablonunu dağıtma

Ön koşullar

• Etkin Azure hesabı: Hesabınız yoksa ücretsiz olarak bir hesap oluşturabilirsiniz.

• GitHub Hesabı: Hesabınız yoksa ücretsiz bir GitHub Hesabı oluşturabilirsiniz

• ARM Şablonları düzenleyicisi: Şablonları gözden geçirmek ve düzenlemek için bir JSON düzenleyicisi gerekir. Azure Resource Manager Araçları uzantısına sahip Visual Studio Code, ARM Şablonlarını düzenlemek için çok uygundur. Visual Studio Code'u yükleme ve yapılandırma yönergeleri için bkz . Hızlı Başlangıç: Visual Studio Code ile ARM şablonları oluşturma.

• Azure CLI veya Azure PowerShell: ARM şablonlarını dağıtmak için bir komut satırı aracı gerekir. Yükleme yönergeleri için bkz:

  • Windows işletim sistemine Azure CLI yükleme
  • Linux işletim sistemine Azure CLI yükleme
  • macOS'a Azure CLI yükleme
  • Azure PowerShell’i yükleme

GitHub kişisel erişim belirteci oluşturma

ARM şablonundaki parametrelerden biri, ARM dağıtım işleminin statik site kaynak kodunu tutan GitHub deposuyla etkileşim kurmasını sağlayan parametresidir repositoryToken.

1. GitHub Hesap Profilinizden (sağ üst köşedeki) Ayarlar seçin.

2. Geliştirici Ayarlar'ı seçin.

3. Kişisel Erişim Belirteçleri'ni seçin.

4. Yeni Belirteç Oluştur'a tıklayın.

5. Ad alanında bu belirteç için bir ad sağlayın, örneğin myfirstswadeployment.

6. Belirteç için bir Süre Sonu seçin; varsayılan değer 30 gündür.

7. Aşağıdaki kapsamları belirtin: depo, iş akışı, write:packages

8. Belirteç oluştur'a tıklayın.

9. 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 depoladığınızdan emin olun. Bu belirteci Azure Key Vault'ta depolamayı ve ARM Şablonunuzda bu belirteçe erişmeyi düşünün.

GitHub deposu oluşturma

Bu makalede, kullanmaya başlamanızı kolaylaştırmak için bir GitHub şablon deposu kullanılmaktadır. Şablonda Azure Static Web Apps kullanarak dağıtmak için kullanılan bir başlangıç uygulaması bulunur.

1. Yeni bir depo oluşturmak için aşağıdaki konuma gidin:

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

2. Deponuza myfirstswadeployment adını verin

   Dekont

   Azure Static Web Apps 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.

3. Create repository (Depo oluştur) öğesine tıklayın.

   

ARM Şablonu Oluşturma

Önkoşullar karşılandığında, bir sonraki adım ARM dağıtım şablonu dosyasını tanımlamaktır.

1. ARM Şablonlarını tutmak için yeni bir klasör oluşturun.

2. Yeni bir dosya oluşturun ve bunu azuredeploy.json olarak adlandırnın.

3. Aşağıdaki ARM şablonu parçacığını azuredeploy.json dosyasına 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'))]"
                           ]
                       }
                   ]
               }
           ]
       }
   
   

4. Yeni bir dosya oluşturun ve azuredeploy.parameters.json olarak adlandırnın.

5. Aşağıdaki ARM şablonu parçacığını azuredeploy.parameters.json dosyasına 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"
                   }
               }
           }
       }
   

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

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

7. Sonraki adımda dağıtımı çalıştırmadan önce güncelleştirmeleri kaydedin.

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

Şablonu dağıtmak için Azure CLI veya Azure PowerShell gerekir.

Azure'da oturum açma

Şablon dağıtmak için Azure CLI veya Azure PowerShell'de oturum açın.

Azure CLI

az login

PowerShell

Connect-AzAccount

Birden çok Azure aboneliğiniz varsa, kullanmak istediğiniz aboneliği seçin. değerini abonelik bilgilerinizle değiştirin <SUBSCRIPTION-ID> :

Azure CLI

az account set --subscription <SUBSCRIPTION-ID>

PowerShell

Set-AzContext <SUBSCRIPTION-ID>

Kaynak grubu oluşturma

Şablon dağıttığınızda, 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.

Dekont

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

Azure CLI

resourceGroupName="myfirstswadeployRG"

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

PowerShell

$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

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

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

PowerShell

$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 şablonları dağıtma hakkında daha fazla bilgi edinmek için bkz . ARM şablonları ve Azure PowerShell ile kaynak dağıtma.

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ını tamamlamanız gerekir.

Statik Web Uygulamalarına genel bakış penceresinde, web uygulamanızla etkileşim kurmanıza yardımcı olacak bir dizi bağlantı görüntülenir.

1. GitHub Actions çalıştırmalarınızın durumunu denetlemek için buraya tıklayın ifadesinin yer aldığı baş harfe tıklanması sizi deponuzda çalışan GitHub Actions'a götürür. Dağıtım işinin tamamlanmasını doğruladıktan sonra, oluşturulan URL aracılığıyla web sitenize gidebilirsiniz.

2. GitHub Actions iş akışı tamamlandıktan sonra URL bağlantısına tıklayarak web sitesini yeni sekmede açabilirsiniz.

Kaynakları temizleme

Kaynak grubunu silerek dağıtmış olduğunuz kaynakları temizleyin.

1. Azure portalda, sol menüden Kaynak grubu’nu seçin.
2. Ada göre filtrele alanına kaynak grubu adını girin.
3. Kaynak grubu adını seçin.
4. Üstteki menüden Kaynak grubunu sil’i seçin.

Sonraki adımlar

Statik web uygulamanızı yapılandırma