前端工程师知识面扩展（CDN、阿里云ECS服务器、Kubernetes(k8s)、阿里云SLB、docker、ngnix、gitlab-ci（持续集成））

前言作为一名前端开发工程师，我们很少去关注除代码意外的东西，如docker、k8s、ngnix等等，但这些东西其实跟我们的日常工作息息相关，只不过它们是由专门的运维工程师来负责。其实我们也是可以了解一下这些知识,扩展一下自己的知识面。

正文从这里开始

前端frontend是如何到达站点ECS服务器（这里指的是提供静态资源服务的Ngnix/Web Server）

如果只有一台站点，那么我们可以直接前端访问那个站点。中间可能还会加一层CDN

随着访问量需求的增大，一台服务器显然支撑不了我们的需求，这时我们需要多台服务器，我们如何访问服务呢？

（1）我们可以指定一些客户端访问指定的服务器。

但是这样做会让运维工程师非常的头大，随着客户端的新增，需要咱们的运维工程师来分配。而且很有可能导致服务器负载过高而崩溃。还有可能导致服务器资源的浪费（因为不合理的分配）。为了解决这些问题，k8s就出来了。

（2）k8s集群中，SLB做负载均衡，有了k8s的加入，我们访问服务器就变成 client（这里指浏览器）->[CDN]->Kubernetes Cluster（SLB->ECS A / ECS B / ECS C / ...）

前端服务器访问不了的可能原因：

CDN挂掉了。解决方案：配置策略，检测到CDN挂掉后，让其直接到SLB
SLB几乎不可能挂掉，可能是代码出为了
如果某一个Pod出了问题，SLB会重新创建一个Pod，继续运行。注意有些时候Pod启动不了，不是Pod本身的问题，而是前端代码问题，这个时候必须由开发者修复代码，才能重启Pod

CDN（内容分发网络）

CDN是做静态资源加速用的，CDN就像是本地仓，就近发货，提升响应速度。

阿里云ECS服务器

云服务器

k8s

Kubernetes 是用于自动部署，扩展和管理容器化应用程序的开源系统。

这里我们可以了解一下Node（节点上运行Pod）、Pod（Pod 是可以在 Kubernetes 中创建和管理的、最小的可部署的计算单元，它是是一组（一个或多个）容器）

阿里云SLB

负载均衡

docker

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。写给前端的Docker入门终极指南，别再说不会用Docker了

我们可以了解一下docker中三个要点

image 镜像
container 容器
Repository docker仓库

Dockerfile配置镜像

# 指定基础镜像，表示构建的镜像是基于基础镜像而构建的，基础镜像提供ngnix服务
FROM 基础镜像名 
# 将项目根目录下 dist 文件夹中的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
COPY dist/ /usr/share/nginx/html/

gitlab-ci

如果没有持续集成，那么每次都需要咱们的运维工程师手动集成，创建镜像，创建容器等等。这显然不合理，不仅发布效率低下，而且运维工程师会很头大。所以我们需要CI，这里我们团队用的gitlab-ci

# dev分支
stages:
  - build
# 如果需要更新package.json里面的插件 就注释下面的cache
#cache:
#  paths:
#  - node_modules/
# 安装依赖、打包、推送镜像
build:
  stage: build
  only:
    - dev
  script:
    - npm cache clean --force
    - npm i --registry https://registry.npmmirror.com/
    - npm install -g increase-memory-limit
    - npm run build
    # -t参数给镜像命名
    # .是基于当前目录的 Dockerfile 来构建镜像
    - docker build -t 镜像名 .
    # 推送镜像之前，需要打一个 Tag，方便我们推送镜像到仓库
    - docker tag 镜像名 docker仓库远程镜像名
    - docker push docker仓库远程镜像名
    - curl "触发重启"
  tags:
    - f-end-project

ngnix

提供静态资源（html,css等）服务的服务器，通常咱们的前端项目都是部署在ngnix上面的。

我们在ngnix上创建项目目录，浏览器通过目录就可以访问

ngnix除了做静态资源服务器以外，它还有一些作用：

做负载均衡
做动静分离（分离静态资源和动态资源）
做正向代理
做反向代理

静态资源如html,不需要访问database

client -> 静态资源服务器web Server

动态资源如jsp,.net,php等，需要访问数数据库

<!-- 正向请求 -->
client -> web server -> php/jsp/.net -> database
<!-- 反向响应 -->
client <- web server <- php/jsp/.net <- database

动静分离的作用？
动静分离前，浏览器直接访问java web server（包含静态资源和动态资源）
动静分离后
浏览器 -> ngnix（这里做动静分离）如果是动态资源请求则会转发到web server；如果请求的是静态资源则被转发静态资源服务器。
可以看到静态资源没有到web server，这就减轻了web server的压力。

静态资源服务器如OSS（放图片、文档、媒体文件等），ngnix（放html、css等）

现在大多数都采用前后端分离技术，前端都是静态资源，也就不需要用到ngnix的动静分离了，直接将前端的资源部署到ngnix静态资源服务器上。

正向代理（客户端代理）：代理对象为客户端，即可以把客户端和ng看做一体，客户端不能直接访问服务端，通过ngnix代理将客户端请求转发到服务端。服务端是不知道具体的客户端的。所以ngnix可以用来处理服务端跨域请求问题。

反向代理（服务器代理）：代理对象为服务器，即可以把服务端和ng代理服务器看做一体，客户端请求的是代理服务器，代理服务器再转发到真正的服务端。客户端其实是不知道真正的服务器的。