在AWS EC2实例上使用React-Redux应用程序部署React SSR

Question

我已经使用React-Redux和它后面的Node Express服务器创建了一个服务器端渲染的React应用程序。

应用程序运行完美。现在，我主要关心的是它在服务器上的部署。

对于服务器，我使用AWS EC2实例。我有一个域，例如：subdomain.domain.in，我想将此应用程序部署到该域。我也在这里安装了SSL，因此这些站点现在应该可以在443端口上运行。

但是当我在index.js文件（项目的根文件）上提供443端口时，它将无法正常工作。

项目目录结构：

| ssr-react
  webpack.client.js
  webpack.server.js
  .babelrc
  package.json
  | src
    index.js
    | client
      | reducers
        auth.js
      | actions
        index.js
      App.js
      client.js
      Routes.js
      ...

src / index.js

import "babel-polyfill";
import express from "express";
import proxy from "express-http-proxy";
import { matchRoutes } from "react-router-config";
import Routes from "./client/Routes";
import renderer from "./helpers/renderer";
import createStore from "./helpers/createStore";

const app = express();

app.use("/api", proxy("http://myapi.domain.in"));

app.use(express.static("public")); //tells webpack that this public directory is available outside world or treat it as static

app.get("*", (req, res) => {
  const store = createStore(req);

  //Some logic to initialize and load data to store
  const promises = matchRoutes(Routes, req.path)
    .map(({ route }) => {
      return route.loadData ? route.loadData(store) : null;
    })
    .map(promise => {
      if (promise) {
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve);
        });
      }
    });

  Promise.all(promises).then(() => {
    const context = {};
    const content = renderer(req, store, context);

    if (context.url) {
      return res.redirect(301, context.url);
    }

    if (context.notFound) res.status(404);

    res.send(content);
  });
});

// serving sitemap.xml
app.get("/sitemap.xml", function(req, res) {
  sitemapData.toXML(function(err, xml) {
    if (err) {
      return res.status(500).end();
    }
    res.header("Content-Type", "application/xml");
    res.send(xml);
  });
});

app.listen(443, () => {
  console.log("Listening on port 443");
});

webpack.client.js

const path = require("path");
const webpack = require("webpack");
const webpackNodeExternals = require("webpack-node-externals");
const ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
  //Tell webpack the root file of our server application
  entry: "./src/client/client.js",

  //Tell webpack where to put the output file that is generated
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public")
  },

  resolve: {
    extensions: [".js", ".css"]
  },

  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: [
            "@babel/react",
            ["@babel/env", { targets: { browsers: ["last 2 version"] } }]
          ],
          plugins: ["@babel/plugin-proposal-function-bind"]
        }
      },
      {
        test: /\.css$/,
        use: ["isomorphic-style-loader", { loader: "css-loader" }]
      }
    ]
  }
};

webpack.server.js

const path = require("path");
const webpack = require("webpack");
const webpackNodeExternals = require("webpack-node-externals");


module.exports = {
  //Inform webpack that we are building a bundle for nodeJS,
  //rather than for the browser
  target: "node",

  //Tell webpack the root file of our server application
  entry: "./src/index.js",

  //Tell webpack where to put the output file that is generated
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: "/build"
  },

  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: [
            "@babel/react",
            ["@babel/env", { targets: { browsers: ["last 2 version"] } }]
          ],
          plugins: ["@babel/plugin-proposal-function-bind"]
        }
      },
      {
        test: /\.css$/,
        use: ["isomorphic-style-loader", { loader: "css-loader" }]
      }
    ]
  },

  externals: [webpackNodeExternals()]
};

任何人都可以指导我将应用程序部署到服务器并将其映射到域（受保护）的正确方法。