web-dev-qa-db-ja.com

同じポートAngularとNode.JS Expressでどのように実行しますか？

これは質問を複製することは可能かもしれませんが、FEとBEを一緒に構成する方法を理解できないため、両方を実行します。

this と this の質問を試しましたが、理解できませんでした。

4300で実行されているMy Node + Express

app.post('/postData', function(req, res) {
//some worst logics here :)
});

そして

Angular 5が4200で実行されています。以下は、ポストエンドポイントを呼び出すFEサービスです。

postData(feData) {
        console.log(feData);
        this.http.post('/postData', feData, this.httpHeader).subscribe((data) => {
        });
    }

私が試したのは、2つのcmd Windowsを開いたものです。1つはserver.js 沿って node server.jsとng serveを使用したもう1つ。

結果：

404 not fount(cannot post)

何が悪いのでしょうか。

node.jsangularexpressangular5
4
worstCoder

この場合に必要なのは、Angular 5アプリケーションを高速プロセスで実行するために移動することです。これは次のようにして実現できます チュートリアル -項目2を参照

いくつかの複雑な問題を取り除きましたが、チュートリアルをご覧になることをお勧めします。

npm install --save express body-parser

server.jsなどのノードアプリを実行するファイルを作成し、次のコードを追加します。

var app = require('app.js');
var debug = require('debug')('mean-app:server');
var http = require('http');

var port = normalizePort(process.env.PORT || '4300');
app.set('port', port);

var server = http.createServer(app);
server.listen(port);
server.on('listening', onListening);

function onListening() {
  var addr = server.address();
  debug('Listening on ' + port);
}

「package.json」を編集して、アプリの起動方法を指定します。

"scripts": {
  "ng": "ng",
  "start": "ng build && node server.js",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

次に、高速で実行されるapp.jsを作成します。

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var sample = require('./routes/sample.js');
var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'false'}));

//Put your angular dist folder here
app.use(express.static(path.join(__dirname, 'dist')));
app.use('/samples', express.static(path.join(__dirname, 'dist')));
app.use('/sample', sample);

module.exports = app;

要素のルートフォルダを作成することをお勧めします。次の内容のファイルroutes/sample.jsを作成します。

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send('RESTful API');
});

module.exports = router;

Nodeコマンドを使用してサーバーを実行します。

npm start
9
Marcio Jasinski

経験上、バックエンドまたはマイクロサービスをフロントエンドアプリケーションから分離します。

1
Wembo Mulumba