Azure DevOpsからReact PythonアプリをAzure Static Web Appsにデプロイ

はじめに

Azure DevOps に React Web アプリのリポジトリを作成し、Azure Static Web Apps にデプロイしました。

GitHub → Azure Static Web Apps にデプロイの場合、Azure ポータルで、Static Web Apps 作成時、 GitHub アカウントでサインイン をクリック → GitHub サインイン画面が現れて、サインイン
にてできますが、Azure DevOps の場合、リポジトリを選択するところまでできるのですが、その後なぜかエラーになってできませんでした。（2022/09 現在）

エラー内容：Azure DevOps でこのユーザーの個人用アクセストークンを作成できませんでした。'Azure DevOps' ではなく、'Other' デプロイ ソースを使用してお客様のアプリをデプロイしてください。アプリが作成されたら、それを開き、指示に従ってトークンを取得し、アプリをデプロイします。

この記事は、全般的に 2022/09 現在の状況を元に説明しています。

タイミングが悪かっただけで普通にできるかもしれません。

Azure DevOps の Pipelines を使ってデプロイします。Pipelines は、無料アカウントの場合、エラーになり、https://aka.ms/azpipelines-parallelism-request より申請が必要です。

名前、e-mail、会社名（or 会社HPのURL）、Private/Public どちらで Pipelines を使う？ を回答するだけですが、有効になるまでに約２日かかった記憶があります。

エラー内容：No hosted parallelism has been purchased or granted. To request a free parallelism grant, please fill out the following from https://aka.ms/azpipelines-parallelism-request

【https://aka.ms/azpipelines-parallelism-request】

GitHub を使って何も問題無い場合、GitHub を使えば良いですが、Azure DevOps 縛りの場合、この記事のような手順で可能でしたので、紹介していきたいと思います。

実装

本記事で使用するソースコードサンプルは、GitHub にアップしました。
https://github.com/itc-lab/azure-devops-custom-auth-example

フロントエンド： React TypeScript
バックエンド API： Python (Azure Static Function用)

フロントエンドの実装については、
別記事「React TypeScript ESLint Prettier VSCode のプロジェクト作成」
で create-react-app を使って作成したプロジェクトをベースにしています。（記事の通り、ESLint、Prettier に対応しています。）
肉付けした実装は、
「7. Web アプリに簡単な認証を追加する」（https://learn.microsoft.com/ja-jp/azure/developer/javascript/how-to/with-web-app/static-web-app-with-swa-cli/add-authentication）
ほぼそのままです。今回、認証については関係無いので、画面が開くところまでやります。

Python の Azure Static Function 用 API 作成　については、別記事「【swa】Azure Static Web Apps をローカル環境でデバッグ」で説明しています。
これを /api/hello とし、{ "message": "メッセージ内容" } の JSON を返すようにしました。
今回、認証については関係無いので、デプロイに成功し、画面が表示されたらＯＫとします。

リポジトリ作成

https://dev.azure.com/ へアクセスします。
＋New Project をクリックします。

プロジェクト名＝ sample-project としますので、Project name に sample-project を入力して、Create をクリックします。

Repos をクリックします。

Generate Git Credentials をクリックして、Password を控えます。

Password は二度と表示されません。

また、リポジトリの URL もコピーして控えます。（こちらは、何度でも表示されます。）

以下のように、git コマンドを使って、ソースコードを push します。

ここでは、以下の条件とします。

リポジトリURL：https://nanashinogonbe@dev.azure.com/nanashinogonbe/sample-project/_git/sample-project

プロジェクト名：sample-project

ユーザー名(organization)：nanashinogonbe

パスワード：m26ku******************************************2arrq

ソースコードがリポジトリに登録されれば良いため、必ずしもこの方法である必要はありません。

