记录react项目的上线和发布

项目地址: React电商后台管理系统
自动发布脚本: shell脚本自动发布react项目
Nginx配置: Nginx虚拟主机配置

1. 总体流程

1.1 增加上线需要的适配代码

(1) 静态资源需要单独的静态域名, 例如: s.xxx.com, 所以需要在代码里增加对环境的判断
(2) 开发人员提交pull request请求
(3) 管理员审核,通过后合并到master分支上

1.2 生产环境配置

(1) 安装NodeJs: 作为一些工具的依赖环境
(2) 安装Yarn : 用来在线上安装依赖包
(3) 安装Git: 安装后配置权限 把我们的代码从远程仓库拉下来
(4) 安装Nginx: 作为请求的反向代理, 有了它可以让几种类型的文件和服务共用一个80端口

1.3 代码发布

(1) 拉取最新的master分支上的代码
(2) 通过yarn做初始化
(3) 执行线上环境的打包编译, dist目录下就是打包后的项目
(4) 复制dist目录到目标目录

1.4 Nginx和域名配置

通过Nginx把静态文件和数据接口分布到不同的位置

(1) Nginx中vHost的配置: Nginx对域名的处理方式, 配置完后服务器就能处理发过来的请求了
(2) 通过指定hosts的方式做线上回归测试(本地配置host)
(3) 更改域名解析: 外网通过域名访问, 不用指定host了

2. 适配代码

// webpack.config.js 部分关键代码
let WEBPACK_ENV= process.env.WEBPACK_ENV || 'dev';

module.exports = {
  output: {
    publicPath: WEBPACK_ENV === 'dev' ? '/dist/' : '//s.jianliwu.com/mmall/dist/'
  },

package.json