1. 概述

前端工程部署是一条将开发完成的Web应用程序发布的完整链条，其中涉及到Nginx、Docker、Jenkins、K8s等技术。这些环节相互配合，涉及用户请求的处理、资源文件的分发，集以资源后端后务的交互。这一环节涉及用户请求的处理、资源文件（HTML、CSS、JavaScript等）的分发，以及与后端服务的交互。

传统方式下，开发者需手动执行构建脚本，如使用Webpack打包代码，随后将打包好的文件通过FTP或SCP等工具上传至服务器指定目录。此过程不仅繁琐耗时，还容易出错，且难以自动化和版本管理，特别是在团队协作环境中，不同开发者间环境差异可能导致部署结果不一致。，下面就来简单介绍下其中涉及到的技术工具以及简单配置解析

2. Nginx

域名绑定、静态资源压缩、缓存、反向代理、支持https、负载均衡、高并发

# nginx.conf 文件找到 server 区域  
server {  
  # nginx 监听端口号，不能被其他应用占用  
  listen 80;  
  
  # nginx 绑定的域名  
  server_name localhost;  
  
  # access_log 指令指定所有访问日志存放的位置  
  access_log   logs/host.access.log   main;  
  
  # root 指令将请求映射到文件系统中的某个位置  
  root   C:/server/  
   
  # 开启 gzip 压缩，提高网络传输效率  
  gzip   on;  
  gzip_min_length 1k;  
  gzip_buffers 4 16k;  
  gzip_http_version 1.0;  
  gzip_comp_level 2;  
  gzip_types text/plain application/x-javascript text/css application/xml;  
  gzip_vary on;  
  
  # SSL 证书位置，如果启用 HTTPS ，需要指定服务器的证书和私钥  
  ssl_certificate   C:/Hooper/work/https/server/server.pem;  
  ssl_certificate_key C:/Hooper/work//https/server/server.key;  
  
  # 定义服务器的默认字符集  
  charset utf-8;  
  
  # 公共静态资源  
  location /xxx-app/ {  
    # alias 别名，将请求映射到文件系统中的某个位置，这里将请求映射到静态资源目录  
    alias C:/server/xxx-app/;  
  
    # 默认首页  
    index index.html;  
  
    # 设置静态文件的缓存时间，这里是一天  
    expires 1d;  
  
    # 访问不到资源后的处理 - 单页面应用使用 history 路由防止 404  
    try_files $uri $uri/ /xxx-app/index.html;  
  }  
  
  # 2. 转发 /api 请求  
  location /api {  
    # proxy_pass 指令将请求转发至指定的服务器  
    proxy_pass http://127.0.0.1:18000/api;  
  
    # proxy_set_header 指令设置转发请求的 HTTP 头部  
    proxy_set_header Host $proxy_host;  
    proxy_set_header X-Real-IP $remote_addr;  
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
  }  
}

3. Docker

容器是轻量级、可移植的软件单元，这些软件单元与必需的库和依赖项打包在一起，可以使应用程序在任何地方、任何机器上运行。作为一种更简化的方式，容器可以在多种环境中构建、测试和部署应用程序，从而有效提高了开发运维工作的效率，并在 IT 生态系统之间实现了更高的一致性。

Docker作为一种轻量级的容器化技术，允许开发者将应用及其依赖、运行环境打包成一个可移植的镜像。镜像基于分层存储，每一层代表一组文件系统变更，使得构建、传输和存储更为高效。对于前端应用而言，Dockerfile定义了如何构建镜像，通常包含基础镜像选择、工作目录设置、复制源代码、安装依赖、定义运行命令等指令。例如，一个简单的Vue.js应用Dockerfile可能从Node.js官方镜像开始，安装项目依赖并指定启动命令。镜像名称如明确了镜像的仓库地址、项目名及版本标签，便于管理和分享。

说白了，这个 Docker 镜像，是一个特殊的文件系统。它除了提供容器运行时所需的程序、库、资源、配置等文件外，还包含了一些为运行时准备的一些配置参数（例如：环境变量）。镜像不包含任何动态数据，其内容在构建之后也不会被改变。

综上所述，Docker 的运行过程，也就是去仓库把镜像拉到本地，然后用执行命令把镜像运行起来变成容器

…

…

3.1 Dockerfile

#这是基础镜像，所有的操作都是在这个镜像的基础上进行的。这里选择的是nginx的1.20.1版本，基于alpine操作系统，alpine是一个轻量级的 Linux 发行版，使得整个镜像更加小巧高效
FROM harbor.example.com/baseapp/nginx:1.20.1-alpine-root-strong-v3
#环境变量，设置字符集为 C.UTF-8
ENV LANG C.UTF-8
#环境变量，设置时区为上海
ENV TZ Asia/Shanghai
#设置工作目录，后续的 RUN、CMD、ENTRYPOINT、COPY 和 ADD 指令都会在这个目录下执行
WORKDIR /WEB
#复制本地的 dist.tar.gz 文件到容器的 /WEB 目录，并自动解压
#按需修改这一行，海云海星都是打包成dist文件
ADD dist.tar.gz //WEB
#目录重命名
#按需修改这一行，海云的二级路由是govapp，根据项目具体修改
RUN mv /WEB/dist //WEB/XXXX
#声明运行时容器提供服务的端口，这里是默认端口 HTTP（80） 和 HTTPS（443）
EXPOSE 80 443

