Azure Static Web Apps için derleme yapılandırması

Azure Static Web Apps derleme yapılandırması GitHub Actions veya Azure Pipelines tarafından desteklenir. Her sitenin, sitenin nasıl derlendiğini ve dağıtıldığını denetlediği bir YAML yapılandırma dosyası vardır. Bu makalede dosyanın yapısı ve seçenekleri açıklanmaktadır.

Aşağıdaki tabloda kullanılabilir yapılandırma ayarları listelenir.

Özellik	Açıklama	Gerekli
app_location	Bu klasör ön uç uygulamanızın kaynak kodunu içerir. Değer GitHub'daki depo köküne ve Azure DevOps'taki geçerli çalışma klasörüne göredir. ile skip_app_build: truekullanıldığında, bu değer uygulamanın derleme çıkış konumudur.	Evet
api_location	API uygulamanızın kaynak kodunu içeren bu klasör. Değer GitHub'daki depo köküne ve Azure DevOps'taki geçerli çalışma klasörüne göredir. ile skip_api_build: truekullanıldığında, bu değer API'nin derleme çıkış konumudur.	Hayır
output_location	Web uygulamanız bir derleme adımı çalıştırıyorsa, çıkış konumu ortak dosyaların oluşturulduğu klasördür. Çoğu proje için , output_location ile app_locationgörelidir. Ancak, .NET projeleri için konum yayımlama çıktı klasörüne göredir.	Hayır
app_build_command	Node.js uygulamaları için statik içerik uygulamasını derlemek için özel bir komut tanımlayabilirsiniz. Örneğin, Angular uygulaması için bir üretim derlemesi yapılandırmak için komutunu çalıştırmak ng build --prod ve özel komut olarak girmek npm run build-prod üzere adlı build-prod bir npm betiği oluşturun. Boş bırakılırsa, iş akışı veya npm run build:azure komutlarını çalıştırmayı npm run build dener.	Hayır
api_build_command	Node.js uygulamaları için, Azure İşlevleri API uygulamasını derlemek için özel bir komut tanımlayabilirsiniz.	Hayır
skip_app_build	Ön uç uygulamasını derlemeyi atlamak için değerini true olarak ayarlayın.	Hayır
skip_api_build	API işlevlerini derlemeyi atlamak için değerini true olarak ayarlayın.	Hayır
cwd (Yalnızca Azure Pipelines)	Çalışma klasörünün mutlak yolu. varsayılan değeridir $(System.DefaultWorkingDirectory).	Hayır
build_timeout_in_minutes	Derleme zaman aşımını özelleştirmek için bu değeri ayarlayın. varsayılan değeridir 15.	Hayır

Bu ayarlarla GitHub Actions'ı veya Azure Pipelines'ı statik web uygulamanız için sürekli tümleştirme/sürekli teslim (CI/CD) çalıştıracak şekilde ayarlayabilirsiniz.

Dosya adı ve konumu

GitHub Actions

Yapılandırma dosyası GitHub tarafından oluşturulur ve şu biçim kullanılarak adlandırılan .github/workflows klasöründe depolanır: azure-static-web-apps-<RANDOM_NAME>.yml.

Azure Pipelines

Varsayılan olarak, yapılandırma dosyası deponuzun kökünde adıyla azure-pipelines.ymldepolanır.

Yapı yapılandırması

Aşağıdaki örnek yapılandırma, depoyu değişiklikler için izler. İşlemeler dala gönderildiğinde main , uygulama klasöründen app_location oluşturulur ve içindeki output_location dosyalar genel web'e sunulur. Buna ek olarak, api klasöründeki uygulama sitenin api yolunda kullanılabilir.

GitHub Actions

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations ######
          app_location: "src" # App source code path relative to repository root
          api_location: "api" # Api source code path relative to repository root - optional
          output_location: "public" # Built app content directory, relative to app_location - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

Bu yapılandırmada:

• Dal main işlemeler için izlenir.
• Daldaki main bir çekme isteği açıldığında, eşitlendiğinde, yeniden açıldığında veya kapatıldığında GitHub Actions iş akışı tetiklenir.
• yürütmeleri build_and_deploy_job gönderdiğinizde veya özelliğinde listelenen dalda bir çekme isteği açtığınızda yürütülür on .
• Web app_location uygulamasının src kaynak dosyalarını içeren klasörü gösterir. Bu değeri depo köküne ayarlamak için kullanın /.
• Sitenin api_locationapi API uç noktaları için Azure İşlevleri uygulamasını içeren klasörü gösterir. Bu değeri depo köküne ayarlamak için kullanın /.
• Uygulamanın output_location kaynak dosyalarının public son sürümünü içeren klasörü gösterir. ile görelidir app_location. .NET projeleri için konum yayımlama çıktı klasörüne göredir.

