前端开发部署运维笔记

# 一、开发

# 开发环境

# npm

# 1、nrm

nrm（npm registry manager）是npm的镜像源管理工具，因为npm默认建立的链接访问的是国外的资源，访问速度较慢，使用该工具即可快速在 npm 源间切换

# 安装
npm install -g nrm

1
2

查看可选源 nrm ls

# 添加私有仓库源
nrm add <name> http://registry.npm.tree.com/
# 切换源
nrm use <name>

1
2
3
4

同样可以使用verdaccio (opens new window)搭建自己的私有仓库

# 2、nvm

使用 nvm （node version manager）可以灵活切换 node 环境，但是在多个项目中需要手动切换多个node环境同样麻烦

我们可以在项目中配置.nvmrc指定对应版本，配置教程 (opens new window)

# 3、发布npm包

具体流程请看：如何发布自己的 npm 包 (opens new window)

但是上面教程中需要指出的是import的js文件需要添加文件后缀.js，当然如果自己配置构建工具可以省略后缀

# 测试工具

三款测试工具的github stars 以及 npm 下载量的实时数据，参见这里 (opens new window)

Mocha 和 Jest 都是流行的 JavaScript 测试框架，Mocha 灵活且可扩展，适合需要更多控制和自定义的项目，而 Jest 则简单易用、快速上手，并提供了自动化配置和内置功能，适合快速编写测试。

# 二、部署

# 部署工具

# Jenkins

Jenkins是一款由Java编写的开源的CI/CD 工具，CI 的是持续集成Continuous Integration，CD 对应两个概念持续交付Continuous Delivery 持续部署Continuous Deployment 安装及使用教程 (opens new window)

主要就是配置jenkinsfile的流水线任务，完成整个前端工程化部署涉及的编译打包、静态扫描、单元测试等环节

完成后，即可构建项目，分阶段完成，首先是下拉源码、代码构建编译、代码扫描等等，所有环节成功才算自动化部署成功

# PM2

PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，官方入门文档 (opens new window)

# docker

Docker是一个虚拟环境容器,可以将开发环境、代码、配置文件等一并打包到这个容器中,最后发布应用

# nginx

# 补充：灰度发布

灰度发布即是让一部分人继续用旧版本的产品A，然后一部分用户开始用新版本特征的产品B，如果用户对B没有什么问题反馈，则逐步扩大范围。一方面可以保证整体系统的稳定，而且在初始灰度的时候就可以发现、调整问题，以保证其影响度

传统的灰度是通过Nginx分发流量到服务器，这里介绍一下简单的灰度规则配置，通过在nginx里面配置路由规则就好，如果是规则复杂的话,可以结合nginx+lua 做一些些灰度的业务逻辑

1.根据Cookie实现灰度发布（通过获取cookie设置的版本号来区分）

upstream test1 {
    server 192.168.0.1:8080 max_fails=1 fail_timeout=60;
}
upstream default {
    server 192.168.0.0:8080 max_fails=1 fail_timeout=60;
}
server {
  listen 80;
  server_name  www.****.com;
  set $group "default";
    if ($http_cookie ~* "version=V1"){
        set $group test1;
    }
  location / {                       
    proxy_pass http://$group;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    index  index.html index.htm;
  }
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.根据IP实现灰度发布（通过内外网IP来区分）

upstream test1 {
    server 192.168.0.1:8080 max_fails=1 fail_timeout=60;
}
upstream default {
    server 192.168.0.0:8080 max_fails=1 fail_timeout=60;
}
server {
  listen 80;
  server_name  www.xxx.com;
  set $group default;
  if ($remote_addr ~ "10.0.0.110") {
      set $group test1;
  }
location / {                       
    proxy_pass http://$group;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    index  index.html index.htm;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 发布策略

# 分类

蓝绿部署、滚动发布、灰度发布/金丝雀发布、红黑部署

# 介绍

蓝绿部署，是指同时运行两个版本的应用，如上图所示，蓝绿部署的时候，并不停止掉老版本，而是直接部署一套新版本，等新版本运行起来后，再将流量切换到新版本上。但是蓝绿部署要求在升级过程中，同时运行两套程序，对硬件的要求就是日常所需的二倍，硬件配置要求高

滚动发布，能够解决掉蓝绿部署时对硬件要求增倍的问题。所谓滚动升级，就是在升级过程中，并不一下子启动所有新版本，是先启动一台新版本，再停止一台老版本，然后再启动一台新版本，再停止一台老版本，直到升级完成，这样的话，如果日常需要10台服务器，那么升级过程中也就只需要11台就行了。

但是滚动升级有一个问题，在开始滚动升级后，流量会直接流向已经启动起来的新版本，但是这个时候，新版本是不一定可用的，比如需要进一步的测试才能确认。那么在滚动升级期间，整个系统就处于非常不稳定的状态，如果发现了问题，也比较难以确定是新版本还是老版本造成的问题。

为了解决这个问题，我们需要为滚动升级实现流量控制能力。

灰度发布/金丝雀发布，起源是，矿井工人发现，金丝雀对瓦斯气体很敏感，矿工会在下井之前，先放一只金丝雀到井中，如果金丝雀不叫了，就代表瓦斯浓度高。

在灰度发布开始后，先启动一个新版本应用，但是并不直接将流量切过来，而是测试人员对新版本进行线上测试，启动的这个新版本应用，就是我们的金丝雀。如果没有问题，那么可以将少量的用户流量导入到新版本上，然后再对新版本做运行状态观察，收集运行时数据，如果此时对新旧版本做各种数据对比，就是所谓的A/B测试。

红黑部署，与蓝绿部署类似，红黑部署也是通过两个集群完成软件版本的升级。

当前提供服务的所有机器都运行在红色集群 A 中，当需要发布新版本的时候，具体流程是这样的：