如何为docker化部署的Vue3应用添加liveness probe存活探针接口

你当前使用Nginx托管Vue静态资源的部署架构下，优先推荐在Nginx层直接配置健康检查接口，无需修改前端代码，性能更高、适配k8s探针的服务端请求场景。

方案1：Nginx 配置实现（推荐） #

1. 编辑项目中的nginx.conf配置文件，在server配置块中新增/status路径的专属匹配规则，优先级要放在原有根路径规则之前：

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        root /app;
        index index.html;

        # 新增健康检查接口配置
        location /status {
            default_type application/json;
            return 200 '{"status":"ok"}';
        }

        # 保留你原有的Vue路由适配规则
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

2. 配置修改完成后重新构建Docker镜像即可，后续访问/status路径会由Nginx直接返回200状态码和对应JSON响应，完全不经过前端路由逻辑，完美适配k8s的liveness probe请求。

方案2：Vue 应用层实现（仅适用于SSR部署场景） #

如果你使用的是服务端渲染（SSR）模式的Vue3应用，无法修改Nginx配置时可以通过路由守卫实现：

1. 在路由配置文件中新增优先级最高的/status路由规则：

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  // 放在所有路由最前面，优先匹配
  {
    path: '/status',
    beforeEnter() {
      // SSR场景下可以直接拿到服务端响应对象修改返回值
      if (import.meta.env.SSR) {
        const { res } = useSSRContext()
        res.setHeader('Content-Type', 'application/json')
        res.statusCode = 200
        res.end(JSON.stringify({ status: 'ok' }))
        return
      }
      // 客户端访问场景直接输出JSON
      document.write(JSON.stringify({ status: 'ok' }))
      document.contentType = 'application/json'
      return false
    }
  },
  // 原有业务路由
  // { path: '/', component: () => import('@/views/Home.vue') },
  // ...其他路由
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

注意：如果你是纯静态打包的SPA应用，不要使用该方案，k8s探针发起的服务端请求不会执行客户端JS，无法拿到JSON响应，只会拿到index.html的内容，不符合探针要求。

内容的提问来源于stack exchange，提问作者v-kessler