Question

我有我的React应用程序编译所有正常的dev＆amp;但是，现在我正在使用DigitalOcean部署prod脚本，我遇到process.env.port为undefined的问题，因此会回到3000而不是预期的端口{{1} }。

Package.json npm脚本：

80 Webpack.config.production.js脚本，包含process.env的DefinePlugin（）：


"build": "webpack -p --config webpack.config.production.js && 
    cross-env NODE_ENV=production node server/server.js"

我的快递服务器文件：

module.exports = {
  entry: {
    app: ["./src/scripts/index.js"]
  },
  output: {
    filename: "[name]-bundle.js", path: __dirname, publicPath: "/"
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.(scss|css)$/,
        use: [
          {loader: "style-loader"}, {
            loader: "css-loader"}, {
            loader: "sass-loader"}, {
            loader: "postcss-loader"}
          }
        ]
      },
      {
        test: /\.(jpg|png|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[path][name].[ext]"
          }
        }
      }
    ]
  },
  plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin({
  "process.env": {
    NODE_ENV: JSON.stringify("production")
  }
}),
extractSass,
new UglifyJsPlugin({
  sourceMap: true,
  uglifyOptions: {
    output: {
      comments: false
    }
  }
}),
new HtmlWebpackPlugin({
  template: "public/index.html",
  favicon: "public/assets/img/favicon.ico"
}),
new ExtractTextPlugin({
  filename: "styles/styles.css",
  allChunks: true
})
]
};

没有错误，当它在备份端口const path = require("path"); const express = require("express"); const app = express(); const port = process.env.PORT || 3000; let useFolder; if (process.env.NODE_ENV !== "production") { useFolder = "/public/"; const webpack = require("webpack"); const config = require("../webpack.config.development"); const compiler = webpack(config); app.use( require("webpack-dev-middleware")(compiler, { noInfo: true, publicPath: config.output.publicPath, hot: true }) ); app.use( require("webpack-hot-middleware")(compiler, { log: console.log, path: "/__webpack_hmr", heartbeat: 10 * 1000 }) ); } else { useFolder = "/dist/"; } app.use(express.static("dist")); app.get("/", function(req, res) { res.sendFile(path.join(__dirname, ".." + useFolder + "index.html")); }); app.listen(port, function(err) { if (err) { return console.error(err); } console.log("Listening at port: ", port); });上运行时，所有在实时服务器上都很好，但我期待80端口。

我尝试过交换设置3000的地方：从NPM脚本中删除，以及DefinePlugin（），但也没有成功。

Answer 1

要在项目中创建环境变量，请在项目的根目录中创建 .env 文件，并在该文件中添加值。您可能必须重新运行必须再次捆绑它们的部署脚本。我们通常在部署期间评论与其他环境相关的值，我们有一个脚本来执行此操作。

#dev
PORT=6000
URL=Blahhh.dev.com

#prod
PORT=7000
URL=Blahhh.com

Answer 2

Webpack默认为web捆绑。这意味着它将使用您在DefinePlugin中定义的内容替换所有process.env.语句。你永远不会将PORT设置为任何东西，因此它将是未定义的您有两个选项，可以在DefinePlugin中定义PORT，也可以将webpack目标更改为node并删除DefinePlugin。这将使webpack在运行时使用实际的环境变量 https://webpack.js.org/concepts/targets/

Webpack生产过程.env.PORT =服务器编译时未定义（React app）

2 个答案: