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

Question

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

package.json（服务器）

{
  "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 反向代理

`位置/反应{

            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”.

任何想法为什么我只得到一个白页？

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 指向此目录。