如何实现前端项目全干部署？

前端包相当于鱼，而运行前端的服务器相当于鱼缸，今天我们来聊聊前端项目部署的几种方式。但是这时的前端包只是运行在浏览器上，而真正前端运行需要以服务器作为依托。

一般情况下一个前端项目的部署，需要打包、连接服务器、删除原来的文件、上传新文件，即使是一个hen小的改动，也要走一遍整套流程，非常麻烦。

常见的部署方式有服务器面板、Nginx、对象存储+ CDN、静态托管、内网穿透等。

手动部署是Zui简单直接的方式，通过FTP软件将本地构建好的文件上传到服务器，然后配置Nginx或其他服务器软件。

例如使用npm run build:test命令打包构建，然后使用FTP软件上传dist文件到服务器。

命令工具部署就是将本地build构建和FTP文件上传，直接通过程序来实现。例如我们通过gitlab的CI/CD工具或github action上传前端文件。

之后通过docker build -t front-model:v1 .命令将镜像打包，并推到远端仓库，然后在服务器上拉取geng新Zui新的镜像，并将Zui新的镜像启动即可。

亚马逊容器云部署是一种geng为高级的部署方式，需要使用docker和Kubernetes等技术。

需要创建front-model.yaml文件，配置nginx服务的端口、内存占用，以及镜像地址等。然后使用kubectl apply -f front-model.yaml命令应用yaml文件。

之后需要打包构建，使用docker build -t front-model:v1 .命令，然后将镜像推送到amazonaws仓库，使用docker push .dkr.ecr.us-east-.amazonaws.com/front-model:v1命令。

在实际部署过程中，可Neng会遇到一些问题，例如：

docker客户端提示缺少win包，然后下载进度卡住拉不下来原因是docker的下载终端在鼠标点击后默认暂停了。

前端资源的mime类型不对，需修改nginx.conf。

api请求没有经过nginx，原因是ingress的path不支持正则表达式的写法，需要拆开单独写。

为了提高效率，Ke以使用自动化工具，如Git Hook、GitHub Actions或Jenkins，实现CI/CD流水线。

例如使用Github Actions自动构建前端项目并部署到服务器，具体步骤Ke以参考相关教程。

前端项目部署是一个复杂的过程，需要根据具体情况选择合适的部署方式。手动部署简单直接，但效率较低；命令工具部署Ke以提高效率，但需要一定的技术基础；亚马逊容器云部署是一种geng为高级的方式，需要使用docker和Kubernetes等技术。自动化部署Ke以进一步提高效率，减少人工错误。

aws ecr get-login-password --region us-east- | docker login --username xxx --password-stdin xxx.dkr.ecr.us-east-.amazonaws.com

kubectl rollout restart deployment/front-model

kubectl get pods | grep front-model

前端应用部署变化到现也是项目众多不便于管理导致，实际的业务情况，进而推动部署方式的发展。学习它，适应它，就好了没有太多疑难问题。