Azure Static Web Apps×Azure DevOpsでお手軽にプレビュー環境を構築する

こんにちは、サイオステクノロジーの佐藤陽です。

今回はAzure Static Web Appsを使って複数の実行環境を構築する方法をご紹介します。

Azure Static Web Appsはホスティングサービスであり、特徴の一つとしてCI/CDワークフローが統合されていることが挙げられます。

アプリケーション開発において、本番環境や開発環境、ステージング環境など複数の環境を用意し、それぞれに対してデプロイするためのCI/CDの構築を行うことが多くあります。

今回ご紹介するAzure Static Web Appsは、複数の環境構築や、CI/CDワークフローとの親和性が高いものとなっています。

1 Azure Static Web Appsのデプロイ
- 1.1 プロジェクトの用意
- 1.2 Azure Static Web Apps作成
2 プレビュー環境の構築
3 おまけ
4 まとめ

Azure Static Web Appsのデプロイ

プロジェクトの用意

早速、Static Web Appsのリソースを用意していきましょう！

ただ、その前にデプロイするためのプロジェクトを用意する必要があります。
サンプルプロジェクトが提供されているので、それを用いてAzure DevOps上にリポジトリを作成していきます。

まずAzure DevOpsのReposから、新規にGitリポジトリを作成します。

※この際、Add a READMEのチェックを外しておいてください。

リポジトリの作成が完了したら、プロジェクトをImportしていきます。

今回はVue.jsを採用したいと思うので以下のURLからImportします。

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

これでリポジトリの準備が完了しました。

Azure Static Web Apps作成

リポジトリの準備が整ったので、Azure PortalからStatic Web Appsリソースの作成を行います。

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

またデプロイ先についてはAzure DevOpsを選択し、先ほど作成したリポジトリを選択します。

ブランチに関してはmainブランチを選択して下さい。

Createボタンを押せばStatic Web Appsのデプロイが完了します。

リソースのデプロイが完了すると、Azure DevOpsのPipelinesにはすでに自動デプロイの処理が構築され、初回のデプロイが走ります。

Azure PortalにおいてStatic Web AppsリソースのEnvironmentsブレードを選択すると、Production環境が構築されている事が分かります。

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

Production環境のBrowseボタンを押すと、デプロイされたアプリケーションの内容を確認できます。

Hello Worldの文字が表示されています。

プレビュー環境の構築

では、本番環境へのデプロイが完了したところで、次はプレビュー環境を構築していきます。

Azure DevOpsのPipelinesから自動デプロイのyamlファイルを開きます。

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

ここで、Azure StaticWebApp@0のタスクにパラメータを1つ追加します。

- task: AzureStaticWebApp@0 
  inputs: 
    azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_WHITE_DUNE_0F11FDE00) 
    production_branch : main #<-added

ちなみにdeployment_environmentといったパラメータも存在していますが、こちらは定義しないようにします。

production_branchの値が設定されており、かつdeployment_environmentが存在しない場合、指定されたブランチ以外からのデプロイはプレビュー環境としてデプロイされるようになります。

実際にやってみましょう！

まずはリポジトリに対して、新規にpreviewというブランチを作成します。

次に、triggerにpreviewブランチを追加します

trigger: 
  branches: 
    include: 
      - main 
      - preview #<-added

previewブランチにおいて適当な修正を加えてみます。

今回は表示されるメッセージに追加を加えてpushします。

Pipelineの処理が完了後、Azure Static Web Appsのリソースを確認してみましょう。

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

試しにBrowseボタンを押すしてページを表示すると、修正が反映されていることが分かります。

また、Production環境のBrowseボタンを押すと、previewに行った修正は反映されておらず、本番環境へ影響が無いことも確認できます。

おまけ

今回はブランチごとに環境を構築しましたが、実はPullRequest単位でもプレビュー環境を構築することが可能です。

ただ、Azure DevOpsはPullReqest単位でのプレビュー環境構築をサポートしていません。(GitHub Actionのみ対応)

Pull Request単位で環境が構築できるとレビューも捗りそうですし、Azure DevOpsへの対応も期待したいですね。

まとめ

今回はAzure Static Web AppsとAzure DevOpsを使ってプレビュー環境を構築しました。

非常に簡単にプレビュー環境＆CI/CDが構築できたので、開発がより捗りそうです！

みなさんも是非試してみてください！

About 佐藤陽

ロードバイクやトレランなど、体を動かすことが好きなサーバーサイドエンジニア。組み込み系からWeb系にジョブチェンジし、現在はAzureを使ったWebアプリの開発や、DevOpsの構築を行っています。

ご覧いただきありがとうございます！この投稿はお役に立ちましたか？

役に立った役に立たなかった

1人がこの投稿は役に立ったと言っています。

Azure Static Web Apps×Azure DevOpsでお手軽にプレビュー環境を構築する

Azure Static Web Appsのデプロイ

プロジェクトの用意

Azure Static Web Apps作成

プレビュー環境の構築

おまけ

まとめ

Be the first to comment

Leave a Reply コメントをキャンセル

Azure Static Web Appsのデプロイ

プロジェクトの用意

Azure Static Web Apps作成

プレビュー環境の構築

おまけ

まとめ

Related Articles

Be the first to comment

Leave a Reply コメントをキャンセル