阿里云ecs云服务器——craco+react项目部署（2）

这篇文章是在阿里云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对象进行配置