Azure Static Web AppsがGAしたのでAzure DevOpsと連携してみた

こんばんわ。seiです。

Azure Static Web Apps、しばらくプレビューでしたが、2021/5/12（米国時間）にめでたくGAされました！！うれしい。今回はそんなAzure Static Web Appsを利用して、簡単なHTMLファイルをデプロイしていきたいと思います。

Azure Static Web Appsとは？
Azure DevOpsからAzure Static Web Appsへデプロイする
1. Azure Static Web Appリソースの作成
2. Azure DevOpsからStatic Web Appsへのパイプライン設定
Static Web Appsにカスタムドメインを設定する
さいごに

Azure Static Web Appsとは？

Azure Static Web Appsとはなんぞや？

静的コンテンツホスティングに対応したマネージドグローバル可用性と、統合されたサーバーレス API に対応した動的スケーリングにより、アプリケーション開発を加速しましょう。お客様に合わせてカスタマイズされたローカル開発エクスペリエンス、お客様のアプリを構築してデプロイするための CI/CD ワークフロー、クラウドでの統合ホスティングと管理により、生産性を高めることができます。
https://azure.microsoft.com/ja-jp/services/app-service/static/

うん、ちょっと何言ってるかわかんないですけど、要はHTML＋JavaScriptとか、Vue.jsとかReactとかのフレームワークで作ったSPA（シングルページアプリケーション）と言われるアプリをホストするのに適している感じですかね。.NET Coreとかのランタイムを必要とするならば従来のAzure Web App（App Service）でホストする必要がありますが。

ということで、今までAzure BLOBで静的WEBサイトをホストしていた方の移行先という感じでしょうか。

Azure Static Web Apps – App Service | Microsoft Azure

ソースコードからグローバルな高可用性まで、合理化されたフルスタック開発を提供する最新の Web アプリサービス。

また、このStatic Web Apps（略してSWA）、プレビューの段階からいろいろ弄り倒したかったのですが、いかんせんデプロイにGitHub経由でのデプロイしか用意してくれていなかったのです。プレビュー当初からAzure DevOpsのPipelines経由でのデプロイが数多の人々から熱望されていました。Azure DevOpsネイティブなオレもその一人。

が、GAになって、な、な、なんと、ちゃんとAzure DevOpsからのデプロイにも対応してくれていました。感謝感激雨あられ♪

そんなわけで、今回はAzure Static Web AppsをAzure DevOpsのパイプライン経由でデプロイしていきたいと思います。

Azure DevOpsからAzure Static Web Appsへデプロイする

それでは早速SWAにWEBサイトをデプロイしていきますが、前提条件として

Azure DevOpsにプロジェクトが作成済み。
Azure DevOpsプロジェクトにリポジトリが存在し、デプロイ対象ファイルが存在する。

といった感じの状態からスタートしていきます。

ちなみに今回行うことは公式チュートリアルと同様です。

クイックスタート: 静的 Web アプリを初めてビルドする

Azure portal を使用して、静的サイトを Azure Static Web Apps にデプロイする方法について説明します。

ということで、Azure DevOpsプロジェクトサイトのリポジトリに単純なindex.htmlを用意してこのファイルをデプロイしていきます。　

Azure Static Web Appリソースの作成

まずはAzureポータルからSWAリソースの作成を行います。

リソースの作成から、「Static Web App」を選択します。~~（プレビューってあるが・・・）~~※現在は完全に一般提供になっているっぽい。「プレビュー」の文字は消えてきます。

次に、各種設定を入力、選択します。無料でWEBサイトのホストをしたいので「ホスティングプラン」で「Free」を選択します。また、Azure DevOpsからのデプロイを行う場合は、「デプロイの詳細」で「その他」を選択する必要があります。「確認および作成」をクリックします。

~~おそらく現時点でStandardプランはGitHub経由でのデプロイ時しか選択できない気がします。その辺の記述みつけられないんですがね。~~

現在はAzure DevOpsからのデプロイでもStandardプランの選択が可能となっていました。

選択内容を確認し、「作成」をクリックします。

SWAリソースが作成されました。ひとまずこの状態でAzure側は待機です。

Azure DevOpsからStatic Web Appsへのパイプライン設定

こんどはAzure DevOps側のリポジトリ内容をAzure上にデプロイするパイプラインを設定していきます。

対象のプロジェクトから［Pipelines］の「Pipelines」を選択し、「Create Pipelines」をクリックします。

「Azure Repos Git」を選択します。

対象のリポジトリを選択します。今回は「SWADemo」っていうリポジトリ名にしています。よしなに。

YAMLファイルのテンプレを指定します。「Starter pipeline」を選びます。まあ、どうせ全部書き換えるのでなんでもいいんですがね。

ということでazure-pipelines.ymlのテンプレが生成されるので、以下の内容に書き換えます。

# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      api_location: ''
      output_location: ''
    env:
      azure_static_web_apps_api_token: $(deployment_token)

# Starter pipeline

# Start with a minimal pipeline that you can customize to build and deploy your code.

# Add steps that build, run tests, deploy, and more:

# https://aka.ms/yaml

