本文将采用的是 docker + jenkin + nginx + rancher 的方式来实现前端项目的打包、部署和访问。下面就开始吧！
1. 概念理解
Kubernetes（k8s）
为了对 Docker 容器技术进行更高级更灵活的管理，方便我们编排、管理和调度，Kubernetes 诞生了。
k8s是基于容器的集群管理平台，本质上就是一个工具，涵盖了开发、部署、测试、运行监控等各个环节，实现自动化部署、扩展容器集群、维护等功能。
通过下图做一个大致的了解：
k8s中部署的最小单位是pod，而不是Docker容器。k8s是不依赖于Docker的，完全可以使用其他的容器引擎在k8s管理的集群中替代Docker。- 在与 Docker 结合使用时，一个 pod 中可以包含一个或多个 Docker 容器。通常一个
pod中只有一个容器，这样方便不同的服务各自独立地扩展。
Rancher是什么
Rancher 基于 k8s 添加了新的功能，是一个 全栈式 的 k8s 容器管理平台，为你提供在任何地方都能成功运行 k8s 的工具。本质上也是一个工具。
2. rancher安装及使用
为了方便大家对rancher的整个部署过程有个大致的了解，我们选择使用 使用 Docker 将 Rancher 安装到单个节点中 的方式来进行后续的操作。
这种方式是为了方便测试，生产环境需要更多的配置，方案选择也会有不同，所以生产环境不推荐。
虚拟机上安装rancher
运行如下命令，为了方便后面不重新设置密码，我们把密码直接初始化写死，后面可以直接登录。
sudo docker run -d --restart=unless-stopped -p 80:80 -p 443:443 -e CATTLE_BOOTSTRAP_PASSWORD=123456 --privileged rancher/rancher:latest
等个几分钟之后打开页面，直接访问虚拟机的ip，会出现如下界面，点击show advanced按钮后，点击继续访问（Proceed ro X.X.X.X）即可。
然后会跳转到如下页面，直接输入初始化时的密码登录。
确认Server URL，记得是 https://
新建集群
登录后，在主页选择新建集群，如图：
选择 Custom 后继续
填入名称，其他默认，并修改端口号为如图（方便前端的端口使用，扩大范围），点击下一步。
注册节点
这里我们至少有一个三个角色都有的主节点（先注册，否则集群状态会有问题）。所以选中三个角色，如图，随即会出现需要运行的命令，将内容拷贝到虚拟主机（已安装docker）上运行，然后点击页面的完成。
k8s中节点的角色：
角色详情参考
- etcd 主要用作集群的数据存储，不可被调度，即
pod不会被部署到此角色的节点。 - Control Plane 运行开
k8s主组件，主要用于管理集群中的Worker节点和Pod。不可被调度 - Worker 每个集群中至少要有一个Worker节点，保证
pod的运行并提供k8s的运行环境
如果想注册多个节点，可以选择集群的配置页重新选择节点角色，如图，将生成的代码在其他机器上运行。
我们为了节省资源，master节点还是我们这台虚拟机?
将刚才的命令在终端里运行，等待节点注册成功。
回到集群管理页面，我们新建的集群在一开始是Provisioning的状态，等个几分钟后，如果节点注册成功会更新为 Active，这个时候Explore按钮处于激活状态，点击Explore
新建的Active集群默认被分配了两个项目（如图）：
Default，包含default命名空间。System，包含cattle-system、ingress-nginx、kube-public和kube-system等命名空间。
3. 自动化部署
前端项目准备
完整项目实例参考这里
为了方便我们部署实践，我们直接使用vue的官方脚手架新建的项目为例。
初始化项目：
npm init vue@latest
保证项目可以正常打包即可。
1. 编写Dockerfile
项目下新建 Dockerfile 文件，内容如下：
# 使用 Node.js 16 作为基础镜像
FROM node:16 as builder
# 在容器中创建工作目录
WORKDIR /app/
# 拷贝整个应用程序到工作目录
COPY . /app/
# 安装依赖并打包
RUN npm install \
&& npm run build
FROM nginx
# 多层镜像 使用前面镜像打包的内容 /app/dist
COPY --from=builder /app/dist /usr/share/nginx/html/
COPY ./vue-default.conf /etc/nginx/conf.d/
EXPOSE 8099
2. 定义nginx服务
主要用来定义服务的端口。最终会应用在虚拟机的docker容器中，通过rancher的端口映射使服务生效。
项目下新建文件 vue-default.conf，内容如下：
server {
listen 8099;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods *;
client_max_body_size 2000M;
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
try_files $uri /index.html;
}
}
3. 更新代码到github仓库
将我们前面配置到 jenkins 的 github 项目 进行代码覆盖。
直接将vue的项目代码 push 到jenkins-test项目（jenkins项目配置的仓库）即可。
4. 修改jenkins编译配置
我们之前已经做了 jenkins 的相关配置，这里不再赘述。可参考这里
jenkins 会自动从 github 上去拉取最新的代码，我们需要根据项目下的 Dockerfile 文件生成一个镜像，并将其推送到私有镜像库（私用镜像库参考这篇）。
所以，我们找到之前的jenkins项目，修改 Build Steps，将以下内容填入，然后保存
// 登录镜像库
sudo docker login -u $DOCKER_LOGIN_USERNAME -p $DOCKER_LOGIN_PASSWORD 10.0.2.15:8082
// 删除已有的镜像
sudo docker rmi -f 10.0.2.15:8082/vue-project:1.0.0
// 根据Dockerfile生成新的镜像
sudo docker build -t 10.0.2.15:8082/vue-project:1.0.0 .
// 将镜像推送到私有镜像库
sudo docker push 10.0.2.15:8082/vue-project:1.0.0
5. 执行 jenkins 构建
点击项目的 Build Now 按钮，等待项目构建成功。
6. 新建rancher工作负载
选择前面新建的集群vue-test，打开工作负载页面，点击 Create
选择 Deployment 类型
填入工作负载名称，将我们前面推送到私有镜像库的镜像填入，如图所示：
新增Port，选择 Node Port 服务类型，容器端口就是我们定义在nginx文件中的端口8099，公共端口就是供外部访问的端口，这里可以随便填，要在我们前面修改的端口范围内。我这里是端口 9999
确认好以上信息后提交即可。稍等一会儿，如图所示的 active 状态就部署完成了。
这个时候我们打开浏览器访问 虚拟机ip:9999，可以看到我们的测试页面，如图：
到这里，一个简单的前端项目就部署完成了✌️✌️✌️
4. rancher管理
Rancher CLI（命令行界面）是一个命令行工具，可用于与 Rancher 进行交互。使用此工具，你可以使用命令行而不用通过 GUI 来操作 Rancher。
1. 安装
Rancher Cli安装 参考地址
在页面上找到下载地址进行安装
选择Linux版本
2. 新建apiKey获取token
右上角头像 -> Account & API Keys -> Create，一定要保存好token信息，只会显示一次。
注意：要新建全域的Apikey，即不选择对某个域生效
选择对某个域生效时会报未授权的错误，如图：
3. CLI身份验证
虚拟机上执行如下命令
./rancher login https://serverUrl --token token值
选择你新建的集群的default项目即可，写入对应的number
- 验证可用性
运行如下命令，获取当前的pods列表
./rancher kubectl get pods
如图则表示可正常使用
5. 总结
自动化部署是一个复杂且有一定难度的领域，作为前端开发，我们需要对其有一定的了解，便于我们与运维进行对接，对整个开发、测试、部署及交付流程有大致的把控。这样，我们在工作中才能做到更加从容、淡定。
这个系列折腾了很久，走了不少弯路，不过收获也很多，相信没有白走的路??，大家也要加油呀！
学无止境，不要停止前进的脚步！