Azure Static Web Apps tarafından sizin için repo_tokenayarlanmış olan , actionve azure_static_web_apps_api_token değerlerini değiştirmeyin.

Azure Pipelines

trigger:
  - main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: 'src' # App source code path relative to cwd
      api_location: 'api' # Api source code path relative to cwd
      output_location: 'public' # Built app content directory relative to app_location - optional
      cwd: '$(System.DefaultWorkingDirectory)/myapp' # Working directory - optional
      azure_static_web_apps_api_token: $(deployment_token)

Bu yapılandırmada:

• Dal main işlemeler için izlenir.
• Web app_location uygulamasının src kaynak dosyalarını içeren klasörü gösterir. Bu değer çalışma dizinine () göredircwd. Bunu çalışma dizinine ayarlamak için kullanın /.
• Sitenin api_locationapi API uç noktaları için Azure İşlevleri uygulamasını içeren klasörü gösterir. Bu değer çalışma dizinine () göredircwd. Bunu çalışma dizinine ayarlamak için kullanın /.
• Uygulamanın output_location kaynak dosyalarının public son sürümünü içeren klasörü gösterir. Bu değer ile app_locationgörelidir. .NET projeleri için konum yayımlama çıktı klasörüne göredir.
• cwd, çalışma dizinine işaret eden mutlak bir yoldur. Varsayılan olarak olur $(System.DefaultWorkingDirectory).
• Değişken, $(deployment_token) oluşturulan Azure DevOps dağıtım belirtecini gösterir.

Dekont

app_location ve api_location çalışma dizinine (cwd) göre olmalı ve altında cwdalt dizinler olmalıdır.

Özel derleme komutları

Node.js uygulamaları için uygulama veya API derleme işlemi sırasında çalıştırılan komutlar üzerinde ayrıntılı denetime sahip olabilirsiniz. Aşağıdaki örnekte ve api_build_commanddeğerleriyle derlemenin nasıl tanımlanacağı gösterilmektedirapp_build_command.

Dekont

Şu anda yalnızca Node.js derlemeleri için ve api_build_command tanımlayabilirsinizapp_build_command. Node.js sürümünü belirtmek için dosyadaki package.json alanını kullanınengines.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: '/'
  api_location: 'api'
  output_location: 'dist'
  app_build_command: 'npm run build-ui-prod'
  api_build_command: 'npm run build-api-prod'

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  app_build_command: 'npm run build-ui-prod'
  api_build_command: 'npm run build-api-prod'
  output_location: 'public'
  azure_static_web_apps_api_token: $(deployment_token)

Ön uç uygulaması derlemeyi atlama

Ön uç uygulamanız için derlemenin tam denetimine ihtiyacınız varsa, otomatik derlemeyi atlayabilir ve önceki adımda oluşturulan uygulamayı dağıtabilirsiniz.

Ön uç uygulamasını derlemeyi atlamak için:

• Dağıtmak istediğiniz dosyaların konumuna ayarlayın app_location .
• skip_app_build seçeneğini true olarak ayarlayın.
• Boş bir dizeye ()'' ayarlayınoutput_location.

Dekont

Dosyanızın staticwebapp.config.json da çıkış dizinine kopyaladığınızdan emin olun.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src/dist'
  api_location: 'api'
  output_location: ''
  skip_app_build: true

Azure Pipelines

...

inputs:
  app_location: 'src/dist'
  api_location: 'api'
  output_location: '' # Leave this empty
  skip_app_build: true
  azure_static_web_apps_api_token: $(deployment_token)

API'yi derlemeyi atlama

API'yi derlemeyi atlamak istiyorsanız, otomatik derlemeyi atlayabilir ve önceki adımda oluşturulan API'yi dağıtabilirsiniz.

API'yi derlemeyi atlama adımları:

• staticwebapp.config.json dosyasında doğru çalışma zamanına ve sürüme ayarlayınapiRuntime. Desteklenen çalışma zamanlarının ve sürümlerin listesi için Bkz. Azure Static Web Apps'i yapılandırma.

  {
    "platform": {
      "apiRuntime": "node:16"
    }
  }
  

