二十二、大型项目的编译，部署以及性能优化
1、前言
* 引言
- 这一周我们来完成一个大型项目开发完毕以后的过程，那就是将本地运行的项目编译成符合线上要求的
版本，将它部署上线，并且尽可能的完成性能优化，对于用户访问的页面来说，时间就是金钱，多加载
一秒都可能面临用户的跳出。
- 优化的手段的本质就是**减少代码体积，加快响应速度**
* 知识点
- Vue CLI编译不同环境的代码
~ 几种环境的概念
~ Vue CLI中的模式
~ 使用环境变量文件
- Webpack
~ 基础
~ 手写一个Loader
~ 手写一个Plugin
- 个性化Vue CLI编译来完成打包分析和优化
~ Vue.config.js
~ 安装分析插件-webpack-bundle-analyzer
~ 各种webpack打包优化策略-我们采用渐进式的几种方式不断优化
- 部署以及HTTP传输的优化
~ nginx安装和简介
~ 使用HTTP缓存expires到cache-control
~ 使用HTTP数据压缩gzip到Brotli到静态生成
~ 使用HTTP协议特性从keep-alive到HTTP/2
* 学习方法
- 实践出真知，每一次优化都有数据的支持
2、为生产环境构建代码
* 应用部署的流程
- 构建
~ Javascript语言本身是不需要编译的。
~ 但是现代的前端项目使用的语言和或者的模块系统都无法在浏览器中使用，都需要使用特定的
bundler将源代码最终转换为浏览器支持的Javascript代码。
- 不同的环境
~ 生产环境（production）：https://imooc-lego.com/
~ 开发环境（development）：http://localhost:8080/
~ 测试环境（test或者staging）：http://test.imooc-lego.com/
- 生产和开发环境的**区别**
- 开发环境
~ 会添加丰富的错误提示
~ 可以使用mock server或者本地后端环境
~ 添加各种便利的功能-比如hot reload，自动刷新
~ 不太关心静态资源的大小，最好提供最丰富的调试信息（sourcemap）等。
- 生产环境
~ **稳定**是最重要的原则
~ **速度**是第一要务
- 生产环境和测试环境的区别
~ 高度相似
~ 使用的后端服务不一样
* 各种框架对不同环境的天生适配
- Vue
~ https://cn.vuejs.org/v2/guide/deployment.html
~ https://cn.vuejs.org/v2/guide/installation.html#%E7%9B%B4%E6%8E%A5%E7%94%A8-lt-script-gt-%E5%BC%95%E5%85%A5
~ vue-cli天生支持不同命令采用不同版本的vue
- React
~ https://zh-hans.reactjs.org/docs/optimizing-performance.html
~ 异曲同工，create-react-app也支持不同命令采用不同版本的React
* Vue Cli提供的内置的build命令
- 文档地址：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build
########
// 查看所有命令
npx vue-cli-service help
// 查看具体一个命令的选项
npx vue-cli-service help build
########
3、Vue Cli的模式
* 文档地址：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
- development模式用于vue-cli-service serve
- test模式用于vue-cli-service test:unit
- production模式用于vue-cli-service build
* **模式**将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种对不同环境
优化过的webpack配置。
* test模式，Vue CLI会创建一个优化过后的，并且旨在用于单元测试的webpack配置，它并不会处
理图片以及一些对单元测试非必填的其他资源。
* development模式会创建一个webpack配置，该配置启用热更新，不会对资源进行hash也不会
打出vendor bundles，目的是为了在开发的时候能够快速重新构建。
* 当运行vue-cli-service的时候，它会根据不同的命令，设置对应的模式，模式对应的是一个**环
境变量**，它是一个Nodejs项目中通用的值，称之为**NODE_ENV**
* 在运行命令的时候设置环境变量的工具：**cross-env**
- 文档地址：https://github.com/kentcdodds/cross-env
* 环境变量文件
- https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F
- 在你的项目根目录中放置下列文件来指定环境变量
########
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被git忽略
.env.[mode] # 只在指定的模式中被载入
########
- **一个环境文件只包含环境变量的“键=值”对：**
########
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
########
- **不要在你的应用程序中存储任何机密信息（例如私有API密钥）！**
- **环境文件的优先级**
~ cross-env > .env.[mode] > .env > 运行时默认的mode
- **源代码到浏览器运行的过程**
~ 编译阶段（webpack） -> 浏览器运行（客户端）
~ （所有的环境变量都可用） -> （只有特殊的环境变量可用，使用特殊的变量名称）
- **在客户端使用环境变量**
~ VUE_APP_：开头的变量
~ NODE_ENV：当前使用的模式
~ BASE_URL：部署到的基础路径
- **运行方式**
- 在构建过程中，**process.env.VUE_APP_**开头的变量都将会被相应的值所取代。在
4、Webpack构建优化
* Bundler-打包工具
- 将浏览器不支持的模块进行编译，转换，合并最后生成的代码可以在浏览器端良好的运行的工具。
* **Loader**
- https://webpack.docschina.org/concepts/loaders/
- loader用于对模块的源代码进行转换。loader可以使你在import或“load（加载）”模块时预处理文
件。
* **多个Loader**
- module.rules允许你在webpack配置中指定多个loader。这种方式是展示loader的一种简明方
式，并且有助于使代码变得简洁和易于维护。
* **plugins**
- https://webpack.docschina.org/concepts/plugins/
- 插件是webpack的支柱功能。webpack自身也是构建于你在webpack配置中用到的相同的插件
系统之上！插件目的在于解决loader无法实现的其他事。（我自己的理解，loader解决的是各种不
同资源的问题，plugins更多解决的是项目整体的事情）
5、loaders的原理
* 在loader内部获取它的选项
- 使用https://github.com/webpack/loader-utils这个webpack官方的loader的第三方工具库。
* Marked.js的配置选项
- https://marked.js.org/using_advanced
* 多个Loader串联
- 最后的loader最早调用，将会传入原始资源内容。
- 第一个loader最后调用，期望值是传出JavaScript和source map（可选）。
- 中间的loader执行时，会传入前一个loader传出的结果。
* 将markdown转换为html：turndown
- 地址：https://github.com/domchristie/turndown
6、Plugins的原理
* Loaders关注代码中的单个资源，Plugins关注整体流程，可以接触到webpack构建流程中的
各个阶段并劫持做一些代码处理。
- 官方的教程：https://webpackjs.org/contribute/writing-a-plugin/
* 插件的格式
- 一个JavaScript函数或JavaScript类
- 在它原型上定义的apply方法，会在安装插件时被调用，并被webpack compiler调用一次
- 指定一个触及到webpack本身的事件钩子，即hooks，用于特定时机额外的逻辑
* Compiler Hooks列表
- https://webpack.js.org/api/compiler-hooks/
7、个性化构建结果-vue.config.js
* 在基础的配置上，自定义构建的结果-可以使用vue.config.js
- 文档地址：https://cli.vuejs.org/zh/config/#vue-config-js
* 简介两个字段
- **PublicPath**-部署应用包时的基本URL，这个配置对应的是webpack的PublicPath属性
~ 默认值为'/'，Vue CLI会假设你的应用是被部署在一个域名的根路径上
https://abc.com/
~ 可以设置为子路径-如果你的应用被部署在https://abc.com/sub/那么就设置为'/sub'
~ 可以设置为CDN路径-在我们的应用中，最后静态资源是要全部上传到CDN的，（脚手
架自动完成），所以这里可以设置为一个CDN域名-'https://oss.imooc-lego.com/editor'
~ 还可以设置为绝对路径（''或者'./'），这样所有的资源都会被链接为相对路径
- **css.loaderOptions**属性
- 向CSS相关的loader传递选项
- Ant-design-vue的样式变量：https://www.antdv.com/docs/vue/customize-theme-cn
- https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less
- 添加更多的CSS预处理器：
https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8
- 特别注意less和less-loader的版本问题。不要装最新的，建议选用：
########
"less": "^3.12.0",
"less-loader": "^7.1.0",
########
* bundle打包分析工具
- webpack-bundle-analyzer：https://www.npmjs.com/package/webpack-bundle-analyzer
- 可以作为webpack plugins使用
- 可以作为cli命令行工具使用
* 特点和分析过程
- 分析Bundle由什么模块组成
- 分析什么模块占据了比较大的体积
- 分析是否有什么错误的模块被打包了
* 自定义webpack配置
- https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
* 根据图表的优化步骤
- 看看有没有什么重复的模块，或者没有用的模块被打包到了最终的代码中
~ 看看package.json，对比一下是否有应该在devDeps的模块，被错误的放置到了deps
当中
~ 检查是否有重复加载的模块，或者是功能大体相同的模块。
使用**es**版本的第三方库，享受tree-shaking的功利。
~ 检查是否有没有用的模块是否打包到了最终的文件中。
使用webpack ignore plugin：https://webpack.js.org/plugins/ignore-plugin/#root
- 按需加载ant-design-vue组件库
~ https://2x.antdv.com/docs/vue/introduce-cn/
* 使用SplitChunksPlugin继续优化文件大小
- 继续风格第三方库的优点
- 充分利用浏览器的缓存
- 浏览器支持平行加载多个文件
~ HTTP1对同一域名并行加载的个数限制
~ HTTP2完全突破这个限制
8、部署上线以及服务端的优化
* 前端部署：https://cli.vuejs.org/zh/guide/deployment.html
- 原理就是：将构建生成的产物直接拷贝到任何的静态文件服务器当中。
* 后端部署：https://eggjs.org/zh-cn/core/deployment.html
- 几乎没有构建过程：除非你用了typescript等需要编译的语言。
- 方案一：直接将本地的源代码打个压缩包拷贝到目标服务器，然后启动服务器。
- 方案二：在服务器中直接pull源代码，install，然后启动服务器。
* Nginx作为服务器软件，它的优点：
- 特别适合前后端分离的项目
- 保证安全
- 非常快
- 支持负载均衡
- **Nginx**下载地址：http://nginx.org/en/download.html
* HTTP缓存详解
- Expires：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Expires
- **Expires响应头包含日期/时间，即在此时候之后，响应过期**
- 使用nginx添加对应的响应头：expires指令
- 文档地址：http://nginx.org/en/docs/http/ngx_http_headers_module.html
- **Cache-Control**：通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存
机制。
- 文档地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control
- **Etag**：ETagHTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，
因为如果内容没有改变，Web服务器不需要发送完整的响应。
- 文档地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/ETag
- **Last-Modified**：是一个响应首部，其中包含源头服务器认定的资源做出修改的日期及时
间。
- 文档地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Last-Modified
- nginx配置Etag：http://nginx.org/en/docs/http/ngx_http_core_module.html#etag
- 304 Not Modified：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/304
* 使用gzip实现静态文件的压缩
- Gzip是一种压缩文件格式并且也是一个在类Unix上的一种文件解压缩的软件
- 文档地址：http://nginx.org/en/docs/http/ngx_http_gzip_module.html
* nginx gzip的设置
########
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 1;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在mime.types文件中找到。
gzip_types text/plain application/javascript application/x-javascript
text/css application/xml text/javascript application/x-httpd-php
image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf
font/opentype font/x-woff image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6\.]";
# 设置压缩所需要的缓冲区大小
gzip_buffers 32 4k;
########
9、更高效的压缩算法Brotli
* 引言
- Google软件工程师在2015年9月发布了包含通用无损数据压缩的算法，特别侧重于
HTTP压缩。其中的编码器被部分改写以提高压缩比，编码器和解码器都提高了速度，
流式API已被改进，增加更多压缩质量级别。
* 压缩比对照表
- https://quixdb.github.io/squash-benchmark/#ratio-vs-compression
* 使用前提
- 浏览器支持：https://caniuse.com/brotli
- HTTPS协议
* NGINX对应的模块：https://github.com/google/ngx_brotli
10、HTTP协议对于传输的优化
* 引言
- HTTP是建立在TCP协议之上，所以**HTTP协议的瓶颈及其优化技巧都是基于TCP协
议本身的特性**，例如tcp建立连接的3次握手和断开连接的4次挥手以及每次建立连
接带来的延迟时间。所以减少这些重新握手和至关重要。
* KeepAlive属性
* KeepAlive的优点
- TCP连接更少，这样就会节约TCP连接在建立、释放过程中，主机和路由器上的
CPU和内存开销。
- 网络拥塞也减少了，拿到响应的延时也减少了
11、使用HTTP/2提升性能
* 引言
- 2010年SPDY【https://baike.baidu.com/item/SPDY】演化到
- 2015年HTTP/2【https://developer.mozilla.org/zh-CN/docs/Glossary/HTTP_2】
* 兼容性
- 需要浏览器支持-https://caniuse.com/http2
- 需要HTTPS协议支持
* 主要特性
- 二进制协议
~ HTTP/2.0 request:
~ HTTP/1.1 request:
- 多路复用
~ 在HTTP/2中引入了多路复用的技术。多路复用很好的解决了浏览器限制同一个域名
下的请求数量的问题，同时也接更容易实现全速传输，毕竟新开一个TCP连接都需要
慢慢提升传输速度。
~ 同个域名只需要占用一个TCP连接，使用一个连接并行发送多个请求和响应，消除了因
多个TCP连接而带来的延时和内存消耗。
- Header压缩
~ HTTP/2在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键-值对，对于相
同的数据，不再通过每次请求和响应发送。
* 见证时间
- 之前：DOMContentLoaded 4.26s
- 之后：2.33s
12、本周总结
* 引言
- 优化的本质就是**减少代码体积****加快响应速度**。
- 杜绝纸上谈兵，性能优化要**实事求是**，用直观的数据展示效果。在**简历**或者**面试**中
可以直接将数据摆出来，吸引注意。
* 知识点回顾
- 不同环境的概念-开发，预生产，生产
- Vue Cli编译（build）
~ 模式的概念
~ 使用环境变量文件.env
- Webpack
~ Webpack.config.js/Loader/Plugin
~ Loader
获得原始代码
使用工具进行转换
多个Loader可以串联，下一个Loader可以获得上一个的处理结果
最后输出JS模块代码
~ Plugin
一个有着apply方法的特殊的类
compiler对象通过hooks的方式可以拿到编译不同过程的各个阶段，然后进行自定义
- 通过Vue.config.js进行构建优化
~ webpack-bundle-analyzer
~ 移除不需要的第三方库lodash，moment
~ 按需加载组件库ant-design-vue
~ 分离第三方库手动/按照大小自动
~ 路由懒加载-动态import
- 部署以及HTTP传输优化
~ 部署的概念
~ nginx安装和简介
~ 使用HTTP缓存expires到cache-control到etag以及last-modified
~ 使用HTTP数据压缩gzip到Brotli到静态生成
~ 使用HTTP协议特性从keep-alive到HTTP/2
* 学习方法
- 实践出真知，每一次优化都有数据的支持。
二十三、基于Vue3SSR渲染作品H5页
1、回顾
* 时间跨度比较久，温故知新。
- 多个项目之间的关系
- 业务组件库lego-components为何要单独抽离出来？
- 数据流转关系
- 发布功能和url设计
2、整体设计思路
* 整体思路
- 根据id uuid获取作品数据
- 判断status（未发布，强制下线）
- 作品数据+lego-components-->渲染出h5页面
- C端的特点：流量大，交互简单，所以要访问更快、服务器压力更小（所以之前考虑过，要发布到CDN）
* 使用SSR
- 关于SSR
~ SSR并不是新概念，Web系统最早产生时就是SSR（asp jsp php等），后来才前后端分离。
再后来，又大前端，前后端整合......
~ SSR优点是快，缺点是不灵活（相比Vue React等框架）。
后来有了Vue React的SSR框架，即快、又灵活，但又太复杂、研发成本高......
~ 所以，SSR能不用就不用，不是所有情况都适用SSR。
- 如何使用SSR
~ 技术方案指定，要基于业务需求。不要为了技术而技术。
~ 业务需求特点：流量大，交互简单
使用SSR，速度快
要使用lego-components，所以使用Vue3 SSR
仅仅渲染一个h5页面，没有路由，交互简单，所以不用框架
* 使用缓存
- 流量大时，频繁访问数据库是一个性能瓶颈
- 使用redis缓存，可解决这个问题
- 考虑何时清空缓存？
~ 重新发布时
~ 强制下线时
* 网页前端
- SSR渲染页面，所有前端也要管
~ 统计，分渠道统计（回顾“业务闭环”）
~ 渠道参数检查（防止没有渠道号的情况）
~ 事件
~ 微信分享（分享回流）
* 小结
- 整体思路
- SSR
- 缓存
- 网页前端功能
3、写技术方案文档
* 架构设计图
- 上面讲的比较乱，下面画个图汇总一下，然后就能清晰了。
* 写技术方案文档
- 技术选型
- url格式（和B端保持url格式一致）
- 架构设计图
- SSR渲染页面（结合lego-components）
- h5页面前端的功能（统计、事件、微信分享）
4、搭建项目环境
* 引言
- 注意：h5-server和biz-editor-server公用一个数据库。
* 主要产出
- 搭建h5-server项目环境
- 自动部署到测试机
* 主要内容
- 回顾biz-editor-server项目环境，CI/CD流程
- 搭建h5-server开发环境
- CI/CD自动部署到测试机
* 注意事项
- 如何通过docker-host访问数据库？此处请一定认真听讲
5、回顾
* 回顾biz-editor-server的重点
- 技术选型
- koa2系统搭建
- CI/CD流程
- docker docker-compose
6、搭建h5-server项目环境
* 创建Koa2项目环境
- 端口改为3001
- 开发工具配置-eslint commitlint test等
- 介绍pug
* 连接数据库
- 配置
- db连接（注意，不需要同步mysql数据表了，直接使用即可）
- cache
- models
- /api/db-check路由
7、自动部署到测试机
* 测试环境下，数据库依赖于biz-editor-server
- 要和biz-editor-server部署到一台服务器上
- 需要biz-editor-server启动docker-compose
* 代码改动
- docker和docker-compose
- github actions
* 如果通过docker-host连接数据库呢？--回顾一下docker容器和宿主机的关系。
8、Vue3 SSR渲染页面
* 引言
- SSR是页面性能优化的终极方案
* 主要产出
- 使用Vue3 SSR渲染出页面html（仅仅是html，还有很多功能实现不了）
* 主要内容
- 开发路由
- Vue3 SSR调研
- Vue3 SSR渲染页面
* 注意事项
- 用缓存，就得考虑何时要清空缓存
- 预览页，要带有明显的标示，一面被误当作发布页面
9、开发路由
* 哪些路由
- 发布
- 预览
- 404
- error
* 代码修改
- 先输出网页内容，跑通流程。
~ routes/works.js
~ routes/error.js
~ controller/works.js
~ cache/works.js
~ service/works.js
* 注意事项
- 何时清空缓存？
~ 重新发布作品时
~ 强制下线时
- 预览页，要加一个红色提示，防止被误发布出去
10、Vue3 SSR调研
* Vue3的文档里暂时没有SSR API（你看视频时可能就更新了），但是可以从源码中找到文档和test。
* 写一个单独的demo演示
- renderToString
- renderToStream
* PS：建议写一篇新技术调研文档，把调研结果分享给团队的其他人。
11、Vue3 SSR渲染页面
* 结合lego-components：https://github.com/imooc-lego/lego-components
* 代码修改：
- 安装@vue/server-renderer和lego-components
- controller/render.js（注意px2vw和h5响应式）
- route/works.js renderPage
* 注意，目前只是渲染了页面的html结构，没有任何js逻辑，如事件、分享、渠道判断等。
12、H5前端功能
* 引言
- H5除了html代码之外，还有很多功能需要js css等来实现。而且还要引入lego-components的css。
- 默认情况下，所有的js css等都可以写在src/public文件夹里，但这是一个非常原始的方式--没有
打包，直接输出。所以，我们需要借助webpack打包js css等，还要发布到CDN上--跟前端项目一样。
- 要开发H5前端功能，我们需要分两步
~ webpack打包静态文件，并发布到CDN
~ 开发各个前端功能
* 主要产出
- 开发前端功能：渠道号检查、事件、统计
* 主要内容
- webpack打包静态文件
- 使用打包结果渲染页面
- 静态文件发布到CDN
- 开发前端功能：渠道号检查、事件、统计
* 注意事项
- 先上传文件到OSS，OSS绑定CDN，即实现了常说的CDN功能
13、webpack打包静态文件
* 设计思路
- js css的源代码，包括lego-components样式的引入，写在src/assets。
- 经过webpack打包，输出到src/public。
- webpack打包配置在build-assets。
- src/public是koa2默认的静态文件服务，所以输出到这里，就可以有静态服务。
- src/public需要加入到.gitignore，它就像dist，无需存储到git。
* 代码演示
- 安装webpack相关插件
- build-assets/下的webpack配置文件
- src/assets/下的静态文件
- package.json中增加build-assets-相关scripts
- .gitignore屏蔽掉src/public
14、使用打包结果渲染页面
* 引言
- 简单粗暴的方式：直接引用public下的js和css--但这样不行，因为：
线上环境下使用contenthash，文件名改变，不能每次都改模板文件
* 解决方案
- 重写ctx.render，动态读取public下的文件，动态传给pug模板，动态渲染出来。
- 【注意】这一步需要在启动服务时就执行，而不是每次req时访问文件。
* 代码演示
- 增加src/middlewrires/renderWithAssets
- 注册中间件src/app.js
- 代码中ctx.render改为ctx.renderWithAssets
- package.json中修改scripts，启动服务前先打包
- 修改js文件，然后运行npm run dev可以看到效果。
15、静态文件上传到CDN
* webpack打包->上传CDN->启动服务
* 代码演示
- build-assets/assets-upload-oss.js
- src/middlewaires/renderWithAssets判断是否要显示CDN地址
- package.json中修改scripts，上传CDN
* 注意，先上传文件到OSS，OSS绑定CDN，即实现了常说的CDN功能
16、开发前端功能
* 功能
- 渠道号检查
- 分渠道统计
- 事件（跳转时带上querystring）
* 代码演示
- src/assets/js/index.js入口文件，引入各个功能
- views/layout.png加入百度统计，事件信息
- routes/works.js输出事件信息
17、微信jssdk
* 引言
- 什么是分享回流？（微信生态的重要性）
* 主要产出
- 从0实现微信jssdk配置
- 微信分享
* 主要内容
- 回顾SSO流程
- 生成微信jssdk配置的流程
- 代码演示
- 线下调试
* 注意事项
- 文档随时可能会变，学会自己看文档，以你当前学习时的文档为主
- 这个作为一个黑盒，独立的模块，看不懂也不会影响整个系统的学习
- 个人的公众号，没有分享的权限，必须有公司资质--但这不影响学习
18、注册微信公众号
* 引言
- 获取appid和secret
- 绑定域名
- 绑定ip白名单（server端获取access_token和ticket时）
- 一个txt静态文件MP_verify_CF2giMLYs5C9eiKV.txt，放在网站根目录（文件名和内容，可能不一样）
* 获取微信jssdk配置信息
- 参考文档
~ 微信jssdk文档
~ 获取access_token
~ 通过access_token获取ticket
~ 生成sign和jssdk配置
~ 在下生成sign
- 过程
~ 获取access_token，需缓存
~ 获取ticket，需缓存
~ 生成签名
~ 生成最后的配置
~ 注意，获取access_token和ticket时需要ip白名单。可以在不同的机器分别测试
19、代码演示
* txt静态文件
- src/assets/MP_verify_CF2giMLYs5C9eiKV.txt
- build-assets/webpack.common.js拷贝txt静态文件
* 后端代码
- src/vendor/wx.js
- src/cache/wx.js
- src/controller/wx.js
- src/middlewares/getWxConf.js（并在/:idAndUuid路由中注册，因为只有这个路由也被分享）
- src/routes/works.js中renderPage函数
* 前端代码
- src/assets/js/wx-jssdk/前端js文件
- src/views/layout.pug
- debug模式，url参数wx_js_sdk_debug=1
20、线下调试
* 引言
- 测试环境，模拟线上域名进行调试、改bug。
* 代理工具
- Mac OS-charles windows-fiddler
- 代理工具所具备的能力
~ 手机配置代理，在电脑上抓包
~ https抓包
~ 电脑本地代理，抓包
~ Map remote
- charles注意事项
~ 使用macOS代理时，提前把代理工具关闭掉！！！
~ iphone代理之后，safari会出现“此连接非私人连接”，但微信扫码打开网页就没事儿
* 调试步骤
- 以charles为例
~ 配置Map remote（勾选Preserve host in header fields，
否则server拿不到代理的host），电脑上能代理成功
~ 配置手机代理，扫码访问线上域名
~ 开启debug模式，调试错误
* permission denied
- permission denied-个人的公众号，没有分享的权限，必须有公司资质
21、单元测试和接口测试（作业）
* 引言
- 功能不复杂，训练写单元测试的流程，以及使用github actions自动测试。
* 代码改动
- __test__/下所有文件
- package.json中scripts
~ test改为test:local和test:remote
~ 环境变量改为NODE_ENV=test_local和NODE_ENV=test_remote
- gitHub actions
~ npm run test改成npm run test:local或者npm run test:remote
~ deploy dev之前不做测试，因为没有数据库环境
- src/utils/env.js，增加test:local和test:remote
- 增加jest.config.js文件
- src/controller/wx.js，isTest时不生成微信token和ticket
- 所有代码可参考：https://github.com/imooc-lego/h5-server-open
* 注意事项
- 实际开发中，test dev应该是并行的。课程这里是为了作业而把test滞后了。
22、H5服务端：基于Vue3 SSR渲染作品H5页
* 将收获什么
- Vue3 SSR渲染页面，使用lego-components
- webpack打包静态文件，上传到OSS
- 从0对接微信jssdk
* 主要内容
- 技术方案设计
- 搭建项目环境，跑通github actions流程
- 使用Vue3 SSR渲染页面
- H5前端功能：检查渠道、事件跳转、统计等
- 使用微信jssdk做微信分享
* 关键词
- 发布、预览
- H5
- Vue3 SSR
- 微信jssdk
* 学习方法
- 结合之前将biz-editor-server的发布功能，回顾是如何设计的
- 搞清楚webpack打包静态文件、并发布到OSS，这件事的意义是什么，不要一头扎到技术细节里
* 注意事项
- 把微信jssdk当作一个黑盒，搞不懂也不影响其他的
- 不要把SSR想的过于高大上、过于复杂，它不是个新东西。技术方案，越简单越好
