记一次 Vue 单页面上线方案的优化

前段时间在工作中会设计到项目上线方案，也踩了一些坑，写个博客记下来她们。

前提

• 项目是 SPA 单页面应用（ Vue 项目），首次会加载 manifest ，这个文件会记录当前项目中所需要的 JS 的版本映射，由于是 SPA ，在点击其他页面时只会加载对应版本的 JS
• 静态文件和 HTML 文件在同一域名中，比如：

  /
  /login/
  /static/js/*.js
  /static/img/*.png
  

第一代上线方案 - ln 软链接

本身运维线上部署使用的软链接，大概的脚本如：

#!/bin/bash

# 基础路径
base="/usr/webapp"

# 项目名
repo="www.demo.com"

# 前端项目产出 dist 包
dist_tar="${base}/tar/${repo}.tar.gz"

# 网站根目录
wwwroot="${base}/wwwroot/${repo}"

# 网站源文件
wwwsource="${base}/wwwsource/${repo}/$(date '+%Y-%m-%d@%s')"

# 创建目录
mkdir -p "$wwwsource/tar" "$wwwsource/data"

# 解压
tar xzvf $dist_tar -C "$wwwsource/data"

# 保留一份数据
cp -r $dist_tar "$wwwsource/tar"

# 创建根目录软链接到解压的数据目录
mkdir -p `dirname $wwwroot`
ln -F -s "$wwwsource/data" "$wwwroot"

注意：脚本只是一个栗子，认真你就输了。

遵循：

• /usr/webapp/tar/${项目名}.tar.gz - 最新前端编译产出的文件包，就是 dist/ 目录下的文件
• /usr/webapp/wwwroot/${项目名} - 项目的根目录，但不是真实文件，是通过软链接创建的
• /usr/webapp/wwwsource/${项目名}/${年-月-日}@${时间缀} - 项目的真实源文件

  ./data
  ./tar
  

由于使用软链接，回滚非常的高效（只需要重新创建指定我要上班的软链接就可以），但由于 SPA 单页面应用发现每次上线后会出现大量的 404 状态，由于是各种查，没想到最终的原因竟然是：

SPA 在首次加载时会记录当前版本的文件名映射，在用户打开网站后如果用户没有刷新，在这个期间项目上线了，用户再点击首次访问新的页面时，加载对应的静态文件会是 404 ，因为新的版本对应新的文件（在有变更的前提下）。

第二代上线方案 - 增量

增量顾名思义是每次上线时在线上都是新增、覆盖，而不会删除老文件，大概脚本如：

#!/bin/bash

# 基础路径
base="/usr/webapp"

# 项目名
repo="www.demo.com"

# 前端项目产出 dist 包
dist_tar="${base}/tar/${repo}.tar.gz"

# 网站根目录
wwwroot="${base}/wwwroot/${repo}"

# 网站备份
wwwback="${base}/wwwback/${repo}"

# 解压，增量
tar xzvf $dist_tar -C $wwwroot

# 保留一份数据
mkdir -p $wwwback
cp -r $dist_tar "${repo}`date '+%Y-%m-%d@%s'`.tar.gz"

注意：脚本只是一个栗子，认真你就输了。

遵循：

• 线上代码不删除
• /usr/webapp/tar/${项目名}.tar.gz - 最新前端编译产出的文件包，就是 dist/ 目录下的文件
• /usr/webapp/wwwroot/${项目名} - 项目根目录
• /usr/webapp/wwwback/${项目名}/${项目名}@${年-月-日}@${时间缀} - 备份文件

解决了线上 404 静态的问题，但发现：

• @PM：上线个xx活动页吧。
• @FE：收到！
• @PM：我擦，活动页临时不做了，赶快把活动页给删除吧，快点上线。
• @FE：emmmm...

由于我复制了个 404.html 覆盖了活动页，这TM叫什么鬼啊。。。

第三代上线方案 - 按需增量

结合上面的教训：静态文件 404 + HTML 文件删不掉的问题，我们约定个规则：

• 前端打包会把静态文件和 HTML 文件区分，如：

  dist/html/
  dist/static/
  

• 制定新规则：
  • HTML 软链接上线
  • 静态文件增量上线

脚本如：

#!/bin/bash

# 基础路径
base="/usr/webapp"

# 项目名
repo="www.demo.com"

# 前端项目产出 dist 包
dist_tar="${base}/tar/${repo}.tar.gz"

# 网站目录，里面会有 html 和 static
wwwroot="${base}/wwwroot/${repo}"

# 网站源文件
wwwsource="${base}/wwwsource/${repo}/$(date '+%Y-%m-%d@%s')"

# 创建目录
mkdir -p "$wwwsource/tar" "$wwwsource/data"

# 解压
tar xzvf $dist_tar -C "$wwwsource/data"

# 保留一份数据
cp -r $dist_tar "$wwwsource/tar"

# 创建根目录
mkdir -p $wwwroot

# 增量上线静态文件
cp -r "$wwwsource/data/static/*" "$wwwroot/static/"

# 软链接 HTML 文件
ln -F -s "$wwwsource/data/html" "$wwwroot/html"

注意：脚本只是一个栗子，认真你就输了。

遵循：

• /usr/webapp/tar/${项目名}.tar.gz - 最新前端编译产出的文件包，就是 dist/ 目录下的文件
• /usr/webapp/wwwroot/${项目名} - 项目的目录
  • ./html/ - HTML 根目录，软链接到 /usr/webapp/wwwsource/${项目名}/${年-月-日}@${时间缀}/data/html
  • ./static/ - 静态文件根目录
• /usr/webapp/wwwsource/${项目名}/${年-月-日}@${时间缀} - 项目的真实源文件

  ./data
  ./tar
  

回滚的时候只需要回滚 HTML 文件即可，对了，还需要修改 Nginx 配置目录，如：

server {
    root /usr/webapp/wwwroot/${项目名}/html/;

    location /static/ {
        alias `/usr/webapp/wwwroot/${项目名}/static/;
    }
}

这就一定解决问题了？其实并不是。。。因为打开 SPA ，只要不刷新，其实你后面删除的 HTML 文件就会存在的。。。正所谓成也 SPA 败也 SPA 。。。

那么如何处理：我们正在尝试使用定时请求线上版本号，如果发现有更新则说明有上线，那么在路由里就切换为 location.href 跳转。当然这个方案我们还在尝试中，期待 新一代的上线方案 诞生。

CDN 缓存策略

前端项目往往离不开 CDN ，我们这样配置的：

如果你有好的策略或者上线方案，请联系我。。。