一、安装zip工具
打包前，因为要将打包后的压缩文件上传到服务器，在执行zip命令时需要有插件支持。如果执行zip命令时，报zip command not found信息，解决方案如下：
- 下载zip-3.0-bin.zip和bzip2-1.0.5-bin.zip压缩包；
- 解压压缩包并把zip-3.0-bin.zip解压后的bin文件夹下的zip.exe文件和bzip2-1.0.5-bin.zip解压后的bin文件夹下的bzip2.dll文件统一放在本地git安装目录下（可在Git Bash命令行通过where git命令查看git安装目录）；
二、脚本实现
实现步骤如下：
- 进入项目；
- 切换到要打包的分支，以master分支为例；
- 拉取最新代码；
- 执行打包命令；
- 将打包后的文件压缩；
- 将服务器原有dist文件进行备份；
- 将压缩文件上传至服务器对应nginx目录；
- 解压缩dist.zip文件；
- 重新启动nginx；
- 删除dist.zip文件；
具体的实现脚本（deploy_server.sh）：
#!/bin/bash# 进入项目目录echo "1.enter to program"cd e:program/XXX // 此处根据实际情况编写项目目录# 切换到master分支echo "2. switch to master"git checkout master# 从git拉取最新代码echo "3. pull latest code"git pull# 执行打包命令echo "4. start pack"npm run build // 此处根据实际情况编写打包命令# 压缩打包后的文件echo "5. compress dist"zip -r dist.zip ./dist/*# 服务器IPserver_ip='XXX.XXX.XXX.XXX' // 此处根据实际情况编写IP地址# 创建备份文件echo "6. backup dist"ssh -p 22 root@"${server_ip}" "sudo mv /usr/share/nginx/html/dist /usr/share/nginx/html/dist.$(date +%Y%m%d%H%M%S)" // 此处根据实际情况编写dist存放目录，后面涉及到dist目录同理# 将dist.zip迁移到dist目录echo "7. zip to server"scp -P 22 ./dist.zip root@"${server_ip}":/usr/share/nginx/html # 解压zipecho "8. unzip dist"ssh -p 22 root@"${server_ip}" "cd /usr/share/nginx/html && unzip dist.zip"# 重新启动nginxecho "9. restart nginx"ssh -p 22 root@"${server_ip}" "systemctl restart nginx"# 删除zip包echo "10. delete zip"ssh -p 22 root@"${server_ip}" "rm -rf /usr/share/nginx/html/dist.zip"执行：
- 尽管脚本强制切换到master分支，最好在运行脚本前手动切换到master，效果更直观；
- 找到一个非工程代码的文件目录下，执行此脚本；
- 在Git Bash运行./deploy_server.sh执行脚本。
三、总结
本篇文章旨在帮助前端开发快速部署项目到服务器，可根据项目的实际情况对步骤进行适当调整，如有不正确的地方，请指正。