3.2 构建命令

如镜像名称：/appName/app:dev_1.1_844docker build -t imageName .

使用buildx更高效支持多平台docker buildx build --platform linux/amd64,linux/arm64 -t myapp .

4. Harbor

负责对 Docker 镜像进行管理的，默认是 Docker Registry 服务（类似仓库管理员）。当然，不是任何人建的任何镜像都是合法的。万一有人构建的镜像存在问题呢？所以，Docker Registry 服务对镜像的管理是非常严格的。最常使用的 Registry 公开服务，是官方的 Docker Hub，这也是默认的 Registry，并拥有大量的高质量的官方镜像。

Harbor是一个开源的Docker镜像仓库，提供了安全、高效的企业级镜像管理解决方案。它支持镜像的存储、版本控制、权限管理及复制等功能，为Docker镜像的生命周期管理提供了便利。通过与Jenkins集成，镜像构建完成后可直接推送至Harbor，确保了开发团队能访问到最新、安全的镜像版本，同时也便于在多环境间迁移部署，为项目提供快速支持等。

5. Jenkins

Jenkins是一款开源的持续集成/持续部署(CI/CD)工具，旨在自动化软件开发流程中的构建、部署任务。通过Jenkins，开发者可以配置项目，实现代码变更自动触发构建、轮询、及构建部署到指定环境。

配置Jenkins包括安装必要的插件、创建Job、配置源代码管理(SCM)、构建触发器以及构建后操作（如Docker镜像构建与推送）。Jenkins极大提高了部署效率，确保了部署过程的一致性和可追溯性。

/document_de…

添加node.js的路径到PATH环境变量，确保能访问正确版本的node和npm命令

export PATH=/data/jenkins/node-v18.18.0/bin:\${PATH}

查看当前npm所使用的镜像源npm get registry

设置npm的镜像源为/，这个镜像源一般访问速…npm config set registry

打印npm及node.js的版本，方便在日志中排查问题

npm --version
node --version

5. 构建命令，因项目而异npm run build

执行自定义脚本，部署项目sh \dir\script.sh6. Kubernetes (k8s)

Kubernetes是用于自动化容器化应用部署、扩展和管理的开源平台。它提供了一个高度可扩展的框架，能够跨多个主机集群部署和管理容器化应用，实现资源的高效利用、故障恢复和弹性伸缩。Kubernetes的核心概念包括Pods（最小部署单元）、Services（定义网络访问）、Deployments（管理Pod副本集）等。结合Docker与Harbor，Kubernetes能够根据预设策略自动调度和管理容器，极大地提升了大规模部署的灵活性和可靠性。

单点故障，就是一台物理机突然崩掉，应用还能正常跑热更新，比如要update应用，用户无感知更新。时光回溯，比如上的新版本出问题了，如何回退。负载均衡，在各节点之间任务调度自动扩缩容，比如流量突然增大，如何自动扩容

kubernetes.io/zh-cn/

7. 技术中台

技术中台是一种企业级的技术服务体系，旨在为业务快速迭代提供统一的技术基础设施和服务能力。

它整合了开发、测试、部署、监控等全链路工具，降低了技术栈的复杂度，使开发人员无需关注底层运维细节，专注于业务逻辑的实现。技术中台通过标准化服务接口、组件库、数据平台等，加速了产品创新速度，提高了资源利用率，同时保障了系统的稳定性和安全性。

与上述技术栈结合，技术中台进一步简化了从代码提交到生产环境的流程，实现了真正的DevOps文化，促进了组织内的高效协同。

7.1 应用配置YAML

通过保存定制文件到nfs并挂载到容器，替换项目logo等；

容器 YAML服务 YAMLJob YAML：此 YAML 用于定义 Job，负责创建一或多个 Pod 来运行一次性的任务，例如批处理或定时任务等

各个 YAML 的配合关系：Pod 通过 PVC 使用存储，通过 ConfigMap 和 Secret 获取配置，通过 Service 提供访问接口，而 Job 则用于运行一次性的任务。所有这些都是为了运行和管理用户的应用程序。

7.2 滚动更新（热更新）

Kubernetes的滚动更新（Rolling Update）是一种部署新版本应用的策略，其主要作用是在不中断服务的情况下，逐步替换旧版本的Pod（容器）为新版本。滚动更新在改进应用时提供了一种高效、安全的方式，可以避免服务的中断以及避免一次性替换全部应用带来的风险。

具体过程：

这种更新方式的优点是可以实现零停机时间的部署，而且即使在更新过程中出现问题，也能最小化影响范围，快速回滚到旧版本。此外，Kubernetes还可以通过设置滚动更新策略来控制更新的速度，例如每次更替的Pod数量，以及更新的间隔时间等。这给了开发者很大的灵活性，可以根据应用的特性和业务需求来定制滚动更新的策略。