使用webpack和Express.js部署React App

Question

我正在使用React開發一個應用程序，並使用webpack作為客戶端部分的模塊捆綁器。 對於服務器，我正在使用Express.js。

對於客戶端，我使用webpack.config.dev.js進行配置，並使用npm start在localhost：3000處啟動Web服務器。

對於服務器，我有app.js文件，並且我使用node bin/www啟動快速服務器，但是我必須提供其他端口來啟動服務器，在本例中為localhost：3100。

對於客戶端和服務器，我只有一個package.json。

有沒有辦法在同一域中部署客戶端和服務器？ 如果是這樣，我該怎么辦？ 我希望從客戶端代碼中將端點引用為：/ data / users，而不是localhost：3100 / data / users。

請參閱下面的webpack config，express config和package.json（以幫助使用）：

webpack.config.dev.js：

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
let node_dir = __dirname + '/node_modules';
let app_dir = __dirname + '/app';

export default {
  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'jquery': node_dir + '/jquery/dist/jquery.js',
      'jquery-validation': node_dir + '/jquery-validation/dist/jquery.validate.js',
      'jquery-placeholder': node_dir + '/jquery-placeholder/jquery.placeholder.js',
      'jquery-oauth': node_dir + '/jquery-oauth/dist/jquery.oauth.js',
      'bootstrap': node_dir + '/bootstrap/dist/js/bootstrap.min.js',
      'owlcarousel':node_dir+'/owlcarousel/owl-carousel/owl.carousel.min.js',
      'modernizr':node_dir + '/npm-modernizr/modernizr.js',
      'jquery-shuffle':node_dir + '/shufflejs/dist/shuffle.js' ,
      'jquery-stellar':node_dir + '/jquery.stellar/jquery.stellar.js',
      'jquery-touchswipe':node_dir + '/jquery-touchswipe/jquery.touchSwipe.min.js'
    },
    modulesDirectories: ['js',  'node_modules']
  },
  debug: true,
  devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
  noInfo: true, // set to false to see a list of every file being bundled.
  context: app_dir + "/app",
  entry: {
    // must be first entry to properly set public path
    app: [app_dir+'/webpack-public-path',
      'webpack-hot-middleware/client?reload=true',
      app_dir+'/index']
  },
  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
  output: {
   // path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`.
    path: `${__dirname}/app`,
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("package.json", ["main"])
    ),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
                                //template: 'src/index.ejs',
      template: app_dir+'/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jquery: "jquery",
      "windows.jQuery": "jquery",
      jQuery:"jquery",

    }),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']},

    ]
  },
  postcss: ()=> [autoprefixer]
};

服務器端的app.js：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

和package.json：

{
  "name": "dario-webapplication",
  "version": "1.0.0",
  "description": "Webapplication for Dario project",
  "engines": {
    "npm": ">=3"
  },
  "scripts": {
    "server": "nodemon ./server/bin/www",
    "preinstall": "node tools/nodeVersionCheck.js",
    "setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
    "remove-demo": "babel-node tools/removeDemo.js",
    "start-message": "babel-node tools/startMessage.js",
    "prestart": "npm-run-all --parallel start-message remove-dist",
    "start": "npm-run-all --parallel open:app lint:watch server",
    "open:app": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* app tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run clean-dist && npm run lint && npm run test",
    "build": "babel-node tools/build.js && npm run open:dist",
    "test": "mocha tools/testSetup.js \"app/**/*.spec.js\" --reporter progress",
    "test:cover": "babel-node node_modules/isparta/bin/isparta cover --root app --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"app/**/*.spec.js\" --reporter progress",
    "test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root app --report lcovonly _mocha -- --require ./tools/testSetup.js \"app/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "npm run test -- --watch",
    "open:cover": "npm run test:cover && open coverage/index.html"
  },
  "author": "Francisco Jose Parra Gonzalez",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "3.3.7",
    "imports-loader": "0.6.5",
    "jquery": "^1.11.1",
    "jquery-oauth": "2.1.3",
    "jquery-placeholder": "2.3.1",
    "jquery-touchswipe": "1.6.15",
    "jquery-ui": "^1.10.4",
    "jquery-validation": "1.15.1",
    "jquery.easing": "^1.3.2",
    "jquery.stellar": "0.6.2",
    "lightgallery": "1.2.21",
    "npm-modernizr": "2.8.3",
    "object-assign": "4.1.0",
    "owlcarousel": "1.3.3",
    "react": "15.3.0",
    "react-bootstrap": "0.30.3",
    "react-dom": "15.3.0",
    "react-redux": "4.4.5",
    "react-router": "2.6.1",
    "react-router-redux": "4.0.5",
    "redux": "3.5.2",
    "redux-thunk": "2.1.0",
    "shufflejs": "4.0.1",
    "throttle-debounce": "1.0.1",
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.13.4",
    "express-validator": "^2.20.8",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  },
  "devDependencies": {
    "autoprefixer": "6.4.0",
    "babel-cli": "6.11.4",
    "babel-core": "6.11.4",
    "babel-loader": "6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-plugin-transform-react-remove-prop-types": "0.2.9",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.5.0",
    "babel-register": "6.11.6",
    "browser-sync": "2.14.0",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.2.0",
    "coveralls": "2.11.12",
    "cross-env": "2.0.0",
    "css-loader": "0.23.1",
    "enzyme": "2.4.1",
    "eslint": "3.2.2",
    "eslint-plugin-import": "1.12.0",
    "eslint-plugin-jsx-a11y": "2.0.1",
    "eslint-plugin-react": "6.0.0",
    "eslint-watch": "2.1.14",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "html-webpack-plugin": "2.22.0",
    "isparta": "4.0.0",
    "mocha": "3.0.1",
    "mockdate": "1.0.4",
    "node-sass": "3.8.0",
    "npm-run-all": "2.3.0",
    "open": "0.0.5",
    "postcss-loader": "0.9.1",
    "prompt": "1.0.0",
    "react-addons-test-utils": "15.3.0",
    "redux-immutable-state-invariant": "1.2.3",
    "replace": "0.3.0",
    "rimraf": "2.5.4",
    "sass-loader": "4.0.0",
    "sinon": "1.17.5",
    "sinon-chai": "2.8.0",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.1",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.12.2",
    "webpack-md5-hash": "0.0.5"
  },
  "keywords": [],
  "repository": {
    "type": "git",
    "url": ""
  }
}

Answer 1

也許這些樣板可以幫助您。 而這里的線37是你在尋找什么。

最初運行的是bin / server.js，它僅能在服務器端節點代碼中啟用ES6和ES7功能。 然后啟動server.js。 在server.js中，我們將對/ api / *的所有請求代理到運行在localhost：3030的API服務器。 來自客戶端的所有數據獲取調用都轉到/ api / *。 除了從/ static提供圖標和靜態內容之外，server.js唯一要做的就是將委托渲染呈現給react-router。 在server.js的底部，我們監聽端口3000並啟動API服務器。