$ git clone https://nanashinogonbe@dev.azure.com/nanashinogonbe/sample-project/_git/sample-project
Cloning into 'sample-project'...
Password for 'https://nanashinogonbe@dev.azure.com':m26ku******************************************2arrq
warning: You appear to have cloned an empty repository.
$ cd sample-project
$ unzip ../ソースコード.zip
$ git config --global user.email "nanashinogonbe@example.com"
$ git config --global user.name "Gonbe Nanashino"
$ git add .
$ git commit -m "first commit"
$ git push
Password for 'https://nanashinogonbe@dev.azure.com':m26ku******************************************2arrq
Enumerating objects: 46, done.
Counting objects: 100% (46/46), done.
Delta compression using up to 2 threads
Compressing objects: 100% (42/42), done.
Writing objects: 100% (46/46), 163.34 KiB | 6.05 MiB/s, done.
Total 46 (delta 1), reused 0 (delta 0)
remote: Analyzing objects... (46/46) (11 ms)
remote: Storing packfile... done (70 ms)
remote: Storing index... done (43 ms)
To https://dev.azure.com/nanashinogonbe/sample-project/_git/sample-project
 * [new branch]      master -> master

https://dev.azure.com/
↓
sample-project
↓
Repos - Files
を確認すると、
上がっているのを確認できます。

Azure Static Web Apps のアプリ作成

ここまで単純に DevOps のリポジトリにソースコードを push しただけで、Azure Static Web Apps はまだ関係有りません。

デプロイ先の Azure Static Web Apps のアプリを作成します。

Azure ポータル（https://portal.azure.com/）
↓
静的 Web アプリ
を選択します。

＋作成 をクリックします。

サブスクリプション：既存サブスクリプション（任意）
リソース グループ：既存リソース グループ（任意）
名前：sample-project（任意）
プランの種類：Free: 趣味または個人的なプロジェクト用
Azure Functions API とステージング環境のリージョン：Central US（任意）
デプロイの詳細 ソース：Azure DevOps
を入力します。

デプロイの詳細 ソース：Azure DevOps
により、ソースコードリポジトリ等の選択欄が出てきますので、
組織：nanashinogonbe
プロジェクト：sample-project
リポジトリ：sample-project
分岐：master
ビルドのプリセット：Custom
アプリの場所：/
API の場所：api
出力先：build
を入力します。
確認および作成 をクリックします。（タグは登録しないものとします。）

作成 をクリックします。

と、ここで、冒頭のエラーになります。

エラー内容：Azure DevOps でこのユーザーの個人用アクセストークンを作成できませんでした。'Azure DevOps' ではなく、'Other' デプロイ ソースを使用してお客様のアプリをデプロイしてください。アプリが作成されたら、それを開き、指示に従ってトークンを取得し、アプリをデプロイします。

ひとまず、< 前へ ボタンで戻って、エラー内容に素直に従って、Other を選択して、やり直します。
デプロイの詳細 ソース：その他
を選択して、確認および作成 をクリックします。

作成 をクリックします。

しばらくすると、"デプロイが完了しました" となりますので、リソースに移動 をクリックします。

ここまでで、URL にアクセスすると、何も無い Web アプリが作成されています。

ビルド＆デプロイ

デプロイ トークンの管理 をクリックします。

デプロイ トークンを控えます。（何回でも表示できます。）

DevOps に移動します。

https://dev.azure.com/
↓
sample-project
↓
Pipilines をクリックします。
↓
Create Pipelines をクリックします。

パイプラインとは、ざっくり言うと、"リポジトリのソースコードに対する処理" のようなものです。DevOps では、そのルール、処理内容を azure-pipelines.yml に記述します。今回は、Azure Static Web Apps にデプロイする内容になっています。内容についての詳細は、別セクション azure-pipelines.yml 説明 に記載しています。

azure-pipelines.yml がリポジトリに含まれていない場合、手順が異なります。

その手順については、次のセクションの azure-pipelines.yml が無い場合 に記載しています。

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

sample-project をクリックします。

Variables をクリックします。

New variable をクリックします。

Name：deployment_token
Value：813fb************************************************************-********-****-****-****-****************30275（デプロイ トークン）
を入力し、
Keep this value secret にチェックを入れて、OK をクリックします。
これにより、azure-pipelines.yml の $(deployment_token) が Value の値に置き換わり、先ほど作成した Azure Static Web Apps のアプリと紐づけられます。

