前端托管
2 分钟阅读
简要概述
支持托管静态文件，例如编写 HTML、CSS、JAVASCRIPT 部署到指定目录下，既可在前端浏览器打开展示，同时也支持这些静态文件在编译时嵌入二进制中。
一般常见可通过以下框架生成：
在使用托管服务时，需按照以下规范使用：
| 前端类型 | 默认 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 为三态开关：缺省（不配置）视为开启；显式 false 则整体
关闭前端托管，各 interface 配置同时失效。
导出默认值
# 前端托管配置
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