Azure AppServiceでnpm installを実行する

こんばんは。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.

さて、どうしたものかと色々と調べるとこちらの記事が見つかりました。

node.js - How to run npm command on azure app service after deployment success by VSTS? - Stack Overflow

今回はぼっちプロジェクトなので恥ずかしながら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/examplespath\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_nameyour_passwordには発行プロファイルをダウンロードしてpublishProfileにあるuserNameuserPWDを設定します。発行プロファイルはAzure AppServiceの概要から取得できます。

image.png (36.0 kB)

これで無事に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などいまいち触っていませんでした。

そろそろアプリケーションの開発も先が見えてきたので環境面の把握をしていかないとと感じました。

NETCore SDK プロジェクトでnugetパッケージを作成する

NETCore SDK プロジェクトでnugetパッケージを作成してみたのでその手順をまとめたいと思います。(VisualStudioなどは予めインストールされていることとします。)

nuspecファイルを作成する

nugetパッケージを作成するためnuget specコマンドを実行してnuspecファイルを作成します。

> cd /path/to/project
> nuget spec

nuspecファイルを編集する

作成したnuspecファイルの内容を編集します。が、VisualStudioを利用している場合には特に編集する必要はない気がします。

<?xml version="1.0"?>
<package >
  <metadata>
    <id>$id$</id>
    <version>$version$</version>
    <title>$title$</title>
    <authors>$author$</authors>
    <owners>$author$</owners>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>$description$</description>
    <releaseNotes>Summary of changes made in this release of the package.</releaseNotes>
    <copyright>Copyright 2017</copyright>
  </metadata>
</package>

nugetパッケージを作成する

NETCore SDK プロジェクトではnuget pack {プロジェクト名}を実行すると型 'System.String' のオブジェクトを型 'NuGet.Frameworks.NuGet.Frameworks1051960.NuGetFramework' にキャストできません。というエラーが発生しパッケージを作成することができません。

NuGet pack Unable to cast object of type 'System.String' to type 'NuGet.Frameworks.NuGetFramework' · Issue #4808 · NuGet/Home

上記のIssueに書いているとおりmsbuild /t:packで実行すればうまく作成できます。

$ msbuild /t:pack
.NET Framework 向け Microsoft (R) Build Engine バージョン 15.4.8.50001
Copyright (C) Microsoft Corporation.All rights reserved.

このソリューション内のプロジェクトを 1 度に 1 つずつビルドします。並行ビルドを有効にするには、"/m" スイッチを追加してください。
2017/12/09 13:24:13 にビルドを開始しました。

....

ビルドに成功しました。
    0 個の警告
    0 エラー

経過時間 00:00:01.37

おわりに

はじめてnugetパッケージを作成してみたのですが、とてもかんたんにできました。MS製品は製品内の完結度が高くて何かを始めるのが楽なのが素敵です。

C#実践開発手法 (マイクロソフト公式解説書)

C#実践開発手法 (マイクロソフト公式解説書)

Resharperで参照しているクラスのソースコードを表示する

ResharperではNugetなどで参照しているライブラリのソースコードをでコンパイルするなどして表示してくれます。その設定についてまとめたいと思います。

設定方法

Resharperの設定は メニューバーのResharper からOptionsを表示します。Tools - External Sourcesを選択し、Navigation to Sourcesを選択します。

image.png (195.6 kB)

利用不法

NuGetなどで参照しているクラスを右クリックし、Go To Implementationをクリックします。

image.png (112.0 kB)

これにより対象となるクラスのソースコードが表示されます。

image.png (150.4 kB)

以前と違ってNuGetを参照するライブラリについても内容を手軽に確認できると開発が捗るのでおすすめです。

ASP.NET MVCプログラミング入門 (マイクロソフト関連書)

ASP.NET MVCプログラミング入門 (マイクロソフト関連書)