ほりひログ

所属組織の製品 (Azure とか) に関連する内容が多めだけど、個人の見解であって、所属組織を代表する公式情報ではないです。

App Service on Linux で Angular を動かした時にハマったこと(前編)

f:id:horihiro:20200224181808p:plain

はじめに

最近 Azure App Service on Linux 上の Angular 製 Web アプリケーションを触る機会があり、そこでいろいろハマったので、メモ的に残しておきます。

長くなった&まだ解決してない部分があるので、前後編に分けました。

前編の結論だけ知りたい方はこちらへ。

試してみる

最初に自分で Angular アプリケーションを作るところからやってみます。

サンプル アプリ

まずは公式ドキュメントを見て、サンプル アプリを作ってみます。

ドキュメントには、「ng コマンドをグローバル インストールせよ」と書いていますが、宗教上の理由から npx を使って作ります。

$ npx -p @angular/cli ng new sampleapp

ちなみに、npx を実行する際、パッケージ名とコマンドが違うときは、-p オプションでパッケージ名を指定します。

Enter 連打でオプションは既定のものを選ぶとプロジェクトが出来上がります。
npm install も裏で実行しているようです。

プロジェクトが出来上がったら、まずはローカルで実行してみます。

$ cd sampleapp
$ npm run ng serve

> sampleapp@0.0.0 ng /PATH/TO/sampleapp
> ng "serve"

  (snip)

: Compiled successfully

f:id:horihiro:20200224163438p:plain

はい、動きました。
アプリの完成です。

App Service on Linux にデプロイする

次に App Service on Linux 上で実行させてみます。

今回 Node12 LTS のイメージを使います。 f:id:horihiro:20200224164355p:plain

デプロイは Local Git -> "App Service のビルド サービス" で。 f:id:horihiro:20200224164551p:plain

f:id:horihiro:20200224164614p:plain

この状態で、App Service の Git サーバーに push してみると。。。

f:id:horihiro:20200224180316p:plain

ハイ、動きません。

App Service on Linux 向けに設定を変更する

Angular および App Service on Linux の既定の設定では、Angular アプリケーションまでリクエストが届きません。

これをまともに動かすには結構やることがあります。

1. 待ち受けアドレスを無制限にする

Angular の既定の設定では、localhost のみで待ち受けするようです。
一方で、App Service on Linux にデプロイすると、当然 localhost 以外からも着信するので、この制限は解除しないといけません。

例えば、ng serve コマンドでの起動時には、--host=0.0.0.0 オプションをつければ、この制限が無効になります。

2. 待ち受けポート番号を一致させる

作ったアプリをローカルで実行した段階で分かっている話なのですが、Angular の既定のポート番号は 4200 です。

一方で、App Service on Linux で動かす場合、既定では、アプリが 8080 で待ち受けていると想定してポート マッピングを行います (docker run 時に -p オプションに XXXXX:8080 を渡しています)。

このように、ポート番号が一致していないので、両方のポート番号を合わせる必要があります。

Angular では、ng serve コマンドでの起動時に --port=8080 オプションをつければ、待ち受けポートが変わります。

逆n App Service on Linux のポート マッピングを 4200 向けに変えたい場合は、Azure ポータルから、アプリケーション設定 PORT を作成して、値に Angular の待ち受けポート 4200 を指定します。

f:id:horihiro:20200224172356p:plain

これは、Angular か App Service on Linux、どちらかの設定変更をやればよいです。

3. ホスト名チェックを無効にする

App Service (LinuxWindows も) のアーキテクチャーの都合上、リクエストに含まれる Host ヘッダーの値と、Web アプリケーションが動作する仮想マシンのホスト名は一致しません。

一方、Angular は既定でホスト名のチェックをするので、これを無効にします。

起動オプションでいうと --disableHostCheck=false ですね。

結論

ここまで頑張って、サンプルの Angular アプリケーションが App Service on Linux で動作しました。

まとめると下記の 3 点です。

  1. 待ち受けアドレスを無制限にする
    • ng serve--host=0.0.0.0 オプションを追加
  2. 待ち受けポートを合わせる
    • App Service をいじるなら、アプリケーション設定 PORT に 4200 を指定
    • Angular をいじるなら、ng serve--port=8080 オプションを追加
  3. ホスト名チェックを無効にする
    • ng serve--disableHostCheck=false オプションを追加

ng serve で指定しているオプション類は、多分 angular.json ファイルでも指定できる気がします (調べてません)。

この後、Bootstrap の CSS を追加した時に、新たなハマりポイントがあったのですが、続きは後編で。