Visual Studio Code から Azure Stack Hub に Web App をデプロイする

## はじめに

Azure Stack Hub の Web App にアプリをデプロイする方法。Visual Studio Code 編。
今回は ASP.NET Core アプリをデプロイします。

## 環境

- Azure Stack Hub Integrated System 1907
- App Service 84.0.2.10 (Update 7)
- Visual Studio Code + Extensions
- .NET Core 2.2.4
    - Update 7 で対応しているのは 2.2.4 まで


## 準備

### Visual Studio Code 拡張機能のインストール

Visutal Studio Code （以下vscode） に [Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) 拡張機能をインストールします。

Azure Stack Hub への接続には Azure Account 拡張機能が、App Service へのデプロイには Azure App Service 拡張機能が必要ですが、Azure Tools 拡張機能のインストールでこれらも併せてインストールされます。
![2020-02-04_20h56_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/d484595d-b638-89a2-5f15-0ca0f745b1c5.png)


### Azure Stack Hub への接続

[Visual Studio Code 内で Azure Account 拡張機能を使用して Azure Stack Hub に接続する - Docs](https://docs.microsoft.com/ja-jp/azure-stack/user/azure-stack-dev-start-vscode-azure?view=azs-1910) を参考に、Azure Stack Hub に接続します。

Ctrl + Shift + P キーを押し、 [Preferences:Open User Settings] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/f3e1d20b-6283-6a63-1140-6aaf62667a25.png)

usersettings.json を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/d35a90c6-8bac-f1f2-da90-112a94f69f3e.png)

利用する環境に合わせて以下のJSON変更し、貼り付けます。

```json:settings.json
"azure.tenant": "tenant-ID",
"azure.ppe": {
    "activeDirectoryEndpointUrl": "Login endpoint",
    "activeDirectoryResourceId": "This is the URL from the audiences property.",
    "resourceManagerEndpointUrl": "Aure Resource Management Endpoint",
},
"azure.cloud": "AzurePPE"
```

`tenant-ID` は、PowerShell for Azure Stack Hub の `Get-AzureRmTenant` コマンド等から取得できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/0c159b92-a6d2-cd72-9eeb-c620b6704f0b.png)
PowerShell for Azure Stack Hub のインストールについては、[公式ドキュメント](https://docs.microsoft.com/ja-jp/azure-stack/operator/azure-stack-powershell-install?view=azs-1910) を参照してください。


`activeDirectoryEndpointUrl`, `activeDirectoryResourceId` は ARM エンドポイントの metadata から取得します。

`https://management.<YOUR_DOMAIN>/metadata/endpoints?api-version=1.0`

`activeDirectoryEndpointUrl` には `loginEntpoint`、`activeDirectoryResourceId` には `audiences` の値を指定してください。

```bash
$ curl https://management.<YOUR_DOMAIN>/metadata/endpoints?api-version=1.0
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   328  100   328    0     0   2075      0 --:--:-- --:--:-- --:--:--  2089{"galleryEndpoint":"https://providers.azs.local:30016/","graphEndpoint":"https://graph.windows.net/","portalEndpoint":"https://portal.<YOUR_DOMAIN>/","authentication":{"loginEndpoint":"https://login.microsoftonline.com/","audiences":["https://management.<YOUR_TENANT_AAD>/<YOUR_RESOURCE_ID>"]}}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/3310151d-22b8-6e8d-3923-c47464fdd66a.png)

`resourceManagerEndpointUrl` は ARM の URL ですね。


最終的に `settings.json` はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/3a304e5b-6252-0bbb-2373-12dfac8ca6dd.png)


### Azure Stack Hub へのログイン

Ctrl + Shift + P キーを押し、 [Azure: Sign in to Azure Cloud] を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/6360913a-6079-6ae4-c291-68bf4c04071a.png)

[Azure PPE] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/74034f3b-95b9-7484-7be7-c1ce2323bc3b.png)

ブラウザで認証ページが開くので、Azure Stack Hub のアカウントでサインインします。

[Azure: Select subscriptions] で有効なサブスクリプションが参照できれば、Azure Stack Hub への接続は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/288e0808-31e2-c291-0420-b57806b05134.png)


### ASP.NET Core アプリの作成

ASP.NET Core アプリを作成します。
.NET Core のランタイムには、Update7 がサポートしている ASP.NET 2.2.4 に対応する 2.2.203 を使用します。お使いの App Service 環境が対応する .NET Core ランタイムについては [リリースノート](https://docs.microsoft.com/ja-jp/azure-stack/operator/azure-stack-app-service-release-notes-update-eight?view=azs-1910) を参照してください。

SDK バージョンを指定するため、Web アプリのワークスペースで global.json を作成します。

```bash
mkdir coreapp224
cd coreapp224
touch global.json
```

global.json には以下を貼り付けます。

```json:global.json
{
  "sdk": {
    "version": "2.2.203"
  }
}
```

ランタイムバージョンと SDK バージョンの関係は [こちら](https://dotnet.microsoft.com/download/dotnet-core/2.2) を参照してください。
現在インストールされている SDK バージョンは以下のように取得できます。

```bash
> dotnet --list-sdks
2.2.203 [C:\Program Files\dotnet\sdk]
2.2.207 [C:\Program Files\dotnet\sdk]
3.1.101 [C:\Program Files\dotnet\sdk]
```

ASP.NET Core アプリを作成します。

```bash
dotnet new mvc
```

ローカル実行するとこんな感じ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/933927de-3e65-2b10-ef4a-7aa58bc76cd8.png" width="640" />



## デプロイ

ここからが本題。

vscode で Ctrl + Shift + P キーを押し、 [Azure App Service: Deploy to Web App] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/80ac04a4-c170-fcfa-8081-db307a1200c8.png)

デプロイするアプリのフォルダを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/32c4ec8d-c41e-6302-8b8a-03adf278b81c.png)


次のダイヤログが表示されたら「Add Config」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/275bba75-cd21-6128-301e-d89ea0387003.png)

作成済みの Web App を選択します。
※Azure Stack Hub の API バージョンが古い為、ここでの App Service の新規作成は失敗します（拡張機能のバージョンを下げれば可能かも知れない）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/d37c2b1a-c4e9-3533-483c-f5b20f7543b8.png)


「Deploy」をクリックしてデプロイを開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/a9dfc6f6-f835-bf9f-3c12-d9cb843b493b.png)

デプロイしています。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/dc82c073-522b-787a-5304-dfa75c72fccd.png)

この通知が来ればデプロイ完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/54c65e22-2efb-af17-83f4-fa0d4591711b.png)

App Service 上で動いている事が確認できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64309/006669c1-173b-7ff7-d59a-7fa698854161.png" width="640" />

## おわりに

vscode の Azure 拡張機能を使って Azure Stack Hub の Web App にデプロイ出来ました。事前準備はちょっと面倒ですが、一度設定してしまえば Azure の場合と全く同じ手順でデプロイ出来ます。


## 参考

- [Visual Studio Code で ASP.NET Core アプリを Azure に公開する - Docs](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/publish-to-azure-webapp-using-vscode?view=aspnetcore-3.1)
- [Visual Studio Code 内で Azure Account 拡張機能を使用して Azure Stack Hub に接続する - Docs](https://docs.microsoft.com/ja-jp/azure-stack/user/azure-stack-dev-start-vscode-azure?view=azs-1910)