React + 二级目录 + Nginx配置

背景： 由于子域名有限，我们需要将不同的前端项目进行二级目录区分。

一、项目

现有三个项目：
bsrm-web-manage
bsrm-web-operator
bsrm-web-testingorganization

二、期望访问路径

http://bsrm.life.com/bsrm-web-manage
http://bsrm.life.com/bsrm-web-operator
http://bsrm.life.com/bsrm-web-testingorganization

三、React 配置

1. webpack.default.js

添加publicPath

output: {
	// ...
	publicPath: process.env.NODE_ENV === "development" ? '/' : '/bsrm-web-manage'
},

output: {
	// ...
	publicPath: process.env.NODE_ENV === "development" ? '/' : '/bsrm-web-operator'
},

output: {
	// ...
	publicPath: process.env.NODE_ENV === "development" ? '/' : '/bsrm-web-testingorganization'
},

2. index.jsx

<BrowserRouter>标签中，添加 basename

export default function App(){ 
    return (
        <ConfigProvider locale={zhCN}>
            <BrowserRouter basename={process.env.NODE_ENV === "development" ? '' : '/bsrm-web-manage/'}>
                <RoutesWrapper routes={baseRoutes}/>
            </BrowserRouter>
        </ConfigProvider>
    )
}

export default function App(){ 
    return (
        <ConfigProvider locale={zhCN}>
            <BrowserRouter basename={process.env.NODE_ENV === "development" ? '' : '/bsrm-web-operator/'}>
                <RoutesWrapper routes={baseRoutes}/>
            </BrowserRouter>
        </ConfigProvider>
    )
}

export default function App(){ 
    return (
        <ConfigProvider locale={zhCN}>
            <BrowserRouter basename={process.env.NODE_ENV === "development" ? '' : '/bsrm-web-testingorganization/'}>
                <RoutesWrapper routes={baseRoutes}/>
            </BrowserRouter>
        </ConfigProvider>
    )
}

四、Nginx配置

location /bsrm-web-manage/ {
	alias /var/www/dev/fe/bsrm-web-manage/dist/;
	try_files $uri /bsrm-web-manage/index.html:
}

location /bsrm-web-operator/ {
	alias /var/www/dev/fe/bsrm-web-operator/dist/;
	try_files $uri /bsrm-web-operator/index.html:
}

location /bsrm-web-testingorganization/ {
	alias /var/www/dev/fe/bsrm-web-testingoraanization/dist/;
	try_files $uri /bsrm-web-testingorganization/index.html:
}