node.js - 我的 MERN 应用程序仅适用于 Chrome。如何让它在所有浏览器和设备上运行？

Question

我在 Digital Ocean 上部署了一个带有 Redux 的 MERN 应用程序，Ubuntu 18.04 Droplet 应该完全部署，但它只能在我的 Chrome 浏览器中运行。我认为它可能只是因为 Chrome 浏览器有 Redux 扩展而起作用，但我不知道。
我已经成功地在 Digital Ocean Droplet 上部署了一个后端与此类似的 React 应用程序，但它没有 MongoDB 或 Redux。我安装了 MongoDB 和 Redux 应该可以很好地安装其他所有东西，所以我不知道问题是什么。当站点在 Chrome 浏览器中打开时，Mongo 和 Redux 工作得很好。我提出它是因为如果您知道在将 Mongo 和 Redux 添加到 Droplet 上的应用程序时需要进行调整，您可以共享该信息，这样您就不必筛选下面的所有数据。
当我在 iPhone 上访问该网站时，它不显示任何内容。
如果我在 Firefox 中访问该站点，则会加载该站点的图标，但屏幕为空白。在 Firefox 的控制台中，我看到了错误... Uncaught TypeError: t is undefined .我不知道这个错误来自哪里。当我访问该网站时，我从未在 Chrome 上看到它。
我不知道我是否需要做一些不同的事情来为“生产”部署应用程序。也许这与问题有关。
也许该错误与 Nginx 配置有关。这是我的 Nginx 默认文件...

# 159.203.45.100 is where I go to visit the site

server {
    listen 80;
    server_name 159.203.45.100;
    root /var/www/MERN_App/client/build;

    error_page 404 /index.html;

    location / {
        add_header Cache-Control no-cache;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $remote_addr;
        proxy_pass http://localhost:5002;
    }
}

这是我的 server.js文件。 (我有 pm2 处理它)

const express = require('express');
const bodyParser = require('body-parser');
const methodOverride = require('method-override');
const path = require('path');
const app = express();
const jwt = require('jsonwebtoken')
const config = require('config')

// Middleware
app.use(bodyParser.json());
app.use(methodOverride('_method'));
app.use(express.urlencoded({ extended: true }));

app.use(function (req, res, next) {

  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true);
  // Pass to next layer of middleware
  next();
});

// Use Routes
app.use('/api/items', require('./routes/api/items'));
app.use('/api/users', require('./routes/api/users'));
app.use('/api/auth', require('./routes/api/auth'));
app.use('/api/comments', require('./routes/api/comments'));

if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

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

