Azure Static Web Appsを試してみた２【Azure DevOpsと連携】

# はじめに
以前の記事「[Azure Static Web Appsを試してみた](https://qiita.com/akihiro-nakano/items/7b8a8399be7dea307842)」でAzure Static Web Appsで、GitHubを利用した自動Build/Deployについて書いてみました。
せっかくなので、今回はリポジトリー自体もAzure(Azure DevOps)で実施してみようと思います。

## DevOpsリポジトリーの作成
作業の簡略化のために以前の記事で作成したGitHubのリポジトリから複製（Import)しようと思います。

1. Azure DevOpsにログインし、レポジトリで「Import repository」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/94312106-d482-282d-dfb6-fe7a2f8deee6.png)

1. 前回の記事で作成したGitHubのURLを指定し、Importを実施します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/60d57463-89a1-5dc1-6efb-60cfe3b0a6c0.png)

※ 認証が必要なリポジトリの場合は、「Requires Authentication」のチェックボックスをONにして、ユーザーIDとパスワードを入力してからImportを実施してください。

## リソース(Static Web Apps)の作成
前回と同様に作成するのですが、「デプロイの詳細」で「その他」を選択し、GitHub以外のリポジトリーでの作業を前提とし、リソースを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/cf73d73a-7c39-ea6d-47ea-15c33f2c93d0.png)

この状態で作成されたStatic Web Appsにアクセスすると、以下のような画面が表示されます。
リポジトリー関連が未設定という警告ですね。
そのため、Azure DevOpsのリポジトリとパイプラインを連携してみようと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/5e2c6c15-2dd3-f14a-2951-23551cf28d9a.png)

## Azure DevOps でのパイプラインを作成
### デプロイトークンの取得
パイプラインで必要となるデプロイトークンをポータルから取得します。

1. Static Web Appsの概要で「デプロイトークンの管理」を選択する
1. デプロイトークンの管理ビューで「デプロイトークン」をコピーしてローカルに保存しておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/9b9c3dad-4657-76c0-d93d-92517ae6a85c.png)

### パイプラインの作成
作成したAzre DevOpsのリポジトリー(GitHubがインポートしたリポジトリ)でパイプラインを作成していきます。

1. 「Set up build」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/a977e058-3563-28e0-ada1-31109b255b2e.png)

1. Configure your pipelineで「Node.js with Angular」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/ad881734-a2c9-6439-ac52-0d7c9fb6b31e.png)

1. Build後のStatic Web AppsへのDeployルールを追記します(24 ～ 30行目)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/3654c463-ddfa-f3d6-d9d6-4aab187c8733.png)   
 
    ```YAML
# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
　
trigger:
- main
　
pool:
  vmImage: ubuntu-latest
　
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'
  displayName: 'Install Node.js'
　
- script: |
    npm install -g @angular/cli@9.1.15
    npm install
    ng build --prod
  displayName: 'npm install and build'
　
- task: AzureStaticWebApp@0
  inputs:
      app_location: "/" 
      api_location: ""
      output_location: "dist/appName"
  env:
      azure_static_web_apps_api_token: $(deployment_token)
```

1. Static Web Appsへのデプロイ用のトークンを環境変数として登録
    1. Variablesをクリック
    1. New variableをクリック
    1. Nameに「deployment_token」を入力
    1. Valueに取得した「デプロイトークン」を入力
    1. Keep this value secretのチェックボックスをOnへ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/f3cb2142-3160-9d6e-2312-de7ff96a0ca2.png)

1. 「Save and run」をクリックし、実行

正常に終了していることが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/d83413c0-d92b-ae3a-0299-80eadb8322cc.png)

## 動作確認
無事、Angularのページが表示されるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226944/03ae54ba-ee7b-a3c3-5a50-c53cbbf786ec.png)


## まとめ
今回で、Azure Static Web AppsとAzure DevOpsを連携させ、Angularアプリケーションを自動でBuild/Deployすることが出来ました。[次回はAzure Functionsを利用](https://qiita.com/akihiro-nakano/items/d84efbf67b7df8a42274)し、APIとの連携を実施しようと思います。