[英]How to use proxy in production mode with npm like proxy parameter in package.json?
I think i need to explain a little bit more about my issue.我想我需要解释一下我的问题。 I have setup a react app and a typeorm backend.
我已经设置了一个React应用程序和一个typeorm后端。 In my react app i set the proxy parameter to 'localhost:3001' which is my backend.
在我的反应应用程序中,我将代理参数设置为“localhost:3001”,这是我的后端。 (my react app runs on 'localhost:3001').
(我的 React 应用程序在 'localhost:3001' 上运行)。 This works like a charm IN DEVELOPEMENT.
这就像开发中的魅力。 However when it comes to production (for example when i build my react app and serve it with
npm serve -l 3000
) i am forced to do the proxying myself.但是,当涉及到生产时(例如,当我构建我的 React 应用程序并使用
npm serve -l 3000
)我被迫自己进行代理。 I googled for this and i think the first few answers to this topic showed me that express is the way to go.我用谷歌搜索了这个,我认为这个话题的前几个答案告诉我快递是要走的路。 So i googled more and found a package called 'http-proxy-middleware' .
所以我用谷歌搜索了更多,找到了一个名为'http-proxy-middleware' 的包。
This is my code:这是我的代码:
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}`)
})
It works but not like i want it to.它有效,但不像我想要的那样。
When i make a call to 'http://localhost/api' it proxys to my backend.当我调用“http://localhost/api”时,它会代理到我的后端。
When i make a call to 'http://localhost/' it proxys to my react app.当我调用“http://localhost/”时,它会代理到我的 React 应用程序。
Now when i try to call 'http://localhost/db/home' for example it gives me an 404 Error (it should proxy to 'http://localhost:3000').现在,当我尝试调用“http://localhost/db/home”时,例如它给了我一个 404 错误(它应该代理到“http://localhost:3000”)。 I think it also has to do with the react dom router package that i use.
我认为这也与我使用的react dom 路由器包有关。 Because of that here is the content of my 'App.tsx':
因此,这里是我的“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;
Update更新
I also tried calling 'http://localhost:3000/db' in my Browser and this gives me also an 404. So i think it could also possibly be that my 'react-router-dom' code doesn't work.我还尝试在我的浏览器中调用“http://localhost:3000/db”,这也给了我一个 404。所以我认为也可能是我的“react-router-dom”代码不起作用。
So i found the problem myself.所以我自己发现了问题。 I had the feeling that it has something to do with the react app it self.
我有一种感觉,它与 React 应用程序本身有关。 So i looked up the deployment section under the create-react-app-website and i found out that i used the
serve -l 3000
command in build directory to host my frontend.所以我查看了create-react-app-website下的部署部分,我发现我在构建目录中使用了
serve -l 3000
命令来托管我的前端。 Then i saw in the documentation that i should use serve -s build -l 3000
outside of my build directory to serve it correctly.然后我在文档中看到我应该在构建目录之外使用
serve -s build -l 3000
来正确地提供它。 Thanks also to @eol's answer as it probably would be the next thing that might had helped if it wasn't the problem that i had with serve.还要感谢@eol 的回答,因为如果不是我在发球时遇到的问题,它可能是下一件可能有所帮助的事情。
Also if your'e problem was the same as mine (with serve
) you just need to use a middleware proxy with '/' put no one with '*'.此外,如果您的问题与我的相同(使用
serve
),您只需要使用带有“/”的中间件代理,不要使用“*”。 So it would look like this:所以它看起来像这样:
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}`)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.