一个端口配置多个SPA项目

发表于 | 分类于 |

SPA 有 Hash 和 History 两种路由模式，Hash 路由的部署比较简单，直接丢到对应的目录就可以了。相对而言 History 路由的部署要麻烦一点，主要是浏览器刷新 404 的问题,解决方案参考：不同的历史模式。

但今天的重点是：一个端口配置多个 SPA 项目。

由于各种个样的原因，我们只有一个对外暴露的端口，那我们同时又有好几个项目，所以不得不将所有的项目都部署到一个端口下。这个时候有的童鞋就要说了，这个很简单嘛，配置一下项目根路径就可以了。说的不错，对呀 Hash 路由来说，就这么简单。但如果子项目都是 History 路由呢？

其实这个也不复杂，首先需要配置项目根路径，然后再配置多个 nginx 转发规则即可，如：

1
2
3
4
5
6
7
8
9
10
server {
        listen       80;
        server_name  localhost;

        location /project {
                # root 是 project 的上级目录
                root   /.../path;
	        try_files $uri $uri/ /project/index.html;
        }
}

但是随着项目的增加以及 API 接口的反向代理，配置会越来越多，将会大大增加部署时的复杂度。所以有必要通过程序手段来自动化配置。

回顾一下 History 路由产生 404 的原因，是因为服务器在路径/路由查找文件（服务器的默认行为）时，没有找到路径/路由下的资源，返回了 404。所以在 nginx 中配置了没有匹配的资源则返回入口文件。

如果使用服务器来实现也是相同的原理，核心代码就两行，node 代码如下：

1
2
3
app.get("/xxx/", function (req, res) {
	res.sendFile(path.join("/root/", "xxx/index.html"));
});

这样就简单实现了服务器访问 SPA 应用，那我们再根据固定的规则来命名 SPA 应用，就可以将上面的 xxx 修改为项目变量。

整体思路如下：

  1. 扫描固定目录下的所有文件夹，并将符合规则的目录读取出来
  2. 动态注册路由，启用服务
  3. 监听目录下文件变动，如果有文件变化重启服务
  4. 将上述程序打包到 docker 镜像

至此，整个前端配置基本完成，可以大大的简化部署复杂度。

[越努力，越幸运！]