SIOS Tech. Lab | エンジニアのタメになるOSS・クラウド・認証の技術トピックス 
こんにちは、サイオステクノロジーの佐藤 陽です。
今回は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上にリポジトリを作成していきます。
まず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/CDpr:branches:include:- maintrigger:branches:include:- mainjobs:- job: build_and_deploy_jobdisplayName: Build and Deploy Jobcondition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))pool:vmImage: ubuntu-latestvariables:- group: Azure-Static-Web-Apps-white-dune-0f11fde00-variable-groupsteps:- checkout: selfsubmodules: true- task: AzureStaticWebApp@0inputs: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/swaworkflowconfigapp_location: "/" # App source code pathapi_location: "" # Api source code path - optionaloutput_location: "" # Built app content directory - optional###### End of Repository/Build Configurations ######
ここで、Azure StaticWebApp@0のタスクにパラメータを1つ追加します。
- task: AzureStaticWebApp@0inputs: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が構築できたので、開発がより捗りそうです！
みなさんも是非試してみてください！
Be the first to comment