江城子

React项目从构建到上线全过程

React项目从构建到上线全过程

创建项目

早期的项目多用gulp去构建打包上传,
如今的react项目一般都会使用webpack去构建启动

在此先推荐几个优秀的脚手架

ouxu的脚手架包括2个react-dva脚手架,2个react-router脚手架

xinzai的脚手架具有路由表功能

上传项目

手动部署

通过webpack的配置进行项目打包生成dist文件,

再用scp命令上传至服务器

1
2
3
4
5
scp local_file remote_username@remote_ip:remote_folder 
 
scp local_file remote_ip:remote_folder 
 
scp local_file remote_ip:remote_file

自动化部署 – fjpublish

安装了node.js6.0+及以上的之后，使用一个命令即可完成fjpublish的安装

1
npm install fjpublish -g

-g是可选的全局安装，为了以后使用方面建议直接-g

注意: fjpublish依赖一份配置文件，默认是fjpublish.config.js，如果不想在版本库中提交服务器安全信息，请千万记得把它加入忽略文件中，如.gitignore

下面给给出一份最简形式的文件以供大家参考

fjpublish.config.js

1
2
3
4
const config = require('./pushConfig')
module.exports = {
  modules: config.fjPublish.modules
}

pushConfig.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  fjPublish: {
    modules: [{
      name: '生产环境',
      env: 'prod',  //自选的一个命令
      ssh: {
        host: '',     // 服务器地址
        port: 22,                 // 端口
        username: '',         // 用户名
        password: ''          // 密码
      },
      buildCommand: 'build',    // 构建命令  === npm run build
      localPath: './dist',            // 构建后上传文件
      remotePath: ''       // 服务端路径
    }]
  }
}

在项目文件目录下输入命令

1
fjpublish env prod

即可完成整个项目的打包上线和发布

服务器改动

以nginx启动的服务器为例

进入nginx所在目录的conf.d或者sites-enabled文件夹下编写nginx配置文件

区别在于conf.d下的文件必须以.conf结尾,而且服务器优先解析conf.d文件夹下文件

下面给出最简单的nginx配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
server {
        listen 80;
        #listen [::]:80 default_server ipv6only=on;

        root /前端代码上传地址;
        index index.html index.htm;

        # Make site accessible from http://localhost/   //如果没有域名可以通过此配置ip的访问端口进行多个项目的区分
        server_name http://你配置的域名(如果有二级域名记得在服务商的控制台上添加解析)

        location / {
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
               
        }
}

完成配置文件后输入命令

1
sudo nginx -s reload

重启nginx服务

项目优化（可选）

react构建的项目一般都会很大,为了提高访问速度，可以配置CDN对项目进行加速

这里使用七牛云CDN

首先安装七牛云插件

1
npm install qiniu-webpack-plugin

创建webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const QiniuPlugin = require('qiniu-webpack-plugin')
const {qiniu} = require('./pushConfig')

module.exports = function (webpackConfig, env) {
    if (env !== 'production') {} else {
        webpackConfig.plugins.push(
            new QiniuPlugin({
                ACCESS_KEY: '',
                SECRET_KEY: '',
                bucket: '',
                path: ''
            })
        )
    }
    return webpackConfig
}

修改pushConfig.js文件,添加

1
2
3
4
5
6
qiniu: {
     ACCESS_KEY: '从七牛控制台查询',
     SECRET_KEY: '从七牛控制台查询',
     bucket: '从七牛控制台查询',
     path: '自定义（形如 'FRONT/'）'
   },

.roadhogrc文件

修改

1
publicpath:'七牛给的域名/path'

补充

如果使用fjpublish发布修改后的项目，无需再重启服务器服务等操作

本站总访问量次