webpack+react+jenkins从零到ci/cd部署

package配置

• 脚本配置
  • npm script命令的原理：模块局部安装会在node_modules/.bin目录产生软链接。
• dependencies与devDependencies的区别
  • devDependencies在开发环境使用，可以增加构建，eslint，单元测试相关依赖。
  • dependencies在生产环境打包，可以增加框架，utils，组件业务逻辑相关的依赖。

webpack配置（基础）

• webpack-merge
  • 提供了一个 merge 函数，用于merge webpack配置文件。
• entry
  • 单入口（单页面文件），多入口（多页面文件）
• output
  • 只需配置一个output，不同入口通过filename名称区别
• devServer
  • 编写server相关配置port等等
• plugins
  • bundle文件的优化，环境变量注入，资源管理(在整个构建过程中扩展逻辑)
  • html-webpack-plugin. 自动生成index.html
  • clean-webpack-plugin. 每次构建时清空上一次的dist目录
  • copy-webpack-plugin. 项目中的静态资源如：public目录下js/css，字体等等拷贝到dist
  • mini-css-extract-plugin. 单独生成css文件，通过<Link>标签引入css文件
    1. 异步加载
    2. 不会重复编译(性能更好)
    3. 适用CSS
  • optimize-css-assets-webpack-plugin. 压缩css文件
  • HotModuleReplacementPlugin. 热更新插件，开发环境配合devServer的hot属性为true
  • webpackbar. 构建过程时的进度条
• loaders
  • 将原本webpack不支持的文件类型通过增加loader获得支持，从而得到有效模块，添加到依赖图(模块转换器，loader执行顺序，由右往左)
  • babel-loader. 兼容低版本js
    1. 按需加载，@babel/preset-env预设中已经包含@babel/plugin-syntax-dynamic-import
  • style-loader/css-loader/postcss-loader/less-loader. 样式文件处理
    1. 注意：当生产环境与开发环境使用不同loader处理时，css优先级是否能够保持一致(项目中遇到的问题)
    2. less-loader ---> postcss-loader ---> css-loader ---> style-loader. 其中less-laoder为预处理器，postcss可以称为后处理器，增加css属性的兼容性
    3. style-laoder.产生<style>标签传入css
  • url-loader/file-loader. 图片文件处理。
    1. 其中esModule设置为false，否则，<img src={require('XXX.jpg')} />会出现<img src=[Module Object] />.
    2. 资源转换为base64可以减少网络请求次数，但是base64数据较大，如果太多的资源是base64，会导致加载变慢，因此设置limit值时，需要二者兼顾。
  • 配置loader的两种方式:
    1. webpack配置文件中在use对象的option属性进行配置
    2. 为**-loader新建配置文件进行配置
• devtool
  • sourcemap. 将编译后的代码映射到原代码，方便debug
• resolve 配置

  • modules resolve配置webpack如何寻找模块所对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，可以根据自己的需要修改默认的规则。

  • alias 配置项通过别名把原导入路径映射成一个新的导入路径。

    1. @hot-loader/react-dom配置，开发环境实现局部刷新

  • extensions 可以缺省文件后缀，在导入语句没带文件后缀时，会自动带上extensions 中配置的后缀后，去尝试访问文件是否存在，因此要将高频的后缀放在前面，并且数组不要太长，减少尝试次数。如果没有配置 extensions，默认只会找对对应的js文件

webpack配置（优化）

• 构建优化与压缩优化
• plugins
  • speed-measure-webpack-plugin 量化构建数据。可以测量各个插件和loader所花费的时间
  • terser-webpack-plugin 压缩js. webpack v5 自带最新的 terser-webpack-plugin，默认就开启了多进程和缓存，构建时，项目中可以看到 terser 的缓存文件 node_modules/.cache/terser-webpack-plugin
• loaders
  • cache-loader 缓存loader.在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中。默认保存在 node_modueles/.cache/cache-loader 目录下。
  • thread-loader 多进程构建。放置在其它 loader 之前，那么放置在这个 loader 之后的 loader 就会在一个单独的 worker 池中运行。在 worker 池(worker pool)中运行的 loader 是受到限制的。每个 worker 都是一个独立的 node.js 进程，其开销大约为 600ms 左右。同时会限制跨进程的数据交换。仅在耗时的操作中使用此 loader
    1. 这些 loader 不能产生新的文件
    2. 这些 loader 不能使用定制的 loader API（也就是说，不能通过插件来自定义）
    3. 这些 loader 无法获取 webpack 的选项设置

webpack5新特性

• entry新语法
  • 与split chunk相比，更符合逻辑表达，但split chunk的控制更加精细化，可以根据业务需求进行选用
• 模块联邦
  • 按需加载功能的实现，但配置项较少，应用场景也较少

babel配置

