こんばんは。beaglesoftの真鍋です。
弊社ではAzure AppServiceを使用したアプリケーションを構築しています。そのアプリケーションではTypeScriptを利用していることもあり、npmでTypeScriptの型定義などを管理しています。
これまではとくにnpmを利用することはなかったのですが、画面が複雑になりこれまでのように、補助的にJavaScriptを利用するだけではうまく行かなくなってきたのでTypeScriptを導入しました。
その結果、Azure AppServiceへのデプロイ後にどうやってNPMのパッケージをインストールすればいいのかちょっと困ったので手順をまとめておきたいと思います。
npm installを実行する
初めてのことでとりあえずKuduのCMDからnpm installを実行したりしたのですが、うまく行きませんでした。
D:\home\site\wwwroot\wwwroot>npm install npm WARN wwwroot@1.0.0 No description npm WARN wwwroot@1.0.0 No repository field.
さて、どうしたものかと色々と調べるとこちらの記事が見つかりました。
今回はぼっちプロジェクトなので恥ずかしながらCIは構築していません。とりあえず手動でのデプロイ後にパッケージがインストールできればいいレベルです。
内容を読むと、以下の通りKudu Rest API をPowerShellから実行すれば良いとのことでした。
You can run commands like npm install via the Kudu REST API.
Here's a scripted example written in PowerShell.
Add a PowerShell script task after the Azure App Service Deploy task to invoke npm install (or any other command that Kudu supports). And disable the npm install task in your build pipeline.
丁寧にPowerShellのスクリプトも用意していただいているとのことですので早速利用させていただくことにしました。あらかじめexamples/InvokeKuduNpmInstall.ps1 at master · DanielLarsenNZ/examplesをpath\to\script\dirへダウンロードしておいてください。
> cd path\to\script\dir
> .\InvokeKuduNpmINstall.ps1
次のパラメーターに値を指定してください:
Username: your_user_name
Password: your_password
AppServiceName: your_app_service_name
Invoking 'npm install --production' on your_app_service_name ...
Output Error ExitCode
------ ----- --------
0
your_user_nameとyour_passwordには発行プロファイルをダウンロードしてpublishProfileにあるuserNameとuserPWDを設定します。発行プロファイルはAzure AppServiceの概要から取得できます。
これで無事にnpmによりパッケージをインストールすることができました。
D:\home\site\wwwroot\wwwroot>ls -al total 84 drwxr-xr-x 1 Unknown+User Unknown+Group 0 Mar 6 09:59 . drwxr-xr-x 1 Unknown+User Unknown+Group 0 Mar 6 10:15 .. drwxr-xr-x 1 Unknown+User Unknown+Group 0 Feb 18 13:22 Images -rw-r--r-- 1 Unknown+User Unknown+Group 12138 Feb 25 01:12 _references.js drwxr-xr-x 1 Unknown+User Unknown+Group 0 Dec 20 07:01 api drwxr-xr-x 1 Unknown+User Unknown+Group 0 Feb 10 00:23 css -rw-r--r-- 1 Unknown+User Unknown+Group 32038 Dec 20 08:11 favicon.ico drwxr-xr-x 1 Unknown+User Unknown+Group 0 Mar 6 07:12 js drwxr-xr-x 1 Unknown+User Unknown+Group 0 Mar 6 07:12 lib drwxr-xr-x 1 Unknown+User Unknown+Group 0 Jan 27 07:10 lib_bower drwxr-xr-x 1 Unknown+User Unknown+Group 0 Dec 20 07:01 locales drwxr-xr-x 1 Unknown+User Unknown+Group 0 Mar 6 10:22 node_modules -rw-r--r-- 1 Unknown+User Unknown+Group 2386 Feb 26 22:24 package-lock.json -rw-r--r-- 1 Unknown+User Unknown+Group 541 Feb 26 22:24 package.json drwxr-xr-x 1 Unknown+User Unknown+Group 0 Dec 20 07:01 pdf drwxr-xr-x 1 Unknown+User Unknown+Group 0 Mar 6 07:13 ts
ちょっと感じたこと
AWSでECSとかのときはCIでシェル書いて実行するとかを普通に行ってきたのですが、今回はAzureを利用したこともありちょっと勝手がわかっていません。VisualStudioが便利で、一人で開発するにはCIがなくてもデプロイで来てしまったりすることもあり、PowerShellなどいまいち触っていませんでした。
そろそろアプリケーションの開発も先が見えてきたので環境面の把握をしていかないとと感じました。
