当前位置: 首页 > Web前端 > HTML

你知道前端工程部署有哪些方式吗?

时间:2023-03-29 11:16:41 HTML

我分为四个阶段:手动部署、命令工具部署、docker镜像部署、平台部署。随着它们的前进,这些阶段将变得更加复杂和友好。毕竟平台部署可以备份回滚,还是比较安全的。手动部署//打包文件并生成dist目标文件。npmrunbuild使用FTP文件传输工具将dist下的文件上传到服务器,可以直接访问最新的文件。前提条件:服务器上有web服务器,类似nginx服务和Apache服务,服务代理已经启动。流程:本地构建构建包-->FTP文件上传-->通过域名命令工具部署获取最新文件命令工具部署其实和手动部署是一样的,只是简化了。命令工具部署就是直接通过程序上传本地的构建和FTP文件。比如我们通过gitlab的CI/CD工具或者githubaction上传前端文件。gitlabCI/CD或githubaction通过监控master分支的推送操作来运行你的配置命令。我以githubaction配置为例://.github/workflows/main.yml#name:deploytoaliyun#on:#push:#branches:#-master#jobs:#build:#runs-on:ubuntu-latest#steps:##switchbranches#-name:Checkout#uses:actions/checkout@master#-name:workaround权限问题#run:gitconfig--global--addsafe.directory/github/workspace##USEnode:10#-name:useNode.js10#uses:actions/setup-node@v1#with:#node-version:10##npminstall和buildpackage同时进行#-name:npminstallandbuild#run:|#npminstall#npmrunbuild#env:#CI:true##Deploy上传到阿里云,secrets.ACCESS_TOKEN为配置token#-name:Deployaliyun#uses:easingthemes/ssh-deploy@v2.0.7#env:#SSH_PRIVATE_KEY:${{secrets.ACCESS_TOKEN}}#ARGS:"-avz--delete"#SOURCE:"./docs/.vuepress/dist/"#REMOTE_HOST:"47.111.149.160"#REMOTE_USER:"root"#TARGET:"/var/www/HerryLo.github.io"详情请参考到下面这篇文章↓GitHubAction一键部署前提:服务器上有web服务器,类似nginx服务,Apache服务,服务代理已经启动流程:_gitpush代码到代码仓库——>gitlabCI/CD或github动作依赖配置文件打包构建上传——>通过域名获取最新文件_Docker镜像部署docker部署是平台的基础deployment,可以看成是命??令工具部署,从方便上来说,命令工具部署和docker部署类似,但是有一个好处:可以备份docker镜像;下面是docker镜像的Dockerfile和配置:FROMnode:latestCOPYpackage.json/RUNnpmi--registry=https://registry.npm.taobao.orgRUNnpmrunbuildFROMnginx:latest#这里的dist/目录是你项目的打包文件目录COPY./dist//usr/share/nginx/html/COPY./nginx.conf/etc/nginx/conf.d/EXPOSE80nginx配置文件:server{listen80default_server;服务器名称_;位置/{root/usr/share/nginx/html/web;indexindex.htmlindex.htm;try_files$uri$uri//index.html;}#接口代理示例#location/api{#proxy_passhttp://xxx.com;#proxy_set_header主机$host:$server_port;#proxy_set_headerX-Real-IP$remote_addr;#proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;#proxy_set_headerCookie$http_cookie;#proxy_buffering关闭;#公关oxy_cache关闭;#}}然后通过dockerbuild和dockerpushimagename将镜像打包推送到远程仓库(一般是你公司项目的私有库),然后在服务器上拉取并更新最新的镜像,再把最新的镜像推送给你可以启动提示:docker镜像一般直接将nginx服务打包在一起,所以不需要在服务器上单独启动服务,只需要打开docker端口即可。当然,如果是为了统一管理端口,也可以通过专门的代理服务进行管理。流程:本地构建打包文件-->docker打包镜像_-->更新服务端镜像并打开最新镜像-->通过域名访问最新文件_详见下文↓Docker构建前端项目platformdeploymentplatformdeployment其实就是整个流程:命令工具部署+docker镜像的组合版本。你只需要推送代码并提交,然后通过网页访问并搭建一个打包平台,比如:阿里云效率流水线或者Jekins打包搭建平台,你可以点击按钮,按照下一步完成打包构建,上传图片。至于更新,我使用rancher平台来管理或更新服务。图片上传完成后,就可以在rancher平台配置相关的加载服务了,剩下的就是点击更新按钮了。下面是使用阿里codeuppipeline+rancher的流程示例:_提示:_阿里巴巴codeuppipeline或jekins打包构建类似于docker镜像打包,rancher部署类似于上传最新镜像到服务器然后启动服务。(rancher部署可能比较复杂,因为还涉及到k8s集群知识)流程:_gitpush代码到代码仓库-->通过_codeup_管道构建并上传镜像-->在rancher等平台更新镜像-->获取最新通过域名File_详见下文↓Rancher前端服务发布总结现阶段前端应用部署变化,也是很多项目不好管理导致的。实际业务情况推动了部署方式的发展。前端部署的流程每个公司都有自己的一套流程,学习它,适应它,难度问题不多。使用该工具没有困难,困难可能是您不熟悉它。你们的点赞和收藏是我更新的动力!!