web-dev-qa-db-ja.com

Node ExpressサーバーとAngular=を同じポートで実行するには？

Node and Angular。初心者です。Nodeバックエンドとして機能するExpressアプリとAngular同じポート上のフロントエンド。私はAngular angle.ioのクイックスタートのヒントに従い、Node todoアプリケーションを作成しましたが、両方とも実行しています。 Cross Origin Request Blocked Issueの問題を引き起こす別のポート。

node.jsangularexpress
12
Swapnil Deo

同じポートでAngularとExpressを実行するために、Expressアプリ自体でAngularビルドファイルを常に提供しています。次のようにAngularビルドディレクトリから静的コンテンツを提供するようExpressに指示できるはずです。

app.use(express.static('../accounting-client/dist'));

あなたがそのようなファイル構造を持っていて、serve.jsをノードで実行している場合、これは機能します：

-accounting-server
  -serve.js
-accounting-client
  -dist/*

Angularビルドフォルダーを必要な場所に構成することにより、必要に応じてカスタマイズするか、Grunt/Gulpを使用して、ビルドタスクで好みのフォルダーにファイルを移動できます。

Yakovが述べたように、これはAngular devサーバーの自動更新では動作しないため、開発には理想的ではありません。

9
SpaceFozzy

Node.jsが同じポートでAngularアプリを提供するには、静的リソースがデプロイされているノードのディレクトリの下にAngularアプリをデプロイする必要があります。開発モードでは、Angularバンドル（コードに応じてメモリ内で自動再構築）を、たとえばポート4200で開発サーバーから提供する方が生産的です。Nodeサーバーは別のポート（8080など）で実行されます。

クロスオリジンの問題を回避するには、Angularアプリで単純なプロキシファイルを設定して、すべてのデータリクエストをNodeサーバーにリダイレクトします。たとえば、 Angularプロジェクトのルートディレクトリにproxy-conf.jsonファイルを作成します。

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

これにより、URLに/apiが含まれるすべてのリクエストがNodeサーバーにリダイレクトされます。ポート8080で実行されると仮定します。その後、Angular次のコマンドを使用したアプリ：

ng serve --proxy-config proxy-conf.json

AngularアプリのHTTPリクエストは次のようになります。

http.get('/api/products');

もちろん、NodeサーバーでGET要求の/api/productsエンドポイントを構成する必要があります。

10
Yakov Fain

spacefozzy のように、Expressプロジェクト内からクライアント側プロジェクトにアクセスする必要があるという事実は事実です。ただし、プロジェクトを分離しておくことはできます。
そのために、Expressプロジェクトディレクトリのクライアント側プロジェクトディレクトリからシンボリックリンクを作成できます。

// while in Express directory
ln -s ~/path/tp/client-side/build name-in-espress-dir

このようにして、プロジェクトを分離して維持できます。

0
Reyraa