前端部署服务器，需要经过打包、迁移、部署、回退操作，如果每次都手动处理，那么容易出错还浪费时间，自动化部署又比较复杂，那么选择shell脚本做自动化，也是一个不错的选择，具体实现如下：
执行自动化构建的前端项目myweb
项目通过命令构建测试环境文件或生产环境文件
linux服务器，nginx部署项
通过cra构建前端项目，修改配置文件，通过传递配置参数，配置测试环境和生产环境
1、cra 构建项目，运行项目
yarn create react-app myweb cd myweb yarn install 复制代码
2、修改项目文件package.json
安装依赖corss-env，执行命令yarn add -D cross-env，该包用来修改环境变量
"scripts": { "start": "react-scripts start", "build:pre": "cross-env REACT_APP_BUILD_ENV=development react-scripts build", "build:prod": "cross-env REACT_APP_BUILD_ENV=production react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 复制代码在项目中我们获取process.env.REACT_APP_BUILD_ENV就可以获取当前项目的打包环境
执行命令yarn build:pre，打包测试环境 执行命令yarn build:prod，打包生产环境
这一步将打包的文件通过shell脚本迁移，通过传参判断不同的打包环境。
在根目录下新建publish.sh
#!/bin/bash function build(){ echo $1 # 执行打包命令 yarn build:$1 # 压缩打包后的文件 zip -r build.zip ./build/* # 迁移压缩文件到服务器对应目录下 scp ./build.zip root@117.50.4.30:/data/myweb/build # 删除上传后的压缩文件 rm -rf build.zip } if [ $1 == "pre" ]; then build $1 elif [ $1 == "prod" ]; then build $1 else echo "your params is not pre or prod" fi 复制代码修改package.json, 增加发布命令
"scripts": { "publish:pre": "sh publish.sh pre", "publish:prod": "sh publish.sh prod" } 复制代码1、在服务器部署前端项目
登陆服务器，在服务器上新建/data/myweb，配置nginx文件
server { listen 80 default_server; listen [::]:80 default_server; server_name _; # 项目部署的路径 root /data/myweb/build; location / { index index.html; } } 复制代码2、执行脚本发布
执行第三步配置的发布脚本yarn publis:pre， 输入服务器密码，将迁移到部署服务器的/data/myweb下， 然后执行unzip build.zip，将部署文件解析到/build下， 在浏览器打开http://117.50.4.30，即可看到部署的文件
注意：确保80端口开放
第四步，可以看到上传到服务器后，还需要执行unzip build.zip来部署脚本，也是很不方便，继续改进shell, 在/data/myweb下新建online_and_backup.sh,
1、增加脚本备份打包文件online_and_backup.sh
#!/bin/bash # 首先备份当前版本v1.0.0 zip -r build.zip.old ./build/* cp ./build.zip.old /data/myweb/backup/build.zip.old # 解压最新的版本v1.0.1 unzip -o build.zip # 获取当前的时间，拼接下 current_time=$(date "+%Y%m%d%H") cd /data/myweb/backup mv build.zip.old build.zip."$current_time" 复制代码
build.zip.old 为备份的文件的打包文件 /data/myweb/backup 下的文件为备份的不同版本，可以增加定时清理脚本，只保存一周的数据，防止出现问题可以及时回退到某天的版本或者某个版本
在/data/myweb下新建back.sh，主要作用，发布后出现问题，将之前备份的文件重新部署
1、增加回退脚本back.sh
mv build.zip build.zip.err mv build.zip.old build.zip unzip -o build.zip 复制代码
该项目仅仅展示了直接上传上生产环境服务器的脚本，一般发布如果有跳板机的需要跳板机过渡，增加一个迁移脚本即可
在项目根目录下新建文件夹scripts,将我们写好的发布脚本publish.sh,备份脚本backup.sh,回退脚本back.sh放在下面。上传git，这样其他人可以使用或者项目迁移也可以使用。
由于多人开发需要，可能需要将文件上传到自己的跳板机，所以在.gitignore文件文件中增加，增加一个人开发，就可以复制publish:sh到自己的项目根目录，修改自己的配置，可以做到多人不相互干扰。
.gitignore
build.zip publish.sh 复制代码
通过shell脚本修改版本，做版本管理
在提交钱进行代码格式化整理
https://github.com/richLpf/my-web-shell 复制
作者：前端中后台
链接：https://juejin.cn/post/6963070430424858638
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/127952.html
在经历了6,7个项目同时开工，频繁发布测试 ，不得不学会一点偷懒的小技巧来提高效率了，所以这篇文章要讲的就是如何更加优化发布流程。 工作以来，经历了build后，然后用FileZilla上传服务器完成部署。再到前端打包后 ，在build仓库执行git push,后端在自动部署。后端的自动部署的确简化了很多操作，不过对于前端来说 ，每次发布还需要去build仓库执行push操作，特别是发布频繁的时候...
摘要：嗨很高心你能进入这里，我是在这里给你介绍一款完整的自动化部署工具一款完整的自动化部署持续集成堡垒机并且友好的开源项目。应用管理可建立各种应用任务，前端，后端发布任务，可同时执行单机和多机任务，并实时显示任务日志。 嗨、很高心你能进入这里，我是zane, 在这里给你介绍一款完整的Devops自动化部署工具 APubPlat - 一款完整的Devops自动化部署、持续集成、堡垒机、并且友...
摘要：就是在提测前部署一个预览环境，在提测前，每个人本地验证一遍，再放在预览环境验证一遍。于是就准备啪啪啪撸一个完成自动发布预览环境的工具。用来直接把已经好的文件发布到预览环境。这样以后组里的其他同事也都可以用一行命令自己部署预览环境了。 场景 进入公司一段时间了。流程还是不太让人省心。就在上个提测版本的质量还是没法保证，总是或多或少出现一些问题。于是就想到了上家公司的一个做法。就是在提测前...
摘要：上午折腾了一下持续集成，由于公司使用自己搭建的服务器来进行代码管理，因此这里是针对服务器来进行的配置，后面稍微介绍了下针对管理的项目的配置之前项目每次修改之后都需要本地一次手动发布到服务器上方便测试和产品查看，有了持续集成之后只要或者提交之 上午折腾了一下Jenkins持续集成，由于公司使用自己搭建的svn服务器来进行代码管理，因此这里Jenkins是针对svn服务器来进行的配置，后面...
阅读 283·2024-11-07 18:25
阅读 130356·2024-02-01 10:43
阅读 864·2024-01-31 14:58
阅读 827·2024-01-31 14:54
阅读 82765·2024-01-29 17:11
阅读 3046·2024-01-25 14:55
阅读 1984·2023-06-02 13:36
阅读 3031·2023-05-23 10:26
