从Nginx代理访问React App的正确方法是什么

Question

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

  

package.json（server）

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "9.8.0",
    "npm": "6.0.0"
  },
  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run start\" \"npm run client\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "mongoose": "^5.1.4",
    "nodemon": "^1.17.5"
  }
}

  

index.js（服务器）

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'));
  });

  

package.json（客户端）

{
  "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"
  }
}

  

index.js（客户端）

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'));

  

Nginix反向代理

`location / react {

            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;
        }`

在Browswer控制台中，我收到以下警告：

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

为什么我只得到一个白页？

Answer 1

您不应该使用npm start进行React应用的nginx部署。使用npm run build将您的React应用程序转换为静态文件，然后只需将nginx指向该目录。构建完成后，您不再需要使用npm start。

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

npm run build连接，捆绑和优化您的文件，以便在真实服务器上部署，而不是在开发服务器上部署。捆绑后，就不需要运行开发服务器了 - 静态文件本身就具有所有正确的引用，不再需要在文件更改时重新加载。

您好像正在将nginx服务器指向开发服务器（端口5000）。你不应该这样做。您的nginx服务器应该只指向构建的React应用程序所在的直接位置（通常会将build目录添加到运行npm run build的同一目录中）。您可以使用root关键字将nginx指向此目录，而不是使用代理关键字。