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

SHARE

こんにちは、サイオステクノロジーの佐藤 陽です。
今回はAzure Static Web Appsを使って複数の実行環境を構築する方法をご紹介します。

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

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

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

目次

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が構築できたので、開発がより捗りそうです！
みなさんも是非試してみてください！
ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

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

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

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

Helm入門 バージョン管理機能

次の記事

RHEL9 での SELINUX の無効化方法について