当我们把一个项目部署上线时候，只需要把前端代码放到服务器，然后添加nginx配置即可;
build文件结构如下：
image.png
nginx添加如下配置即可
location / {
root $root/build;
gzip_static on;
try_files $uri $uri/ /index.html =404;
proxy_set_header Access-Control-Allow-Origin *;
add_header Cache-Control no-cache;
}
但是当我们现在的项目作为二级域名访问时候，我们不仅需要在<Router>中添加basename，还要对静态资源进行代理，我们打包时候，静态资源默认到/static文件夹中，这样当我们部署多个时候，static也会重复，所以我们需要把不同项目的静态打包到不同文件夹下。
具体思路如下
-
public文件中添加config.js，config中包含basename: '/xxxx'的配置 -
index.tsx中的<Router basename="xxxx"> - 把静态资源打包到
xxxx_static文件夹中
- 使用
output中的filename和chunkFilename修改js路径 - 使用
plugin中的MiniCssExtractPlugin修改css路径 - 使用
output.assetModuleFilename和mudule.rules修改media路径 - 使用
FileManagerPluginmoveconfig.js到/build文件夹中
/public/config.js
window.__GLOBAL_RUNTIME__ = {
...
baseName: '/xxxx',
}
/src/index.tsx
...
<Router basename={`${baseName}`}>
...
craco.config.js
...
// 添加配置
const { whenProd } = require('craco')
const FileManagerPlugin = require('filemanager-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const STATIC_NAME = 'xxxx_static'
if (process.env.NODE_ENV === 'production') process.env.PUBLIC_URL = `/${STATIC_NAME}`
module.exports = {
...,
webpack: {
configure: (config, {env}) => {
...
// 修改 js 路径
config.output.filename = `${STATIC_NAME}/js/[name].[contenthash:8].js`
config.output.chunkFilename = `${STATIC_NAME}/js/[name].[contenthash:8].chunk.js`
// 修改 css 路径
config.plugins = config.plugins.map((plugin) => {
whenProd(() => {
if (plugin instanceof MiniCssExtractPlugin) {
Object.assign(plugin.options, {
filename: `${STATIC_NAME}/css/[name].[contenthash:8].css`,
chunkFilename: `${STATIC_NAME}/css/[name].[contenthash:8].chunk.css`,
})
}
})
return plugin
})
// 修改 media 路径
config.output.assetModuleFilename = `${STATIC_NAME}/media/[name].[contenthash:8].[ext]`
config.module.rules = config.module.rules.map((rule) => {
if (rule.oneOf) {
rule.oneOf = rule.oneOf.map((oneOfRule) => {
if (oneOfRule.use) {
oneOfRule.use.forEach(useItem => {
if (useItem.options && useItem.options.name) {
useItem.options.name = `${STATIC_NAME}/media/[name].[contenthash:8].[ext]`
}
})
}
return oneOfRule;
});
}
return rule
})
// copy其他静态资源到 static_name文件中
onfig.plugins.push(
new FileManagerPlugin({
events: {
onEnd: {
move: [
{ source: 'build/config.js', destination: `build/${STATIC_NAME}/config.js` },
....
]
}
}
})
)
// publicPath为 /
env === 'production' && (config.output.publicPath = '/')
...
return config
);
}
}
}
nginx 配置
location /xxxx {
root $root/build;
gzip_static on;
try_files $uri $uri/ /index.html =404;
proxy_set_header Access-Control-Allow-Origin *;
add_header Cache-Control no-cache;
}
location /xxxx_static {
alias $root/build/xxxx_static;
gzip_static on;
try_files $uri $uri/ /index.html =404;
proxy_set_header Access-Control-Allow-Origin *;
add_header Cache-Control no-cache;
}
这样我们就可以在 http://xxxxx/xxxx正常访问我们的项目了，如果需要修改 xxxx为abcd，我们只需要修改config.js中的baseName和nginx配置即可，即使部署多了，我们的 static 资源也不会重复；
