⚙️

Azure Static Web Apps へ Swagger UI を認証付きで公開する

2023/09/22に公開

Azure

はじめに

前回の記事の続きを書いていきます。

今回はファイル統合した結果の swagger.yml を元に、Azure Static Web Apps へ認証付きで公開していきたいと思います。併せて Azure Repos へPush時に swagger.yml の内容が自動的に反映されるように CI/CD を設定します。

アーキテクチャ構成

ディレクトリ構成

docs/             # このディレクトリが「Azure Static Web Apps」デプロイ対象
 |_ swagger.yml
 |_ ・・・
src/              # 分割ファイル群
 |_ paths/
 |_ components/
swagger-watch/    # ファイル監視機能

実現したいアーキテクチャイメージは下記となります。

Azure Static Web Apps とは

Azure Static Web Apps とは 2021年5月に発表されたサーバレス開発に特化したWebサービスです。他のWebサービスに比べて、静的ファイル（Javascript や HTMLなど）のストレージに特化し、認証・認可やSSLが標準装備され、Azure Functionsも同環境にデプロイできます。

価格は、Free と Standard の2種類がありますが、認証・認可や IP制限を行わないのであれば、Freeプランでも充分です。今回は認証を利用するため Standard を選択します。

詳細については下記を参照ください。

他の競合サービスと比較しましたが、やはり AWS Amplify がトレンドのようですね。(※Google Trends)

Azure Static Web Apps のデプロイ

Swagger UIをホストする箱を作ります。Azure DevOps で CI/CD をするので、前提とするリポジトリは Azure Repos となります。こちらのGitリソースをそのまま Azure Repos のmaster branchへ入れてください。

Azure Static Web Apps は Azure Portal から作成していきます。

リソースの作成 > 静的Webアプリを選び作成をクリックします。

静的Webアプリの作成が開かれるので、下記を指定します。

プランの種類：Free だと認証機能を使えないので Standard を選択してください。※あとから Free に変えることもできます。
リージョン：2023年9月現在は Japan East や Japan West は選べず、East Asia を選択しています。
デプロイの詳細：その他 を選択しています。Azure DevOps や Git hub を選択することで、Reposを指定して先に進むことでPipelineを自動生成することもできますが、今回は自分でPipelineを構築していくため その他 とします。

確認および作成をクリックします。デプロイ自体は秒で終わります。

リソースへ移動します。URLにWebサイトのエンドポイントが表示されています。

デプロイトークンの管理をクリックしたときに、表示される デプロイトークン は後から設定するAzure DevOpsのpipelineを構築する時に必要なのでコピーしておきましょう。
※デプロイトークン はpipelineがAzure Static Web Apps を識別するために必要な情報です。

Azure DevOps pipeline の構築

CI/CDをするためのpipelineを構築していきます。
Azure DevOpsのPipelinesよりCreate Pipelineをクリックします。

Azure Repos Gitをクリックします。

Configure your pipeline で構成するyamlのテンプレートを選択します。あとから内容を変えることになるのでどれを選択しても問題ありません。今回は show more から HTML が選択できるのでそれにします。

Review your pipeline YAML は選択したテンプレートの初期値が表示されている状態ですので、

下記のように変更します。

azure-pipelines.yml

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - master
trigger:
  branches:
    include:
      - master

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
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: "%Azure Static Web Apps のデプロイでコピーしたデプロイトークン%"
###### 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: "/docs" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "/" # Built app content directory - optional
###### End of Repository/Build Configurations ######

入力が終わったら、Save and run をクリックします。

右側にアコーディオンパネルが開かれるので Save and run をクリックします。

構築したpipelineが動作し Azure Static Web Apps へデプロイが行われる様子がわかります。
JobsのStatusが正常終了していることを確認してください。

構築したpipelineはReposにコミットされています。

ここまでの手順で pipelineが構築できたため、今後は Reposのmaster branchへソースコードをPushすることで自動的に Azure Static Web Apps へ反映されます。

Azure Static Web Apps の動作確認と認証設定

エンドポイントへ接続し、Swagger UIが表示されるか確認していきます。

下記のように表示されればOKです。

次に認証を設定します。
構成の 全般設定タブ から、パスワード保護 を選択し、訪問者のパスワードを設定し、保存します。
これによりパスワードを知っている人はサイトへの接続ができることになります。
最低限の認証ですが、フルオープンの状態は防ぐことができます。

再びエンドポイントへ接続し、認証機能が正常に動作しているか確認します。

パスワードを入力し遷移できればOKです。

終わりに

Azure Static Web Apps はSwagger UIのような静的サイトを公開するのに適しており、手軽に構築や運用ができる印象を持ちました。
認証機能のデフォルト設定では、多段階認証などの複雑な設定はできませんが、静的サイトを社内開発チームへ公開することで、メンバは誰でも最新の情報をキャッチでき、設計・開発の生産性の向上が期待できます。

参考にしたサイト

GitHubで編集を提案