如何在 package.json 中使用 npm like proxy 参数在生产模式下使用代理？

Question

我想我需要对我的问题做更多的解释。我已经设置了一个 react app and a typeorm 后端。在我的 React 应用程序中，我将代理参数设置为 'localhost:3001' 这是我的后端。（我的 React 应用程序在 'localhost:3001' 上运行）。这就像开发中的魅力一样。但是，当涉及到生产时（例如，当我构建我的 React 应用程序并使用 npm serve -l 3000 为其提供服务时），我不得不自己进行代理。我在谷歌上搜索了这个，我认为这个主题的前几个答案告诉我快递是要走的路。所以我在谷歌上搜索了更多，发现了一个名为 'http-proxy-middleware'.

的包

这是我的代码：

const { createProxyMiddleware } = require('http-proxy-middleware')
var app = require('express')();
const port = 80;

var apiProxy = createProxyMiddleware('/api', { target: 'http://localhost:3001' });
var normalProxy = createProxyMiddleware('/', { target: 'http://localhost:3000' });

app.use(apiProxy);
app.use(normalProxy);

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

它有效，但不像我想要的那样。
当我调用 'http://localhost/api' 它代理到我的后端。
当我打电话给 'http://localhost/' 时，它会代理我的 React 应用程序。
现在，当我尝试调用 'http://localhost/db/home' 时，它会给我一个 404 错误（它应该代理到 'http://localhost:3000'）。我认为这也与我使用的 react dom router 包有关。因此，这是我的 'App.tsx':

的内容

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.css';
import './App.scss';
import MainTab, { IMainTabProps } from './staticTabs/MainTab/MainTab';
import { MainTab as DBMainTab } from './dashboardTabs/MainTabs/MainTab/MainTab';
import Tab404 from './staticTabs/Tab404/Tab404';
import StaticTabsLayout from './staticTabs/StaticTabsLayout';
import DashboardTabsLayout from './dashboardTabs/DashboardTabsLayout';
import Profile from './dashboardTabs/MainTabs/Profile/Profile';
import Settings from './dashboardTabs/MainTabs/Settings/Settings';

function App() {
  return (
    <Router>
      <Switch>
          <Route path="/db/home">
            <DashboardTabsLayout>
              <DBMainTab />
            </DashboardTabsLayout>
          </Route>
          <Route path="/db/me">
            <DashboardTabsLayout>
              <Profile />
            </DashboardTabsLayout>
          </Route>
          <Route path="/db/settings">
            <DashboardTabsLayout>
              <Settings />
            </DashboardTabsLayout>
          </Route>
          <Route path="/db/">
            <DashboardTabsLayout>
              <DBMainTab />
            </DashboardTabsLayout>
          </Route>
          <Route path="/index.html">
            <StaticTabsLayout>
              <MainTab />
            </StaticTabsLayout>
          </Route>
          <Route path="/verify/:UserID/:VerifyID" component={(props: JSX.IntrinsicAttributes & JSX.IntrinsicClassAttributes<MainTab> & Readonly<IMainTabProps> & Readonly<{ children?: React.ReactNode; }>) => <StaticTabsLayout><MainTab verify={true} {...props} /></StaticTabsLayout>} />
          <Route exact path="/">
            <StaticTabsLayout>
              <MainTab />
            </StaticTabsLayout>
          </Route>
          <Route component={Tab404} />
      </Switch>
    </Router>
  );
}

export default App;

更新
我还尝试在我的浏览器中调用 'http://localhost:3000/db'，这也给了我一个 404。所以我认为也可能是我的 'react-router-dom' 代码不起作用。

Answer 1

所以我自己发现了问题。我觉得它与它自己的 React 应用程序有关。所以我查找了 deployment section under the create-react-app-website，发现我在构建目录中使用了 serve -l 3000 命令来托管我的前端。然后我在文档中看到我应该在我的构建目录之外使用 serve -s build -l 3000 来正确地提供它。还要感谢 @eol's answer，因为如果这不是我在 serve 上遇到的问题，它可能是下一个可能有用的东西。

此外，如果您的问题与我的相同（serve），您只需要使用带有“/”的中间件代理，不要使用“*”。所以它看起来像这样：

const { createProxyMiddleware } = require('http-proxy-middleware')
var app = require('express')();
const port = 80;

var apiProxy = createProxyMiddleware('/api', { target: 'http://localhost:3001' });
var frontendProxy = createProxyMiddleware('/', { target: 'http://localhost:3000' });

app.use(apiProxy);
app.use(frontendProxy);

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

如何在 package.json 中使用 npm like proxy 参数在生产模式下使用代理？

How to use proxy in production mode with npm like proxy parameter in package.json?

proxy

node.js

express

reactjs

react-router