如何使反应应用程序在端口 8080 和 0.0.0.0 上运行？答案

【问题标题】：How to make a react application to run on port 8080 and 0.0.0.0?如何使反应应用程序在端口 8080 和 0.0.0.0 上运行？
【发布时间】：2018-06-18 02:49:19
【问题描述】：

我已经构建了一个在 localhost:8080 上运行的 react 应用程序，现在我想将其更改为 0.0.0.0:80使其公开访问，但不幸的是我无法访问。

Webpack file:

var config = {
   entry: [
    './main.js'
 ],

   output: {
      path:'D:\\reactApps\\RouterExample',
      filename: 'index.js',
   },

   devServer: {
    inline: true,
    host: '0.0.0.0',
    port: 80,
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         },{
            test: /\.css$/,
             exclude: /node_modules/,
            loader: 'style-loader'
         }, {
            test: /\.css$/,
             exclude: /node_modules/,
            loader: 'css-loader',
            query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }
         }
      ]
   }

}

module.exports = config;

package.json file:

{
  "name": "routerexample",
  "version": "1.0.0",
  "description": "new app",
  "main": "index.js",
  "dependencies": {
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "react": "^15.6.1",
    "react-autocomplete": "^1.7.1",
    "react-bootstrap": "^0.31.1",
    "react-bootstrap-alert": "^1.0.7",
    "react-bootstrap-dialog": "^0.9.1",
    "react-bootstrap-typeahead": "^2.0.0-alpha.3",
    "react-dom": "^15.6.1",
    "react-number-format": "^3.0.2",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "style-loader": "^0.18.2",
    "underscore": "^1.8.3",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.5.1"
  },
  "scripts": {
    "start": "webpack-dev-server --hot --history-api-fallback"
  },
  "author": "",
  "license": "ISC"
}

编辑-1：

我想将我的应用程序配置为可以通过例如 (xyz.com) 而不是 localhost 的 url 访问，如何实现..？

提前感谢您的建议。

【问题讨论】：

你在用nodejs吗？
是的，当然..

标签： node.js reactjs webpack webpack-dev-server package.json

【解决方案1】：

尝试去http://localhost:80

0.0.0.0 不是合法地址。它只是意味着，无论机器分配的地址是什么。

【讨论】：

@ManikantaB -- 一旦你看到了诀窍，很多事情都很简单。
您知道我们可以将访问 url 从 localhost 更改为 xyz.com 吗？？
@ManikantaB -- 我愿意，但这是一个不同的问题。写下来，描述你的整个情况（你在什么操作系统上？你希望每个人都能从 xyz.com 访问它还是只有你？你打算用它做什么？），并放一个链接在 cmets 中。