概要
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のアプリの作成
$ 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 のバージョンにしてください。
$ ./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 を追加
$ npm install express --save
$ vi ./server.js
server.js は angular のビルド資産 ./dist/myapp/ を提供する
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に下記のスプリクトを追加
"scripts": {
"serve": "node ./server.js"
}
expressでangularが動いているか確認
$ npm run build
$ npm run serve
http://localhost:3000 にアクセスして確認する
Githubへpush
あらかじめmyappというプロジェクトをGitHubで作っておいて下記でpushする
たしか ng new でgit管理されていたはず・・・
comittしていなかったらcommitをする。
$ git remote add origin git@github.com:hogeuser/myapp.git
$ git push -u origin master
Azure リソースの作成
azureのログインしてリソース webapptest 作成
$ 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 を作成
$ az appservice plan create --resource-group webapptest --name linux-webapp-free-node --location eastus2 --is-linux --sku FREE
app service の作成
作成
今回はコンテナ使わず アプリ名：myangularapps
$ 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 実行しないため設定する
$ 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 にチェックをつけて作成してください。
$ 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でアクセスすれば表示されるはず。
性能が性能なので最初のアクセスに時間がかかる
$ az webapp show -g webapptest --name myangularapps --query "defaultHostName" -o tsv