这是 pm2 show 0显示...

    $ pm2 show 0
    Describing process with id 0 - name server 
    ┌───────────────────┬────────────────────────────────────────┐
    │ status            │ online                                 │
    │ name              │ server                                 │
    │ namespace         │ default                                │
    │ version           │ 1.0.0                                  │
    │ restarts          │ 0                                      │
    │ uptime            │ 3h                                     │
    │ script path       │ /var/www/MERN_App/server.js            │
    │ script args       │ N/A                                    │
    │ error log path    │ /home/sammy/.pm2/logs/server-error.log │
    │ out log path      │ /home/sammy/.pm2/logs/server-out.log   │
    │ pid path          │ /home/sammy/.pm2/pids/server-0.pid     │
    │ interpreter       │ node                                   │
    │ interpreter args  │ N/A                                    │
    │ script id         │ 0                                      │
    │ exec cwd          │ /var/www/MERN_App                      │
    │ exec mode         │ fork_mode                              │
    │ node.js version   │ 10.22.0                                │
    │ node env          │ N/A                                    │
    │ watch & reload    │ ✘                                      │
    │ unstable restarts │ 0                                      │
    │ created at        │ 2020-08-06T20:33:15.884Z               │
    └───────────────────┴────────────────────────────────────────┘
    Revision control metadata 
    ┌──────────────────┬────────────────────────────────────────────────┐
    │ revision control │ git                                            │
    │ remote url       │ https://github.com/MotorCityCobra/MERN_App.git │
    │ repository root  │ /var/www/MERN_App                              │
    │ last update      │ 2020-08-06T20:29:37.883Z                       │
    │ revision         │ 2613e5273955e382a6fd08d023ba1f403d9a3daf       │
    │ comment          │ first commit                                   │
    │ branch           │ master                                         │
    └──────────────────┴────────────────────────────────────────────────┘
    Actions available 
    ┌────────────────────────┐
    │ km:heapdump            │
    │ km:cpu:profiling:start │
    │ km:cpu:profiling:stop  │
    │ km:heap:sampling:start │
    │ km:heap:sampling:stop  │
    └────────────────────────┘
    Trigger via: pm2 trigger server <action_name>

    Code metrics value 
    ┌────────────────────────┬───────────┐
    │ Heap Size              │ 33.25 MiB │
    │ Heap Usage             │ 84.57 %   │
    │ Used Heap Size         │ 28.12 MiB │
    │ Active requests        │ 0         │
    │ Active handles         │ 13        │
    │ Event Loop Latency     │ 0.84 ms   │
    │ Event Loop Latency p95 │ 4.93 ms   │
    │ HTTP Mean Latency      │ 30 ms     │
    │ HTTP P95 Latency       │ 57 ms     │
    │ HTTP                   │ 0 req/min │
    └────────────────────────┴───────────┘
    Divergent env variables from local env 
    ┌────────────────┬──────────────────────┐
    │ SSH_CONNECTION │ 75.118.134.38 37152  │
    │ XDG_SESSION_ID │ 23                   │
    │ PWD            │ /var/www/MERN_App    │
    │ SSH_CLIENT     │ 75.118.134.38 37152  │
    │ SSH_TTY        │ /dev/pts/0           │
    └────────────────┴──────────────────────┘

    Add your own code metrics:
    Use `pm2 logs server [--lines 1000]` to display logs
    Use `pm2 env 0` to display environment variables
    Use `pm2 monit` to monitor CPU and Memory usage server

这是我的 package.json对于服务器...

{
  "name": "meme_hole",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "build": "npm install && npm install --prefix client && npm audit fix && npm audit fix --prefix client && npm run build --prefix client",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "concurrently": "^4.1.2",
    "config": "^3.3.1",
    "connect-flash": "^0.1.1",
    "express": "^4.17.1",
    "gridfs-stream": "^1.1.1",
    "jsonwebtoken": "^8.5.1",
    "method-override": "^3.0.0",
    "mongoose": "^5.9.22",
    "multer": "^1.4.2",
    "multer-gridfs-storage": "^3.3.0",
    "prop-types": "^15.7.2",
    "react-infinite-scroll-component": "^4.5.3",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "serve-index": "^1.9.1",
    "stripe": "^8.81.0",
    "uuid": "^3.4.0"
  },
  "devDependencies": {
    "nodemon": "^1.19.4"
  }
}

我的Mongo版本...

$ mongo --eval 'db.runCommand({ connectionStatus: 1 })'
MongoDB shell version v3.6.3
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.6.3
{
    "authInfo" : {
        "authenticatedUsers" : [ ],
        "authenticatedUserRoles" : [ ]
    },
    "ok" : 1
}

我的 Node 版本是 v10.22.0我相信我已经通过最佳实践安装了所有东西。
我在构建所在的目录上运行了这些...

sudo gpasswd -a "$USER" www-data
sudo chown -R "$USER":www-data /var/www
find /var/www -type f -exec chmod 0660 {} \;
sudo find /var/www -type d -exec chmod 2770 {} \;

我遵循了 Digital Ocean 提供的所有指南来设置服务器和其他一切。
Initial Server Setup with Ubuntu 18.04
How To Install Nginx on Ubuntu 18.04
How To Install Node.js on Ubuntu 18.04
How to Install MongoDB on Ubuntu 18.04
感谢您的阅读!

Answer 1

我在边缘访问了该站点，但在我安装了扩展程序之前它没有工作，所以你是正确的，扩展程序正在使它工作。但我得到了一个不同的错误，Uncaught TypeError: Cannot read property 'apply' of undefined.看起来有一个 store.js 文件试图运行 const store = createStore(... 但是 createStore 是未定义的。
根据此链接，https://github.com/zalmoxisus/redux-devtools-extension/issues/320 ，您可以尝试添加window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose给您的store.js文件。
如果你把它添加到你已经拥有的东西中，你会得到这个:window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() || window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose));我想这使它在有和没有扩展的情况下运行。