GitHubからAzureのApp service(Kuduでビルドして)デプロイ 

# 概要
GitHubにあるangularのソースコードからazureの App service にデプロイする。
デプロイ時のbuildは App Service のランタイムで node を選択すれば Kuduビルドーツール でnpmを実施できる。ただし、 Express から提供する必要があるため server.js などを設置し簡単なexpressサーバを構築する必要がある。
App Serviceは `F1 Free` の OSは Linux で一応すべて無料で行える。

バージョン
- node v12.13.0
- azure-cli 2.0.74
- angular-cli 8.3.14

# angularのアプリの作成

```bash
$ ng new myapp
$ cd myapp
$ ng test
$ ng serve
```
http://localhost:4200/ にアクセスして確認

最新の angular-cli で作ったプロジェクトや昔のプロジェクトでローカルの chromedriver のバージョンと protractor が指定している webdriver のバージョンが違い`ng e2e`が通らないとき内包しているバージョン指定をupdateすればなんとか `ng e2e` が通るようになったのでご共有 `77.0.3865.40` は自分が持っているchromedriver のバージョンにしてください。

```bash
$ ./node_modules/protractor/bin/webdriver-manager update --versions.chrome=77.0.3865.40
$ ./node_modules/protractor/node_modules/webdriver-manager/bin/webdriver-manager update --versions.chrome=77.0.3865.40
$ ng e2e --webdriver-update=false
```

# express を追加

```bash
$ npm install express --save
$ vi ./server.js
```
`server.js` は angular のビルド資産 `./dist/myapp/` を提供する

```js
var express = require('express');var express = require('express');
var port = process.env.PORT || 3000;
var app = express();

app.use(express.static(__dirname + '/dist/myapp/'));

app.listen(port, function () {
  console.log('Example app listening on port ' + port + '!');
});
```


注意事項
解放Portはどこでもいいんだけどserver.jsなどnodeの資産は置く場所と名前は限定される

[Azure App Service 向けの Linux Node.js アプリを構成する：Node.js サーバーを構成する]
(https://docs.microsoft.com/ja-jp/azure/app-service/containers/configure-language-nodejs#configure-nodejs-server)

> コンテナーは、一般的な Node.js ファイルの 1 つがプロジェクトで見つかった場合、PM2 でアプリを自動的に開始します。
bin/www
server.js
app.js
index.js
hostingstart.js
次のいずれかの PM2 ファイル: process.json および ecosystem.config.js
次の拡張子を持つカスタム スタート ファイルを構成することもできます。
.js ファイル
.json、 . config.js、 .yaml、または .yml の拡張子を持つ PM2 ファイル


package.jsonに下記のスプリクトを追加

```json
"scripts": {
    "serve": "node ./server.js"
}
```

expressでangularが動いているか確認

```bash
$ npm run build
$ npm run serve
```
`http://localhost:3000` にアクセスして確認する

# Githubへpush
あらかじめmyappというプロジェクトをGitHubで作っておいて下記でpushする
たしか `ng new` でgit管理されていたはず・・・
comittしていなかったらcommitをする。

```bash
$ git remote add origin git@github.com:hogeuser/myapp.git
$ git push -u origin master
```

# Azure リソースの作成

azureのログインしてリソース webapptest 作成

```bash
$ az login
$ az group list --out table
$ az account list-locations --output table
$ az group create --name webapptest --location "eastus2"
```

# Azure サービスプランの作成
サービスプラン linux-webapp-free-node を作成

```bash
$ az appservice plan create --resource-group webapptest --name linux-webapp-free-node --location eastus2 --is-linux --sku FREE
```


# app service の作成


## 作成
今回はコンテナ使わず アプリ名：myangularapps

```bash
$ az webapp list-runtimes --linux
$ az webapp create -g webapptest -p linux-webapp-free-node -n myangularapps --runtime "NODE|12-lts"
```

## スタートスプリクトの設定
`npm install` は自動で行うが `npm run build` 実行しないため設定する

```bash
$ az webapp config set -g webapptest --name myangularapps --startup-file "npm run build && npm run serve"
```

## Githubと紐付け
アクセスtokenを使って紐づける
アクセスtokenはgithubのprofileから `Settings->Developer settings->personal access tokens` で  `repo` の `Full control of private repositories ` にチェックをつけて作成してください。

```bash
$ gitrepo="https://github.com/hogeuser/myapp.git"
$ token="1234567812345678901234567890234567890"
$ az webapp deployment source config --name myangularapps -g webapptest --repo-url $gitrepo --branch master --git-token $token
```

以上、以下のコマンドで表示されたhostにhttpsでアクセスすれば表示されるはず。
性能が性能なので最初のアクセスに時間がかかる

```bash
$ az webapp show -g webapptest --name myangularapps --query "defaultHostName" -o tsv
```