通往“全干”之路一：前端部署

年底入职了一家创业小公司，感觉还是很幸运的。由于前端就我1个人而且没有运维，很自然前端项目部署的工作就落在我的肩上。

第一周我搭建起了公司的后台管理系统框架，按需求开发了两个页面，主要是文件上传相关的。然后那周剩余的时间，我就想先部署上去。

一、常见的前端部署

部署环境：JumpServer开源堡垒机

部署所需配置文件就是nginx.conf

部署步骤：

1、账号密码登录堡垒机

2、安装nginx

3、让豆包提供一份标准nginx.conf

4、上传dist文件

5、解压dist.zip到nginx目录/usr/share/nginx/html/

6、启动nginx

后续项目更新只需要上传，并解压文件到指定目录，前端页面刷新后即可看到更新。这种部署方式比较常见，也比较简单，半天不到即可搞定。在这里不得不提一下AI编程工具对开发效率的提升，特别是新项目来说。

二、亚马逊容器云部署

然后是第二周在另一个前端项目里开发了用户侧的显示界面，也需要部署上去。听面试我的后端大佬说，后端服务是在亚马逊上，采用docker集群部署。还好之前的工作也接触的docker，所以也不是很慌。

部署环境：亚马逊堡垒机

部署所需配置文件：

1、nginx.conf：配置静态资源和前端api请求代理，此文件放前端项目里，然后打包进docker镜像。

2、front-model.yaml：此文件放服务器上，主要配置nginx服务的端口、内存占用，以及镜像地址等。可让AI生成一份，然后修改对应的名称即可。

3、xxx-ingress：服务器上路由文件，主要配置前端路由转到nginx服务。

配置好以上文件后，即可按下面步骤完成部署：

1、打包构建

arduino 复制代码

npm run build:test

2、打镜像

erlang 复制代码

docker build -t front-model:v1.0.1 .

3、amazonaws镜像重命名

bash 复制代码

docker tag front-model:v1.0.1 628639829879.dkr.ecr.us-east-1.amazonaws.com/front-model:v1.0.1

4、amazonaws登录（先安装aws client）

css 复制代码

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

5、推送镜像到amazonaws仓库

bash 复制代码

docker push 628639829879.dkr.ecr.us-east-1.amazonaws.com/front-model:v1.0.1

6、修改front-model.yaml镜像tag

复制代码

sudo vim front-model.yaml

7、应用yaml

复制代码

kubectl apply -f front-model.yaml

8、重启pod服务

bash 复制代码

kubectl rollout restart deployment/front-model

9、查看指定pod状态

arduino 复制代码

kubectl get pods | grep front-model

遇到的问题：

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

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

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

大家也发现了上面的部署方式都是纯手工，比较繁琐。后面会考虑做成脚本自动执行，或者接入CICD。