Express、webpack-dev-severが見つからないReactインデックス

Question

私は、バックエンド（jsonファイル）とwebpackのためにExpressを使用している私の小さな反応メッセージアプリケーションのために、フロントエンド用のdevサーバー。 Webpackサーバーだけを起動すると、アプリケーションが正しく表示され、2つの作業を一緒にしようとするとプローブが来るので、問題はwebpack-dev-serverのプロキシ設定だと思います。ここで

は私の急行サーバー、JSON-API-server.jsです：

var express = require('express'); 
var serveStatic = require('serve-static'); 
var fs = require('fs'); 
var path = require('path'); 
var bodyParser = require('body-parser'); 


module.exports = (PORT) => { 

    const MESSAGES_FILE = path.join(__dirname, 'src/app/data/messages.json'); 
    const app = express(); 

    app.use(serveStatic(__dirname + '/build')); 
    app.use(bodyParser.json()); 
    app.use(bodyParser.urlencoded({extended: true})); 

    // Additional middleware which will set headers that we need on each request. 
    app.use(function(req, res, next) { 
     // Set permissive CORS header - this allows this server to be used only as 
     // an API server in conjunction with something like webpack-dev-server. 
     res.setHeader('Access-Control-Allow-Origin', '*'); 

     // Disable caching so we'll always get the latest comments. 
     res.setHeader('Cache-Control', 'no-cache'); 
     next(); 
    }); 

    app.get('/messages', function(req, res) { 
    fs.readFile(MESSAGES_FILE, function(err, data) { 
     if (err) { 
     console.error(err); 
     process.exit(1); 
     } 
     res.json(JSON.parse(data)); 
    }); 
    }); 

    app.post('/messages', function(req, res) { 
    fs.readFile(MESSAGES_FILE, function(err, data) { 
     if (err) { 
     console.error(err); 
     process.exit(1); 
     } 
     var messages = JSON.parse(data); 

     var newMessage = { 
     id: Date.now(), 
     body: req.body.body, 
     date: req.body.date, 
     from: req.body.from, 
     to: req.body.to 
     }; 
     messages.push(newMessage); 
     fs.writeFile(MESSAGES_FILE, JSON.stringify(messages, null, 4), function(err) { 
     if (err) { 
      console.error(err); 
      process.exit(1); 
     } 
     res.json(messages); 
     }); 
    }); 
    }); 

    app.listen(PORT, function (err) { 
    if (err) { 
     return console.log(err); 
    } 
    console.log('Listening at' + PORT); 
    }); 
} 

これはWebPACKの-server.jsです：

：

var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config'); 


module.exports = (PORT) => { 
    const backendPort = PORT - 1; 
    const server = new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true, 
    proxy: { 
     '*' : { 
     target: 'http://localhost:' + backendPort 
     } 
    } 
    }); 
    server.listen(PORT, 'localhost', function (err) { 
    if (err) { 
     return console.log(err); 
    } 
    console.log('Listening at ' + PORT); 
    }); 
} 

そして、ここではserver.jsです

var apiServer = require('./json-api-server'); 
var webpackServer = require('./webpack-server'); 

const PORT = process.env.PORT || 4001; 
const PROD = process.env.NODE_ENV === 'production'; 

if (PROD) { 
    apiServer(PORT); 
} else { 
    apiServer(PORT - 1); 
    webpackServer(PORT); 
} 

私のファイルツリーは次のようになります。

---/
----- server.js 
----- webpack-server.js 
----- json-api-server.js 
----- src/ 
------- app/index.js 
------- app/data/ 
-------------- messages.json 

サーバーが正しく起動し、端末にエラーが発生しない localhost：4000/messagesにアクセスできます localhost：4001にアクセスできません。私は得た：「得ることができない/」

何か助けてください？ :)

Answer 1

ありがとうございました！ ここで記号*は意味します： "*"を使用して、指定したサーバーへのすべてのパスをプロキシします。

proxy: { 
     '*' : { 
     target: 'http://localhost:' + backendPort 
     } 
    } 

これにより、インデックスが未定義になります。

は、だから私は私のJSON（またはAPI）が住んでいる場所にキーポイントする必要があります。

proxy: { 
'/messages': 'http://localhost:' + backendPort 
} 

：参考として

proxy: { 
      '/messages' : { 
      target: 'http://localhost:' + backendPort 
      } 
     } 

を、これも有効なソリューションです。