前端托管

  少于1分钟  

简要概述

支持托管静态文件，例如编写 HTML、CSS、JAVASCRIPT 部署到指定目录下，既可在前端浏览器打开展示，同时也支持这些静态文件在编译时嵌入二进制中。

一般常见可通过以下框架生成：

  1. Hugo
  2. Next.js

在使用托管服务时，需按照以下规范使用：

前端类型 默认 URL 地址 前端源代码路径 前端编译后路径
admin /admin/ ./web/admin/ ./public/admin/
openapi /openapi-spec/ ./api/${}/microservice.openapiv2.yaml ./public/openapi/
webroot / ./web/webroot/ ./public/webroot/

配置示例

最小化配置

# 前端托管配置
#frontend:
#  enable: true

可不做任何配置，默认开启：openapi 接口文档。

导出默认值

# 前端托管配置
frontend:
  enable: true
  interface:
    admin:
      enabled: false
      tracing: false
      embedded: true
      handle_url: /admin
    openapi:
      enabled: true
      tracing: false
      embedded: true
      handle_url: /openapi-spec
    webroot:
      enabled: false
      tracing: false
      embedded: true
      handle_url: /

配置说明

FrontendInterface

名称 类型 说明
admin WebInterfaceConfig 面向管理员后台
openapi WebInterfaceConfig 基于 protoc 服务定义转换为 http 接口文档
webroot WebInterfaceConfig 面向普通用户所使用的前端页面

WebInterfaceConfig

名称 类型 说明
enabled bool 是否启用该前端托管
tracing bool 是否启用该托管的链路跟踪
embedded bool 是否把该前端静态文件在编译时嵌入二进制文件中
handle_url string 注册到微服务上 http url 服务的地址

应用场景

禁止目录列出

应用配置：

# 前端托管配置
frontend:
  interface:
    admin:
      enabled: true

静态目录：

hello1.txt
dir1/dir2/hello2.txt

使用以上配置，开启 “./public/admin/” 静态文件托管，此时在浏览器上访问将会以目录列表输出，这在某些情况下存在安全风险，可通过以下两种方式禁止目录列出。

方式一：为各目录下添加 “index.html” 文件

在浏览器访问时自动会把 “index.html” 内容输出，但此种方式仅影响当前文件夹。

方式二：在根目录下添加 “404.html” 文件

当请求的 “*.html” 或者 请求无后缀 文件时，如果不存在文件则会重定向到根的 “404.html” 内容。

自定义 404 页面

如上，在根目录更改 “404.html” 文件即可。

取消内嵌静态文件

应用配置：

# 前端托管配置
frontend:
  interface:
    admin:
      enabled: true
      embedded: false

使用以上配置，开启 “./public/admin/” 静态文件托管，此时目录下内容更改可实时生效并影响到用户前端访问。

开启链路跟踪

# 前端托管配置
frontend:
  interface:
    admin:
      enabled: true
      tracing: true

使用以上配置，开启 “./public/admin/” 静态文件托管，用户访问 “/admin” 后台时，将会把相关链路数据上报至已配置的可观测性服务。

使用 next.js 生成模版

npx create-next-app@latest \
	--typescript \
	--tailwind \
	--eslint \
	--app \
	--use-npm \
	--import-alias "@/*" webroot

更改配置 next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  distDir: '../../public/webroot',
  trailingSlash: true,
}

module.exports = nextConfig


最后修改 08.02.2024: fix: 修复默认 openapi url 地址错误 (9a7b68e)