上上周接手了一公司给的一个新项目的任务，使用react开发，框架和配置基于umirc.js，这里总结一下这段时间遇到的各种配置问题，以及新项目上线过程中的各种问题。
环境配置首先它存在有几个环境配置文件，类似于vue脚手架里边的.env.development这类的文件，而基于umirc的框架，它里边的名称叫做.umirc.dev.ts或.umirc.dev.js。
当我们npm run某一个命令，代码环境就会指向某个相应的环境配置文件，然后配置文件中的代码就会被执行，其实这部分很容易理解，大多数人也应该都知道。
那么这些配置文件中，一般可以写一些如publicPath、proxy代理、favicon图标指向地址等代码。
除了上边的几个环境配置文件，有一个.umirc.ts是一个全局的配置文件，也就是说不管走哪个运行打包命令都会走一个文件。
那么在这个文件里，我们一般会做一些打包的配置，个人理解有点像webpack.config.js、vue.config.js等，那么在这里边我们可以去控制不同环境下proxy的代理走向、资源打包使用的第三方服务器走向、打包文件是否加上hash、配置全局环境变量名称、控制路由、添加打包loader、plugins、添加代码兼容polyfill、图片压缩等。
因为到新公司，第一次接触新项目的上线，可以说是各种不懂，步步踩坑。主要坑点在于运维方面的各种配置，虽然不需要前端来做，但是一步一卡就很难受。
说简单其实也简单，因为是新项目，所以对于运维来说，只需要先在服务器下配置一个新的容器，之后把我们的代码放进去，接着运行我们的打包运行命令就可以（具体操作运维负责）。其实走完这一步如果没有问题，就可以算是上线成功了一大半了，但就是在这一步完成之后，我们就开始踩坑了。
cdn指向
首先是运维发现我们的cdn指向出现了问题，因为我们的项目是要部署到海外的，cdn应该指向海外的服务器地址，但是却发现运行之后cdn指向还是国内的。
于是我扒了一下代码，发现package.json里边还有一个build:hwonline，里边BUILD_ENV=hw，我就知道运维那边需要运行这个才可以让cdn根据环境判断逻辑指向海外地址。
资源服务器配置
cdn搞好了，我这边的项目相当于上线成功了，于是我打开我的线上项目地址开始测一下效果，却发现资源请求全部403，这个让我特别的郁闷，运维那边也有些郁闷，就开始排查问题。
这里说明一下，因为项目打包之后，各种资源要上传到相应的资源服务器，也就是oss，dev环境下我们使用了阿里云oss，其他环境下我们使用了s3服务器，也就是亚马逊的aws（Amazon Web Services），出现403也就是说明我们没有权限访问我们部署上去的资源。
在运维大哥那边一顿操作之后，甚至联系了人家海外服务器的客服，得出了结论，我们使用的资源桶、密钥以及密钥ID不是对应一套的，也就是我们把资源上传到了错误的容器，而与之对应的我们在去使用的时候拿的密钥是跟那边对不上的，所以给我们了403。
那没有办法，只能更改配置了，在一番波折之后，我们找到了这个项目应该使用的资源桶、密钥和密钥ID，再次运行，查看线上地址，终于可以看到页面了。
icon图标（上传资源拦截配置）
本以为万事大吉了，可结果却发现还有毛病，页面和接口都没有问题，但是页面icon图标却没有了，一脸懵逼。
这个时候已经在我旁边指导了好久的leader告诉我，说这个上传资源的拦截配置需要改一下，然后我看了一眼，其实这里就是一个正则的问题，和webpack里边的loader的正则一个意思，添加上ico的拦截就可以了。
重新上传了一下，终于好了。
以上，就是这次新项目上线的一些踩坑总结。
