MERN && Heroku：我的应用程序显示在VirtualBox / Linux环境中，而不显示在Windows或移动设备上

如何解决MERN && Heroku：我的应用程序显示在VirtualBox / Linux环境中，而不显示在Windows或移动设备上

更新 在Windows浏览器（未加载应用程序，仅加载背景图片）的控制台上，我出现了错误：

Uncaught TypeError: Cannot read property 'apply' of undefined

此错误并未在实际运行的Ubuntu内部的浏览器中显示。我正在对此进行调查

---

我正在将Oracle VM VirtualBox与Debian Ubuntu OS一起使用来开发此MERN应用程序。我把它推到了Heroku。 日志没有任何错误消息，并且网站在virtualbox内正常打开。

但是在我的Windows浏览器上，它仅显示背景图像（略有失真），并且当我尝试在移动设备上访问它时也是如此。

到目前为止，我有很多错误，最初我的应用在技术上是“有效的”，但是 我发现屏幕上的Cannot get /错误实际上可以正常工作，但只显示了应用程序的后端一半（我通过进入Express中已设置的URL进行了测试，并且数据在那里）

因此，我安装了cors和path（跟随另一个stackoverflow帖子）并配置了server.js，现在它可以正常工作了。但是我不确定是什么问题。

应用程序的结构是，在根目录中，我有我需要的任何后端东西（server.js文件，路由，模型，模块等），包括目录/ client，这是React前端应用程序所在的位置。

我的server.js文件

const mongoose = require('mongoose');
const express = require('express');
const app = express();
const config = require('config');
const cors = require('cors');
const path = require('path');

// Middleware
app.use(express.json());

// DB Config
// You can get all your config/ values with config.get('')
const db = config.get('mongoURI');

// Connect to MongoDB
mongoose
    .connect(process.env.URI || db,{ 
        useNewUrlParser: true,useUnifiedTopology: true,useCreateIndex: true
    })
    .then(() => console.log("Connected to MongoDB.."))
    .catch(err => console.log(err));

// Available Routes
const tournaments = require('./routes/api/tournaments');
const users = require('./routes/api/users');
// Use Routes
app.use(cors());
app.use('/tournaments',tournaments);
app.use('/users',users);

// For Heroku deployment
if(process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname,'client','build')));
    app.get('*',(req,res) => {
        res.sendFile(path.join(__dirname,'build','index.html'))
    });
};

// Run Server
const port = process.env.PORT || 5000;
app.listen(port,() => console.log(`Server started on port: ${port}`));

我的package.json

{
  "name": "smash-hosting","version": "1.0.0","description": "","engines": {
    "node": "12.16.2"
  },"main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","client-install": "cd client && npm install","start": "node server.js","server": "nodemon server.js","client": "cd client && npm start","dev": "concurrently \"npm run server\" \"npm run client\"","heroku-postbuild": "cd client && npm install && npm run build"
  },"keywords": [],"author": "","license": "ISC","dependencies": {
    "bcryptjs": "^2.4.3","concurrently": "^5.0.0","config": "^3.2.4","cors": "^2.8.5","express": "^4.17.1","jsonwebtoken": "^8.5.1","moment": "^2.26.0","mongoose": "^5.7.12","nodemon": "^1.19.4","path": "^0.12.7","react-icons": "^3.10.0","react-tournament-bracket": "^0.2.4"
  },"devDependencies": {
    "nodemon": "^1.19.4"
  }
}

解决方法

服务器似乎正在运行，但无法使客户端连接。 Bash命令&&（和）在Windows中不起作用。替换为单个&运算符。

,

解决了问题！

问题显然与Redux有关。我在浏览器中注意到我的应用无法正确呈现，控制台中出现错误： Uncaught TypeError: Cannot read property 'apply' of undefined

这导致我进入https://github.com/reduxjs/redux/issues/2359，那里有许多解决方案。

最终，从redux存储中删除REDUX_EXTENSION_TOOLS代码使myoku应用程序可以在包括手机在内的不同浏览器上正确呈现。

store.js文件：

import { createStore,applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(
    rootReducer,initialState,compose(
        applyMiddleware(...middleware)
        // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);
export default store;