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

Posted 2023-02-22

【中文标题】如何使反应应用程序在端口 8080 和 0.0.0.0 上运行？

【英文标题】：How to make a react application to run on port 8080 and 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吗？

是的，当然..

【参考方案1】：

尝试去http://localhost:80

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

【讨论】：

@ManikantaB -- 一旦你看到了诀窍，很多事情都很简单。

您知道我们可以将访问 url 从 localhost 更改为 xyz.com 吗？？

@ManikantaB -- 我愿意，但这是一个不同的问题。写下来，描述你的整个情况（你在什么操作系统上？你希望每个人都能从 xyz.com 访问它还是只有你？你打算用它做什么？），并放一个链接在 cmets 中。