Question

当我将react js应用程序上传到heroku服务器时，无法构建Web套接字

Answer 1

这是由最新的react-script更新引起的问题。现在将您的react-script软件包降级到3.2。

npm install react-script@3.2

https://github.com/facebook/create-react-app/pull/8079#issuecomment-562373869

Answer 2

使用

"react-scripts": "3.2.0"

代替

"react-scripts": "3.3.0", in package.json.

之后，您可以再次部署。

Answer 3

通过执行以下过程，您可以在不降级react-script的情况下做到这一点。

您可以更改

的第62行

node_modules / react-dev-utils / webpackHotDevClient.js

来自

protocol:'ws',

到

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

Google Cloud Platform使用相同的方法（无法构建'WebSocket。）。上面的修订也将适用于此，我也希望适用于AWS。

Answer 4

如果您使用create-react-app创建应用，请执行以下步骤...

Windows 10
节点版本10.16.0

打开项目根目录上的终端，然后键入以下命令。 npm i express compression morgan --save
按Enter

在项目根目录中创建server.js，然后在其中放置以下代码。

const {createServer} = require ('http');
const express = require('express');
const compression = require('compression');
const morgan = require ('morgan');
const path = require('path');
const normalizePort = port => parseInt(port, 10);

const app = express();
const PORT = normalizePort(process.env.PORT || 8000);
const dev = app.get('env') !=+ 'production';

if(!dev){
    app.disable('x-powered-by');
    app.use(compression());
    app.use(morgan('common'));

    app.use(express.static(path.join(__dirname,'build')))

    app.get('/',(req,res)=>{
        res.sendFile(path.join(__dirname,'build','index.html'))
    })
}

if(dev){
    app.use(morgan('dev'))
    app.disable('x-powered-by');
    app.use(compression());
    app.use(morgan('common'));

    app.use(express.static(path.join(__dirname,'build')))

    app.get('/',(req,res)=>{
        res.sendFile(path.join(__dirname,'build','index.html'))
    })
}

const server = createServer(app);

server.listen(PORT,err =>{
    if(err) throw err;
    console.log('Server Started on port :' + PORT);
    
})

并在package.json文件中，如下更改启动脚本：
"start": "node server.js",

继续并使用npm start运行您的应用。

以上更正将创建一个Express应用，默认情况下该应用是安全的。这将启动一个快速应用程序，在其上运行react应用程序。

将其部署到Heroku。

在heroku（响应）中托管的示例应用程序：ManoBran WebApp

那应该有帮助！

SecurityError：无法构造'WebSocket，当我在heroku服务器中上载react js应用程序时，本地所有文件运行正常

4 个答案: