这篇文章是在阿里云ecs云服务器——Vue项目部署(1)的基础上部署另一个React项目的后续
注:一般的react项目打包部署过程和这篇文章是一致的。
本地打包
为了使用less并且不破坏webpack配置(不使用 npm run eject),我使用了craco配置的方式,这样在本地打包的时候需要修改原来的打包命令(react-scripts build)为craco build
,否则会导致样式失效问题,修改craco.config.js文件如下(包含了添加less的配置):
const CracoLessPlugin = require('craco-less');
module.exports = {
configure: (webpackConfig, { env, paths }) => {
paths.appBuild = 'build';
webpackConfig.output = {
...webpackConfig.output,
path: path.resolve(__dirname, 'build'),
publicPath: './'
}
return webpackConfig;
},
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#656eb6' },
javascriptEnabled: true,
},
},
},
},
],
}
部署
部署的整体流程和vue部署一致,只是如果在已有一个部署项目的时候,需要在nginx.conf中再添加一个新的server对象进行配置