web-dev-qa-db-ja.com

プロダクションと開発の両方で、同じポート4200でangular 4アプリとnodejs APIを実行する方法は？

angular 4アプリを作成し、ng serve --openを使用して実行でき、localhost:4200で実行できます。また、nodejsを使用してapiも作成しました同じangularプロジェクト今localhost:4200/apiでそのAPIを実行したいので、このようなことを試しました

私のangular 4およびnodejs構造は次のようになります

/dist
/server
  /routes
  /server
/src
app.js
package.json

私が使用したapp.jsで

app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:${port}`));

nodemon app.jsを使用して実行し、localhost:3000に移動すると、angularアプリが実行され、localhost:3000/app/apiに移動するよりもうまく機能します。

ただし、angularアプリを変更すると、アプリは自動更新されません。現在、更新のためにノードアプリを実行しているため、ng buildを実行する必要があり、angularアプリ

だから、ng serve --openを実行することはangular appを実行しますが、ノードjs apiは実行しないため、両方を実行し、angular appまたはノードjsアプリは自動更新する必要があります。

node.jsangularmean-stack
8
kumbhanibhavesh

同じポートで2つの異なるアプリケーションを実行することはできません。 Angular-cliは_ng serve_を実行するときに、バックグラウンドでnodejsサーバー（技術的にはwebpack-dev-server）を使用します。つまり、ポートは既に使用されています。

2つの解決策があります。

  1. ノードアプリケーションを使用して、静的フロントエンドファイルを提供します。そうすれば、_ng serve_を実際に使用することはできません（これはおそらくライブで実行するときに行うことです）。

  2. 別のポートでnodejsを使用し、Angularのプロキシ設定を使用して、Angular APIポートが実際に4200であると考えます（これはおそらく開発中に最適です）。

おそらく_ng serve_ liveを使用することはほとんどない（そしてそうすべきではない）ので、これは主に開発中の懸念事項です。したがって、オプション2が最善の推奨事項です。

プロキシを構成するには、angularアプリケーションルートディレクトリに_proxy.config.json_という名前のファイルを作成し、次のコンテンツを追加します。

_{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}
_

次に、_ng serve_を実行すると、代わりに_ng serve --proxy-config proxy.config.json_を使用して実行します。

ここにドキュメントへのリンクがあります

本番用に構築する場合の代替案（上記ソリューション1）：

本番環境でビルドするには、_ng build --prod_を使用して 本番環境の作成Angular build を作成し、次に（ノードサーバーでExpressを使用する場合）、 app.use(express.static('dist/'))Express documentation で説明されているように、私は自分でノードを使用していません（.NET Coreを使用しています）ので、これ以上は提供できません詳細の条件。

15
Nikolaj Dam Larsen

1.first build you angular 6 app run ng build --watch

2. nodejsアプリから、このミドルウェアapp.use(express.static(path.join(__dirname, './client/dist/client')));を作成します。client/ dist/clientを指すフォルダーは、angular 6 app。

次に、nodemon --inspect app.jsを実行します

このようなフォルダの階層を持つようにしてください

/myproject /client /dist /client /.... /index.html /app.js /.....

app.jsから実行するポートをリッスンし、localhost：portnoを実行します

お役に立てれば

1
vishu handa

ダニエル・カガンによるメディアに関する素晴らしいブログが1つあります。これはすべてここでリンクです ホットデプロイ クライアントホットデプロイメントについての説明クライアントとサーバーをホットデプロイするためのコードを追加しました。

この答えは、純粋に開発ホットリロード用です

ステップ1

インストール 同時 および nodemon

npm i同時に

npm i nodemon

-gフラグを使用してグローバルにインストールすることもできます

ステップ2

サーバーのpackage.jsonファイルを開き、次の4行を追加します。 注私はangularクライアントフォルダ内のコードがあるので、私はしましたcd client

_"buildclient": "cd client && ng build",
"runclient": "cd client && npm start",
"devstart": "nodemon --inspect ./bin/www",
"dev": "npm run buildclient & concurrently --kill-others \"npm run runclient\" \"npm run devstart\""
_

ノードアプリを検査したくない場合は、_--inspect_フラグを削除します。

ステップ

angularフォルダに移動し、ファイルを作成しますproxy.conf.jsonファイルに次の行を追加します。

_ {
   "/api/*": {
   "target": "http://localhost:3000",
   "secure": false,
   "changeOrigin": true
 }
 }
_

ステップ4

アンギュラーのpackage.jsonファイル内に次のコマンドを追加します

_"start": "ng serve --proxy-config proxy.conf.json"_

ステップ5

Make angularサーバーのパブリックフォルダー内のビルド出力ディレクトリ。これを行うには、angular.jsonに移動し、ビルドoutputPathを_../public_に変更します。次はJSONスニペットです。

_"options": {
        "outputPath": "../public",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": []
      },
_

ステップ6

ノードエクスプレスサーバーのapp.jsファイルがパブリックフォルダーから静的ファイルを読み取ることを確認します。

app.use(express.static(path.join(__dirname, 'public')));

ステップ7

npm run dev

完了goto http：// localhost：42 そこにアプリが表示されます:)/apiへのすべての呼び出しは、ノードエクスプレスサーバーに到達します。

サーバーまたはクライアントへの変更は、自動的にホットデプロイされます。

[〜＃〜] note [〜＃〜]私は Express application generator を使用してサーバーを作成し、 Angular CLI を作成してangular application。他の方法で行った場合、一部のファイルが存在しない可能性があります

1
Gaurav Joshi