• babel 在转译的过程中，对 syntax 的处理可能会使用到 helper 函数，对 api 的处理会引入 polyfill。默认情况下，babel 在每个需要使用 helper 的地方都会定义一个 helper，导致最终的产物里有大量重复的 helper；引入 polyfill 时会直接修改全局变量及其原型，造成原型污染。
• plugin变量用来支持某个功能，presets变量是多个plugin的集合
• plugin
  • @babel/plugin-transform-runtime
    1. api 从之前的直接修改原型改为了从一个统一的模块中引入，避免了对全局变量及其原型的污染
    2. helpers 从之前的原地定义改为了从一个统一的模块中引入，使得打包的结果中每个 helper 只会存在一个

代码格式与风格基本配置

• eslint配置
  • 通过npx eslint --init命令使用自带的生成器，可以配置环境，代码风格，项目框架类型，ts等等
• 解决eslint与prettier冲突 官方文档 Integrating with Linters
  • extends配置中增加prettier，放置在最后可以禁用前面配置冲突的规则

ts配置

• tsconfig
  • 编译入口 通过files,includes,excludes控制，其中files支持匹配具体文件，includes支持正则匹配，excludes支持正则匹配，用于排除includes里的文件。
  • 解析规则 moduleResolution配置模块的解析规则有classic和node
    1. classic
       • 相对路径模块。只在当前目录下查找该文件，不进一步解析。
       • 非相对路径模块。从包含导入文件的目录开始依次向上遍历查找，尝试定位匹配的.ts和.d.ts文件
    2. node
       • 相对路径模块。当前相对目录下查找该文件 -> 同名的目录存在package.json包含main配置加载main配置的文件，没有配置main属性，就会看一目录里有没有index.ts或者index.d.ts
       • 非相对路径模块。直接到导入文件所在目录下的node_modules目录下查找，依次向上遍历node_modules目录
  • 扩展非相对路径模块的查找
    1. baseUrl
       • 当上述方式没有找到模块时，会到baseUrl指定的目录进行查找
    2. path
       • 相对于baseUrl所在的目录，用于到baseUrl所在目录下查找时进行路径映射
• eslint
• babel与ts的结合
  • 增加@babel/preset-typescript
  • Webpack配置中向resolve.extensions数组中添加 'ts'
  • 使用babel进行编译时，将ts文件当作js文件使用各种插件进行编译，tsc没有参与编译，因此tsconfig.json没有参与编译，但可以让vscode正常提示和正常import补全

ftp服务器

• vsftpd
  • 简单的一些linux命令:systemctl命令管理服务的启动等操作
  • 常用的查询命令:netstat 命令用于显示各种网络相关信息，如网络连接等
  • 被动模式，FTP服务器开启并发送端口信息给客户端，由客户端连接该端口，服务器被动接受连接，该方式更安全
  • 修改vsftpd.conf配置文件。配置FTP服务器为被动模式

  #除下面提及的参数，其他参数保持默认值即可。
  
  #修改下列参数的值：
  #禁止匿名登录FTP服务器。
  anonymous_enable=NO
  #允许本地用户登录FTP服务器。
  local_enable=YES
  #监听IPv4 sockets。
  listen=YES
  
  #在行首添加#注释掉以下参数：
  #关闭监听IPv6 sockets。
  #listen_ipv6=YES
  
  #在配置文件的末尾添加下列参数：
  #设置本地用户登录后所在目录。
  local_root=/var/ftp/test
  #全部用户被限制在主目录。
  chroot_local_user=YES
  #启用例外用户名单。
  chroot_list_enable=YES
  #指定例外用户列表文件，列表中用户不被锁定在主目录。
  chroot_list_file=/etc/vsftpd/chroot_list
  #开启被动模式。
  pasv_enable=YES
  allow_writeable_chroot=YES
  #本教程中为Linux实例的公网IP。
  pasv_address=<FTP服务器公网IP地址>
  #设置被动模式下，建立数据传输可使用的端口范围的最小值。
  #建议您把端口范围设置在一段比较高的范围内，例如50000~50010，有助于提高访问FTP服务器的安全性。
  pasv_min_port=<port number>
  #设置被动模式下，建立数据传输可使用的端口范围的最大值。
  pasv_max_port=<port number>
  

  • mac使用第三方APP才可写入ftp服务器，这里使用TransMit

nginx配置

