前端高性能部署应用

桃扇骨 2022-04-11 10:10 134阅读 0赞

### 如何部署前端页面而不影响使用 ###

*  如何部署前端页面而不影响使用
 *   *   *   *   *  1、首先代码部署不再本地打包，而是通过git版本管理将源码部署到其中一台机器上，这样每次更新只需要更改一部分资源就可以。
                 *  2、代码部署采用线上打包的方式，每次打包加版本号路径，这样就算打包了也不会影响当前线上使用
                 *  3.将代码scp到其他机器上
                 *   *  4.配置软连接，将部署路径软连接到某个位置
                 *  5.将nginx根路径配置到软连接

# 如何部署前端页面而不影响使用 #

最近在部署多机前端项目的时候遇到了很坑爹的问题，因为是多机部署，当部署完一台机器后，另一台机器还是原来的部署资源，因为是通过负载均衡请求的，会导致请求会出现404，这个问题一直持续了很久，开始我的思路是先把静态资源手动部署上去，最后再传递前端页面，这样是解决了404问题，但是另一个问题又出现了，每次都需要手动上传打包代码，非常浪费时间，尤其是项目多了以后，很容易出错。经过这几天的努力学习，找到你了一个很好的方法：

##### 1、首先代码部署不再本地打包，而是通过git版本管理将源码部署到其中一台机器上，这样每次更新只需要更改一部分资源就可以。 #####

git  fetch;
    git  reset --hard  origin/master;
    git pull; 
    ....... 此处省略

##### 2、代码部署采用线上打包的方式，每次打包加版本号路径，这样就算打包了也不会影响当前线上使用 #####

打包脚本

$1=xxx.com;
    version=`date '+%Y%m%d%H%M%S'`;
    echo 'version:'+$version;
    echo "exports.project = '"$1"';exports.version = '"$version"';" >'./webpack/build/project.js';
    ....... 此处省略

生成项目配置build/project.js

exports.project = 'xxx.com';
    exports.version = '2018-12-05 11:57:49';

webpack输出配置

const baseWebpackConfig = require('./webpack.config.base');
    const { project ,version} = require('../build/project');
    module.exports = merge(baseWebpackConfig, {
    	mode: 'production',
    	output: {
    			publicPath: './',
    			path: resolve('../dist/' + project+'/'+version),
    			filename: 'static/[name]-[hash].js?ver=[hash]',
    			chunkFilename: 'static/routes/[name]-[hash].chunk.js?[chunkhash:10]' // 按需加载输出的文件名
    		}
    		....... 此处省略
        }
    )

##### 3.将代码scp到其他机器上 #####

deploy_dir="/deploy/static/web-all";
    
    #机器1
    ssh xxx@192.168.0.105 "mkdir ${deploy_dir}/dist/$1/$version";
    scp -r ${deploy_dir}/dist/$1/$version xxx@192.168.0.105:${deploy_dir}/dist/$1;  #>/dev/null 2>&1
    
    #机器2
    ssh xxx@192.168.0.106 "mkdir ${deploy_dir}/dist/$1/$version";
    scp -r ${deploy_dir}/dist/$1/$version deploy@192.168.0.106:${deploy_dir}/dist/$1;  #>/dev/null 2>&1

###### 4.配置软连接，将部署路径软连接到某个位置 ######

#当前机器
    ln -sf ${deploy_dir}/dist/$1/$version /deploy/static/www/$1;
    
    #机器1
    ssh deploy@192.168.0.105 "ln -sf ${deploy_dir}/dist/$1/$version /deploy/static/www/$1";
    
    #机器2
    ssh deploy@192.168.0.106 "ln -sf ${deploy_dir}/dist/$1/$version /deploy/static/www/$1";

##### 5.将nginx根路径配置到软连接 #####

server
    {
        server_name xxx.com;
        listen 80;
        gzip on;
        gzip_min_length 1k;
        gzip_buffers 16 64k;
        #gzip_http_version 1.0;
        gzip_comp_level 9;
        gzip_types text/plain  application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
        root /deploy/static/www/xxx.com;
        index index.html index.htm;
        location / {
        try_files $uri $uri/ =404;
        }
      
    }

到此配置完毕，每次自需要启动打包脚本即可。