trigger:

- main

pool:

vmImage: ubuntu-latest

steps:

- checkout: self

submodules: true

- task: AzureStaticWebApp@0

inputs:

app_location: '/'

api_location: ''

output_location: ''

env:

azure_static_web_apps_api_token: $(deployment_token)

ここで先ほどから待機中のAzureポータルのSWAリソースの画面を開き、「デプロイトークンの管理」を選択します。

デプロイトークン（デプロイ用のシークレットキー？）が表示されるのでコピーしましょう。このあと利用します。

そしたらまたAzure DevOpsサイトのazure-pipelines.ymlのページに戻り、「Variables」をクリックします。

「New variable」をクリックします。

Nameに「deployment_token」、valueに先ほどAzureポータルのSWAリソースのところでコピーした「デプロイメントトークン」を貼り付けて、「Keep this value secret」にチェックを付けます。「deployment_token」という名前は前述azure-pipelines.ymlの最後尾の$(deployment_token)変数名と一致していればいいのでご自由に設定ください。入力したら「OK」押します。

「Save」をクリックします。

azure-pipelines.ymlの編集ページに戻るので、「Save and run」をクリックします。

以下の画面でも「Save and run」をクリックします。

パイプラインが走り出します。Successになるまでアイスでも食べて待ちましょう。

パイプライン実行が正常に終了したら、Azureポータルに遷移します。WEBサイトへのURLが表示されていると思いますのでコピーします。

コピーしたURLをブラウザのアドレスバーに貼り付けアクセスしてみます。

ちゃんとindex.htmlの内容が表示されればSWAのデプロイ成功です！！やったぁ♪

Static Web Appsにカスタムドメインを設定する

SWA、なんの苦労もなくデプロイできましたね。それだけでは芸がないので、独自ドメインの設定を行ってみたいと思います。Freeプランでも独自ドメインの設定が可能です。

エックスサーバーで運用しているドメインのサブドメインをカスタムドメインとしてAzure Static Web Appsに設定してみます。つまり、「https://XXXXX.独自ドメイン名」でWEBサイトにアクセスする形になります。自動生成されたWEBサイトURLは「xxxxxxxxxxxxxx.azurestaticapps.net」となかなかに長いもので実運用するには現実的ではないですしね。（リソース名とかが設定されるわけでも無いのでカスタムドメインを当てること前提かな・・・）

まずはAzureポータルからSWAリソースにアクセスし、該当WEBサイトのURLをコピーしておきましょう。

続いてエックスサーバーのサーバーパネルにログインし、「DNSレコード設定」を選択します。

次に、カスタムドメインに設定する独自ドメインを選択します。

「DNSレコード追加」を選択します。

ホスト名にカスタムドメインとしてアクセスするURL、種別に「CNAME」を設定し、内容に最初にコピーしておいたSWAリソースのURL（XXXXX.azurestaticapps.net）を入力します。「確認画面に進む」をクリックします。

内容を確認し、「追加する」をクリックしましょう。

「XXXXドメインにて、DNSレコードの追加が完了しました。」になればエックスサーバー側での作業は終わりです。AzureポータルからSWAリソースのページに行きましょう。

SWAリソースのページに戻ったらリソースメニューの［設定］から「カスタムドメイン」を選択します。

「カスタムドメインの追加」ブレードが表示されるので、ドメイン名欄にエックスサーバー側で追加した「XXXXX.独自ドメイン名」を入力し、「次へ」をクリックします。

次の画面で、ホスト名レコードタイプに「CNAME」を選択後、「追加」をクリックします。エックスサーバー側とドメイン所有権の検証が行われるので若干時間がかかると思います。3～5分くらいかかったかな・・・。

「準備完了」にステータスが変更されればOKです。

それでは設定した独自ドメインでアクセスしてみましょう。ばっちりWEBサイトが表示されました！！

さいごに

個人的にStatic Web Apps、とっても魅力的なリソースな気がします。

カスタムドメイン無料で、常時SSLも無料。もうちょっとしたWEBサイトならこれでいいんでないかなって感じです。

今回触れてませんが、実はAzure Functionsとの連携も強力なんです。SWAにAzure Functionsも含めることが出来るのですが、今回は触れていません。apiフォルダーに関数アプリぶっこむだけなのでなんも難しいところはないはずですが。

それよりも本命はBYOF（Bring your own functions）、つまり「既存のAzure FunctionsをSWAにリンクさせる」がとっても欲しい機能なんですが、どうもAzure DevOpsをデプロイソースとしてる場合だとサポートされてないっぽいです。「Link to a Function App（関数アプリへのリンク）」なんて出て来ませんから・・・。これ、何とかしてリリースしてほしいなぁ。

↑GA当初はAzure DevOpsのデプロイオプションだとFreeプランしか選択できませんでしたが、現在はAzure DevOpsのデプロイプランでもStandardプランが選択でき、StandardプランではBYOFに対応して、別途作成したAzure Functionsとのリンクが可能となっていました。プランの比較のとこに書いてありましたねｗ

（2021/08/10追記）関数アプリのリンクに関しては別記事で書いてみました。