• 配置server
  • 静态服务器常用字段
    • 可通过配置规则区分不变资源和常变资源，静态资源做缓存？？(cdn可行否)
    • server : 用于定义服务，http中可以有多个server块
    • listen : 指定服务器侦听请求的IP地址和端口，如果省略地址，服务器将侦听所有地址，如果省略端口，则使用标准端口
    • server_name : 服务名称，用于配置域名
    • location : 用于配置映射路径uri对应的配置，一个server中可以有多个location, location后面跟一个uri,可以是一个正则表达式, / 表示匹配任意路径, 当客户端访问的路径满足这个uri时就会执行location块里面的代码
      • 常见映射
        • = 进行普通字符精确匹配。也就是完全匹配。
        • ^~  前缀匹配。如果匹配成功，则不再匹配其他location,即便还有符合规则的正则匹配也不会被使用。
        • ~  表示执行一个正则匹配，区分大小写
        • ~*  表示执行一个正则匹配，不区分大小写
        • /xxx/ 常规字符串路径匹配
        • /   通用匹配，任何请求都会匹配到
      • 优先级（与配置的位置无关）
        • = 等号类型的优先级最高。一旦匹配成功，则不再查找其他匹配项，停止搜索。
        • ^~类型表达式，不属于正则表达式。一旦匹配成功，则不再查找其他匹配项，停止搜索。
        • ~ ~* 正则表达式类型的优先级次之。如果有多个location的正则能匹配的话，则使用正则表达式最长的那个。
        • 常规字符串匹配类型。按前缀匹配。
        • / 通用匹配，如果没有匹配到，就匹配通用的
    • root : 根路径，当访问http://localhost/test.html，“/test.html”会匹配到”/”uri, 找到root为/usr/local/var/www/html，用户访问的资源物理地址=root + uri = /usr/local/var/www/html + /test.html=/usr/local/var/www/html/test.html
    • index : 设置首页，当只访问server_name时后面不跟任何路径是不走root直接走index指令的；如果访问路径中没有指定具体的文件，则返回index设置的资源，如果访问http://localhost/html/ 则默认返回index.html

    #user nobody;
    
    http {
        server {
            listen       80;
            server_name  localhost;
            client_max_body_size 1024M;
    
            # 默认location
            location  {
                root   /usr/local/var/www/html;
                index  index.html index.htm;
            }
        }
    }
    

• 反向代理
  • 真实的服务器不能直接被外部网络访问，所以需要一台代理服务器，而代理服务器能被外部网络访问的同时又跟真实服务器在同一个网络环境，当然也可能是同一台服务器，端口不同
  • proxy_pass指令

  server {
      listen       80;
      server_name  localhost;
  
      location / {
          proxy_pass http://localhost:8081;
          proxy_set_header Host $host:$server_port;
          # 设置用户ip地址
           proxy_set_header X-Forwarded-For $remote_addr;
           # 当请求服务器出错去寻找其他服务器
           proxy_next_upstream error timeout invalid_header http_500 http_502 http_503; 
      }
  
  }
  

  • 负载均衡

    • 当有2台或以上服务器时，根据规则随机的将请求分发到指定的服务器上处理，负载均衡配置一般都需要同时配置反向代理，通过反向代理跳转到负载均衡。nginx目前支持自带3种负载均衡策略，还有2种常用的第三方策略，安装第三方模块方可使用(fair, url_hash)
    • 轮询

    第一次请求分配第一台服务器，第二次分配到第二台服务器，循环轮询，服务器挂了可以自动剔除

    upstream web_servers {  
       server localhost:8081;  
       server localhost:8082;  
    }
    
    server {
        listen       80;
        server_name  localhost;
        #access_log  logs/host.access.log  main;
    
    
        location / {
            proxy_pass http://web_servers;
            # 必须指定Header Host
            proxy_set_header Host $host:$server_port;
        }
     }
    

    • 权重

    指定轮询几率，服务器接收请求的比例就是各自配置的weight的比例 backup是备份。

    upstream test {
        server localhost:8081 weight=1;
        server localhost:8082 weight=3;
        server localhost:8083 weight=4 backup;
    }
    

    4次请求只有一次被分配到8081上，其他3次分配到8082上。backup是指热备，只有当8081和8082都宕机的情况下才走8083

    • ip_hash

    轮询使得有状态的请求(带session)请求到另一台服务器需要重新登录。一次需要一个用户只访问一个服务器，请求按照ip的hash结果分配，一个用户固定访问一个服务器。

    upstream test {
        ip_hash;
        server localhost:8080;
        server localhost:8081;
    }
    

    • fair

    按照服务器的响应时间来分配请求，时间短优先分配

    upstream test {
        fair;
        server localhost:8080;
        server localhost:8081;
    }
    

    • url_hash

    请求按照url的hash结构来分配请求，使得一个url定向到固定的服务器

    upstream test {
        hash $request_uri;
        server localhost:8080;
        server localhost:8081;
    }
    

• 其他指令
  • return 返回状态码
  • rewrite 重写uri请求
  • error_page 自定义错误码返回页面
  • log_format 访问日志
  • deny 禁止访问某目录
  • 内置变量
    • $request_uri ：包含请求参数的原始URI，不包含主机名，如：/foo/bar.php?arg=baz
    ......

ci/cd配置

• github run