
Azure Static Web Appsはホスティングサービスであり、特徴の一つとしてCI/CDワークフローが統合されていることが挙げられます。
アプリケーション開発において、本番環境や開発環境、ステージング環境など複数の環境を用意し、それぞれに対してデプロイするためのCI/CDの構築を行うことが多くあります。
今回ご紹介するAzure Static Web Appsは、複数の環境構築や、CI/CDワークフローとの親和性が高いものとなっています。
Azure Static Web Appsのデプロイ
プロジェクトの用意
早速、Static Web Appsのリソースを用意していきましょう!
サンプルプロジェクトが提供されているので、それを用いてAzure DevOps上にリポジトリを作成していきます。

https://github.com/staticwebdev/vue-basic.git


Azure Static Web Apps作成

料金プランは今回はFreeでOKです。

また、Preview環境はこの時まだ構築されていない事も確認できますね。

プレビュー環境の構築
name: Azure Static Web Apps CI/CD
pr:
branches:
include:
- main
trigger:
branches:
include:
- main
jobs:
- job: build_and_deploy_job
displayName: Build and Deploy Job
condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
pool:
vmImage: ubuntu-latest
variables:
- group: Azure-Static-Web-Apps-white-dune-0f11fde00-variable-group
steps:
- checkout: self
submodules: true
- task: AzureStaticWebApp@0
inputs:
azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_WHITE_DUNE_0F11FDE00)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######
- task: AzureStaticWebApp@0
inputs:
azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_WHITE_DUNE_0F11FDE00)
production_branch : main #<-added
trigger:
branches:
include:
- main
- preview #<-added

Preview Deploymentsの項目にpreview環境が追加されていることが確認できます。


おまけ
Be the first to comment