Reactjs 从Nginx代理访问React应用程序的正确方式是什么

我写了一个React应用程序，我想让它作为部署在Web Nginx服务器上的应用程序可以访问，该应用程序在Reat应用程序上有一个链接。为此，我在Nginx中配置了一个反向代理。我的问题是，当我通过链接调用Node/React应用程序时，我只看到一个白色页面，如果我直接调用Node/React应用程序，所有这些都可以在浏览器中完美工作。 见下文：

package.json（服务器）

index.js（服务器）

package.json（客户端）

index.js（客户端）

在浏览器控制台中，我收到以下警告：

Loading failed for the <script> with source “https://snapmed.ca/static/js/main.cfe29440.js”.

为具有源的加载失败”https://snapmed.ca/static/js/main.cfe29440.js”.

---

有没有想过为什么我只得到一个白色页面？

对于React应用程序的nginx部署，您不应该使用

npm start

。使用

npm run build

将React应用程序转换为静态文件，然后简单地将nginx指向该目录。一旦构建，您就不再需要使用

npm start

npm start

用于部署本地开发服务器。开发服务器在您开发时监视文件更改，以便它可以重新加载页面以响应更改。这与应用程序的nginx部署无关

npm run build

连接、捆绑并以其他方式优化您的文件，以便部署到真正的服务器上，而不是开发服务器上。捆绑后，开发服务器就不需要运行了——静态文件本身就具有对彼此的所有正确引用，并且不再需要在文件更改时重新加载live文件

---

看起来您当前正在将nginx服务器指向开发服务器（端口5000）。你不应该这样做。您的nginx服务器应该直接指向内置React应用程序所在的目录（通常将

build

目录添加到运行

npm run build

的同一目录）。您可以使用

root

关键字而不是代理关键字将nginx指向此目录。

Hi@Charkes，React应用程序必须在节点中运行。否，React应用程序不需要在节点中运行。createreact应用程序的开发人员环境使用节点进行实时重新加载。生产构建使用静态平面文件，这些文件将由nginx等服务器交付。面向生产的React应用程序绝对不需要节点，使用节点会带来不必要的节点开销，从而降低分发的质量。使用

npm运行build

，它将输出一个带有静态文件的

/build/

目录。这些是您应该指向nginx的文件，而不是节点开发端口。

const express = require("express");
const app = express();
const keys = require('./config/Keys');
const mongoose = require("mongoose");
require('./models/User');
require('./models/Profile');
mongoose.connect(keys.mongoURI);
const User =  mongoose.model('users');

 app.use(express.static('client/build'));
  const path = require('path');
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname,'client', 'build', 'index.html'));
  });

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "proxy": {
    "/api/*": {
      "target": "http://localhost:5000"
    }
  },
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0"
  },
  "scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

import materializeCSS from 'materialize-css/dist/css/materialize.min.css';  
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
const store = createStore(() => [], {}, applyMiddleware(reduxThunk));

   ReactDOM.render(
   <Provider store={store}><App/></Provider>,
    document.querySelector('#root'));

            proxy_pass http://10.30.1.185:5000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }`

Loading failed for the <script> with source “https://snapmed.ca/static/js/main.cfe29440.js”.