如何部署前端页面而不影响使用
如何部署前端页面而不影响使用
最近在部署多机前端项目的时候遇到了很坑爹的问题,因为是多机部署,当部署完一台机器后,另一台机器还是原来的部署资源,因为是通过负载均衡请求的,会导致请求会出现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;
}
}
到此配置完毕,每次自需要启动打包脚本即可。