• skip_api_build seçeneğini true olarak ayarlayın.
• Dağıtılacak yerleşik API uygulamasını içeren klasöre ayarlayın api_location . Bu yol GitHub Actions ve cwd Azure Pipelines'daki depo köküne göredir.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: "src" # App source code path relative to repository root
  api_location: "api" # Api source code path relative to repository root - optional
  output_location: "public" # Built app content directory, relative to app_location - optional
  skip_api_build: true

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  skip_api_build: true
  azure_static_web_apps_api_token: $(deployment_token)

Derleme zaman aşımını genişletme

Varsayılan olarak, uygulama ve API derlemeleri 15 dakika ile sınırlıdır. Özelliğini ayarlayarak derleme zaman aşımını build_timeout_in_minutes genişletebilirsiniz.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  build_timeout_in_minutes: 30

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  build_timeout_in_minutes: 30
  azure_static_web_apps_api_token: $(deployment_token)

Dağıtım gizli dizileri olmadan iş akışı çalıştırma

Bazen bazı gizli diziler eksik olsa bile iş akışınızın işlemeye devam etmesi gerekir. SKIP_DEPLOY_ON_MISSING_SECRETS İş akışınızı tanımlı gizli diziler olmadan devam etmek üzere yapılandırmak için ortam değişkenini true olarak ayarlayın.

Bu özellik etkinleştirildiğinde, iş akışının sitenin içeriğini dağıtmadan devam etmesini sağlar.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
env:
  SKIP_DEPLOY_ON_MISSING_SECRETS: true

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  azure_static_web_apps_api_token: $(deployment_token)
env:
  SKIP_DEPLOY_ON_MISSING_SECRETS: true

Ortam değişkenleri

Derlemeniz için ortam değişkenlerini bir işin yapılandırmasının bölümü aracılığıyla env ayarlayabilirsiniz.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
env: # Add environment variables here
  HUGO_VERSION: 0.58.0

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  azure_static_web_apps_api_token: $(deployment_token)
env: # Add environment variables here
  HUGO_VERSION: 0.58.0

Monorepo desteği

Monorepo, birden fazla uygulamanın kodunu içeren bir depodur. varsayılan olarak, iş akışı bir depodaki tüm dosyaları izler, ancak yapılandırmayı tek bir uygulamayı hedeflemek için ayarlayabilirsiniz.

bir iş akışı dosyasını tek bir uygulamaya hedeflemek için ve pull_request bölümlerinde yolları push belirtirsiniz.

GitHub Actions

Monorepo ayarladığınızda, her statik uygulama yapılandırmasının kapsamı yalnızca tek bir uygulama için dosya olarak belirlenmiştir. Farklı iş akışı dosyaları, deponun .github/workflows klasöründe yan yana bulunur.

├── .github
│   └── workflows
│       ├── azure-static-web-apps-purple-pond.yml
│       └── azure-static-web-apps-yellow-shoe.yml
│
├── app1  👉 controlled by: azure-static-web-apps-purple-pond.yml
├── app2  👉 controlled by: azure-static-web-apps-yellow-shoe.yml
│
├── api1  👉 controlled by: azure-static-web-apps-purple-pond.yml
├── api2  👉 controlled by: azure-static-web-apps-yellow-shoe.yml
│
└── README.md

Aşağıdaki örnekte azure-static-web-apps-purple-pond.yml adlı dosyanın ve pull_request bölümlerine nasıl düğüm push ekleneceği paths gösterilmektedir.

on:
  push:
    branches:
      - main
    paths:
      - app1/**
      - api1/**
      - .github/workflows/azure-static-web-apps-purple-pond.yml
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
    paths:
      - app1/**
      - api1/**
      - .github/workflows/azure-static-web-apps-purple-pond.yml

Bu örnekte, yalnızca aşağıdaki dosyalarda yapılan değişiklikler yeni bir derlemeyi tetikler:

• app1 klasörünün içindeki tüm dosyalar
• api1 klasörünün içindeki tüm dosyalar
• Uygulamanın azure-static-web-apps-purple-pond.yml iş akışı dosyasında yapılan değişiklikler

Azure Pipelines

Tek bir depoda birden fazla uygulamayı desteklemek için ayrı bir iş akışı dosyası oluşturun ve bunu farklı Azure Pipelines ile ilişkilendirin.

Sonraki adımlar

Üretim öncesi ortamlarda çekme isteklerini gözden geçirme