ローカルホスト外へのアクセスを許可する方法

Angular2のローカルホスト外へのアクセスを許可するにはどうすればよいですか？でlocalhost:3030/panel簡単にナビゲートできますが、などのIPを作成するとナビゲートできません10.123.14.12:3030/panel/。

修正方法を教えてもらえますか？npm（node project manage-node install / node start）を使用してプロジェクトをインストールおよび実行していません。

あなたがしたい場合、私は提供することができますpackage.jsonとindex.html。

を使用ng serve --host 0.0.0.0すると、ng serveではなくIPを使用してに接続できますlocalhost。

編集

CLIの新しいバージョンでは、代わりにローカルIPアドレスを指定する必要があります

編集2

CLIの新しいバージョン（v5以降だと思います）0.0.0.0では、ネットワークとしてだれでも通信できるように、ホストとして再びIPとして使用できます。

Macユーザー：

1. システム環境設定->ネットワーク-> Wi-Fiに移動します
2. ステータスの下にIPアドレスをコピーします（通常は192.168.1.x）
3. それをあなたのngサーブに貼り付けます： ng serve --host 192.168.1.x

次に、を介して他のデバイスでページを表示できる必要があります192.168.1.x:4200。

コマンドを実行する

ng serve --host=0.0.0.0 --disable-host-check

これにより、ホストチェックが無効になり、IPアドレスを使用して（localhostではなく）外部からアクセスできるようになります。

次のコマンドを使用して、IPでアクセスできます。

ng serve --host 0.0.0.0 --disable-host-check

npmを使用していて、毎回コマンドを実行したくない場合は、スクリプトセクションのpackage.jsonファイルに次の行を追加できます。

"scripts": {
    ...
    "start": "ng serve --host 0.0.0.0 --disable-host-check"
    ...
}

次に、以下のコマンドを使用してアプリを実行し、同じネットワーク内の他のシステムからアクセスできます。

npm start

私angular.jsonはプロジェクトのファイルを以下のように編集するだけで機能します

...

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "project:build",
        "host": "0.0.0.0"
      },

...

ngrokを使用してトンネル上で実行されているすべてのHTTPトラフィックをイントロスペクト することもできます。ngrok http --host-header=rewrite 4200

cmdを開き、プロジェクトの場所（npm installまたはng serveを実行する場所）に移動します。

-その後、コマンドを実行します。あなたのIPアドレスです。ng serve --host 10.202.32.4510.202.32.45

10.202.32.45:42004200がポート番号であるページにアクセスできます。

注：このコマンドを使用してアプリを提供すると、アクセスできなくなりますlocalhost:4200

問題はファイアウォールでした。Windowsを使用している場合は、ノードが許可されていることを確認してください

誰かを助けるかもしれない簡単な解決策：

この行を開始の値として追加ng serve --host 0.0.0.0 --disable-host-check しますpackage.json

例：

{
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",
}

そして、単にstartまたはnpm run start

他のローカルIPからプロジェクトにアクセスできます。

Docker内で同じ問題に直面している場合はCMD、Dockerfileで以下を使用できます。

CMD ["ng", "serve", "--host", "0.0.0.0"]

またはDockerfileを完成させる

FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

proxy.conf.jsonこの構成を作成して貼り付けます

{  
"/api/*":
    {    
        "target": "http://localhost:7070/your api project name/",
        "secure": false,
        "pathRewrite": {"^/api" : ""}
    }
}

交換：

let url = 'api/'+ your path;

CLIから実行：

ng serve  --host port.number —-proxy-config proxy.conf.json

私にとっては「ng serve --open --host 0.0.0.0」を使用して動作しますが、警告があります

警告：これは、Angularアプリケーションをローカルでテストまたはデバッグするために使用するシンプルなサーバーです。セキュリティの問題については確認されていません。

このサーバーを開いている接続にバインドすると、アプリケーションまたはコンピューターが危険にさらされる可能性があります。「--host」フラグに渡されたホストとは異なるホストを使用すると、WebSocket接続の問題が発生する可能性があります。その場合は、「-disableHostCheck」を使用する必要があります。

package.jsonを変更する必要はありません。

私にとってはそれを使用して動作します：

ng serve --host = 0.0.0.0 --port = 5999 --disable-host-check

ホスト：http：// localhost：5999 /

• を使用しng serve --host<Your IP> --port<Required if any>ます。

• ng serve --host = 192.111.1.11 --port = 4545。

• コンパイルの最後に次の行が表示されます。

Angular Live Development Serverは192.111.1.11:4545をリッスンしていますhttp://192.111.1.11:4545/。**でブラウザーを開いてください。

ノードプロジェクトマネージャーを使用している人にとっては、package.jsonに追加するこの行でも十分です。角張ったCLIユーザーにとって、mast3rd3monの答えは真です。

あなたは付け加えられます

"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"

package.jsonへ