Save をクリックします。

Run をクリックします。

Jobs の Status が Queud → Running になって、ビルド＆デプロイ（CI/CD パイプライン）が始まります。

Success になったら、デプロイ完了です。

作成した Azure Static Web Apps のアプリの URL を確認します。

成功しました！
ヨシッ！

azure-pipelines.yml が無い場合

サンプルのソースコードには、
azure-pipelines.yml
が含まれていて、含まれていない場合、Create Pipelines のところの手順が異なります。

含まれていない場合の手順を書きます。

先に結論を言いますと、自前の azure-pipelines.yml が結局必要という話です。

Create Pipelines をクリックします。

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

sample-project をクリックします。

ここから異なります。azure-pipelines.yml が push されていない場合、YAML テンプレート選択になります。

ドンピシャのものが無いため、とりあえず、それっぽい Node.js Express Web App to Linux on Azure を選択します。

2022/09 現在の状況を元に説明しています。

Azure のサブスクリプションを選択します。

Azure サインイン画面がポップアップしてきますので、サインインします。

Web App name のところに選択肢が無く、これではないようでした。 空白のまま、Validate and configure を選択します。

全然違う YAML が出てきました！

全部消して、サンプルの azure-pipelines.yml のような内容に書き換えればＯＫです。
（その内容で azure-pipelines.yml が commit されます。）
後は同じ手順です。

azure-pipelines.yml 説明

今回使用する azure-pipelines.yml の意味は、以下になります。（中にコメントで記載しています。）

trigger:# トリガ（発動条件）を設定
  - master
  # masterブランチにpushされたときに発動

pool:# プール（ビルド環境）の設定
  vmImage: ubuntu-latest
  # Microsoft がホストするエージェント
  # エージェントとは、VM(Virtual Machine)のこと
  # ubuntu-latest、macOS-latest、windows-latest、ubuntu-[バージョン]...が設定可
  # マイクロソフトの説明↓
  # > Windows および Linux イメージを実行する Microsoft がホストするエージェントは、2 コア CPU、7 GB の RAM、
  # > および 14 GB の SSD ディスク領域を備えた Azure 汎用仮想マシンにプロビジョニングされます。

steps: #Pipelinesで実行する手順の設定
  - checkout: self
    # このazure-pipelines.ymlが配置されているリポジトリをチェックアウト
    submodules: true
    # git submodule（サブモジュール）を含めるかどうか（今回は意味無い）
  - task: AzureStaticWebApp@0# あらかじめ用意されている処理を実行
    # AzureStaticWebApp@0 は、Azure Static Web App タスク
    # Azure Static Web Appにデプロイするため、AzureStaticWebApp@0 は、固定
    # このタスクを使用して、Azure Static Web アプリをビルドしてデプロイ
    inputs:# タスクに対する引数（設定）
      app_location: "/" # アプリの場所
      # 作業ディレクトリに対するアプリケーション ソース コードのディレクトリの場所
      # ディレクトリを移動せずにnpm buildしたいため、ここで良い
      api_location: "api" # API の場所
      # 作業ディレクトリを基準としたAzure Functionsソース コードのディレクトリの場所
      # apiディレクトリ以下にPythonのapiソースコードがあるため、"api"
      output_location: "build" # Output location (出力場所)
      # ビルド後のコンパイル済みアプリケーション コードのディレクトリの場所
      # npm build(react-scripts build)で./buildに成果物ができるため、"build"
      azure_static_web_apps_api_token: $(deployment_token) # api トークンのAzure Static Web Apps
      # デプロイ用の API トークン。 環境変数として渡された場合は必須ではありません
      # $(deployment_token)は、DevOpsで設定する環境変数（後で説明）

もちろん、他にもいろいろ設定できますが、今回は最低限だけになります。

YAML の内容の詳しい説明は、以下にあります。
https://learn.microsoft.com/en-us/azure/devops/pipelines/yaml-schema
https://learn.microsoft.com/ja-jp/azure/devops/pipelines/tasks/utility/azure-static-web-app