前端高性能部署应用

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

最近在部署多机前端项目的时候遇到了很坑爹的问题，因为是多机部署，当部署完一台机器后，另一台机器还是原来的部署资源，因为是通过负载均衡请求的，会导致请求会出现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 [email protected] "mkdir ${deploy_dir}/dist/$1/$version";
scp -r ${deploy_dir}/dist/$1/$version [email protected]:${deploy_dir}/dist/$1;  #>/dev/null 2>&1

#机器2
ssh [email protected] "mkdir ${deploy_dir}/dist/$1/$version";
scp -r ${deploy_dir}/dist/$1/$version [email protected]:${deploy_dir}/dist/$1;  #>/dev/null 2>&1

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

#当前机器
ln -sf ${deploy_dir}/dist/$1/$version /deploy/static/www/$1;

#机器1
ssh [email protected] "ln -sf ${deploy_dir}/dist/$1/$version /deploy/static/www/$1";

#机器2
ssh [email protected] "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;
    }
  
}

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