Angular開発を快適に！ng serveのデフォルト設定をカスタマイズして自分だけの環境を作ろう

Angular / Angular CLI で ng serve のデフォルトホストとポートを設定する方法

Angular CLI の ng serve コマンドは、開発時にアプリケーションをローカルで実行するために使用されます。デフォルトでは、このコマンドは localhost:4200 でアプリケーションをホストします。しかし、異なるホストやポートを使用したい場合もあるでしょう。

このチュートリアルでは、Angular CLI の設定ファイルを使用して、ng serve コマンドのデフォルトホストとポートを設定する方法を説明します。

手順

1. プロジェクトの設定ファイルを開く

プロジェクトのルートディレクトリにある angular.json ファイルを開きます。

1. "serve" プロパティを見つける

angular.json ファイルには、serve プロパティという名前のオブジェクトがあります。このオブジェクトには、ng serve コマンドの動作を制御するための設定が含まれています。

1. "host" プロパティを設定する

serve オブジェクトには、host という名前のプロパティがあります。このプロパティは、アプリケーションをホストするホスト名または IP アドレスを指定します。

デフォルトでは、host プロパティは localhost に設定されています。別のホストを使用したい場合は、このプロパティをそのホスト名または IP アドレスに変更します。

1. ファイルを保存して ng serve を実行する

angular.json ファイルを保存して、次のコマンドを実行してアプリケーションを起動します。

ng serve

アプリケーションは、設定したホストとポートで起動します。

例

次の例は、angular.json ファイルの設定方法を示しています。

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "host": "0.0.0.0",
          "port": 8080
        }
      }
    }
  }
}

この設定により、ng serve コマンドはアプリケーションを 0.0.0.0:8080 で起動します。

注意事項

• host プロパティに 0.0.0.0 を設定すると、アプリケーションはすべてのネットワークインターフェースでアクセス可能になります。
• 特定のポートを使用したい場合は、そのポートが使用可能であることを確認する必要があります。

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "host": "0.0.0.0",
          "port": 8080,
          "ssl": true,
          "sslKey": "./ssl/key.pem",
          "sslCert": "./ssl/cert.pem"
        }
      }
    }
  }
}

• ホスト: 0.0.0.0
• ポート: 8080
• SSL: 有効
• SSL キー: ./ssl/key.pem

説明

• host プロパティ: アプリケーションをホストするホスト名または IP アドレスを指定します。
• ssl プロパティ: SSL を有効にするかどうかを指定します。

• SSL を使用する場合は、SSL キーファイルと SSL 証明書ファイルを用意する必要があります。

Google 検索で「他の方法で ng serve のデフォルトホストとポートを設定する」を検索したところ、関連する結果は見つかりませんでした。

もし、他の方法で ng serve のデフォルトホストとポートを設定する方法をご存知の方がいらっしゃいましたら、ぜひ教えてください。