Angular デプロイ忘備録 - happy

大変参考になりました。ありがとうございます。

Angular CLI で作ったアプリを Heroku にデプロイして動くようにした - Corredor

express を利用する

expressとは、jsのフレームワーク。ルーティングHTTPヘルパー（リダイレクト、キャッシュ）、14以上のテンプレートエンジンをサポートする。(画面の描画ということ。)

# Express をインストールして dependencies に追加する
$ npm install --save express

--save は何をしているかと言うと、ローカルにインストールするということ。グローバルにインストールすると、コマンドとして利用できる。そのかわりに、グローバルのバージョンが固定されてしまい、別のバージョンの利用のとき、切り替えが発生して面倒です。開発の時に複数で開発する時は、package.jsonに記載されないので、不便ですね。

ローカルインストールの時は、アプリケーションフォルダの中に、node_modules ディレクトリが作成され、そこにパッケージがインストールされる。

--save-dev というのもあり、それは　package.json の devDependencies に追記されます。

dependencies には5種類あります。

dependencies
devDependencies
peerDependencies
optionalDependencies
bundledDependencies

dependencies にあるものは npm install --save でインストールできます。別の環境でも同じ環境を構築できるので便利です。

devDependenciesには　開発時のみ利用できるものを入れておくようです。具体的には、テストツールや、ビルドツール、タスクラナーなどです。

しかし、Herokuへデプロイする時は、devDependenciesに記載されているものは、インストールされない。ビルドがうまくいかないようです。それで、ng build コマンドに必要なものをすべて dependencies へ移動しておきます。

package.jsonに engins の記載を追加

  "engines": {
    "node": "12.x",
    "npm": "6.9.x"
  }

Herokuが npm install する時にここを見るので記載します。

package.json 書き方について

  "scripts": {
    "ng": "ng",
    "start": "ng serve",

この場合 shell script とエイリアスコマンドを指定できます。
エイリアスコマンドが : の左側、shell script が : の右側この場合 ng start とコマンドを入力すると ng serve が実行されます。

参考にさせていただきました。ちゃんと使い分けてる? dependenciesいろいろ。 - Qiita