尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

告别 Nginx!ASP.NET Core 实现多域名 Vue 静态服务与代理转发

告别 Nginx!ASP.NET Core 实现多域名 Vue 静态服务与代理转发 在日常开发和部署中我们经常需要在单台服务器上托管多个前端项目如 Vue并通过不同二级域名访问同时还可能需要代理转发后端 API。传统方案依赖 Nginx 配置不仅学习成本高修改配置后还需重启服务。今天给大家分享一款基于ASP.NET Core 开发的轻量级服务 ——Pascal.Edge.WebServiceAgent完美替代 Nginx 实现多站点托管、域名动态匹配、配置热加载让单主机多二级域名映射变得无比简单一、核心优势相比 Nginx这款工具的核心亮点在于开箱即用基于.NET 生态开发者无需学习 Nginx 复杂的配置语法多站点托管单服务支持 10 个 Vue / 静态文件站点同时运行智能路由基于 Host 头自动匹配域名端口 域名双重兜底策略配置热加载修改配置文件无需重启服务自动生效SPA 友好内置 Vue Router History 模式路由回退无需额外配置双模式支持静态文件托管 HTTP 代理转发一站式解决前后端部署二、核心功能详解1. 多站点托管每个站点可独立配置端口、域名、静态文件目录示例配置json{ Sites: [ { Name: home, Port: 8050, Hostnames: [welcome.pascaledge.cn], Path: ./www-dist/home // Vue打包后的dist目录 }, { Name: game, Port: 8051, Hostnames: [game.pascaledge.cn], Path: ./www-dist/game } ] }2. 代理转发替代 Nginx 反向代理无需配置 Nginx直接将 API 请求转发到后端服务json{ Sites: [ { Name: api, Port: 8053, Hostnames: [api.pascaledge.cn], ForwardUrl: http://www.pascaledge.cn:5000 // 后端服务地址 } ] }3. 智能路由匹配规则请求处理优先级清晰无需担心域名 / 端口冲突域名优先根据请求 Host 头精确匹配配置的域名列表端口兜底域名不匹配时自动按请求端口匹配对应站点默认站点域名 / 端口都不匹配时回退到默认站点4. SPA 路由回退自动支持 Vue Router 的 history 模式无需像 Nginx 那样手动配置try_files只需开启EnableSPAFallback: true即可。三、快速部署步骤步骤 1环境准备安装.NET 10.0 SDK/Runtime准备好 Vue 打包后的 dist 目录或其他静态文件步骤 2目录结构部署plaintextPascal.Edge.WebServiceAgent/ ├── appsettings.json // 核心配置文件 ├── www-dist/ // 静态文件根目录 │ ├── home/ // 对应welcome.good.cn │ ├── game/ // 对应game.good.cn │ └── admin/ // 新增站点示例将 Vue 项目的 dist 文件复制到对应目录bash运行# 示例部署home站点 cp -r /path/to/vue-home/dist/* ./www-dist/home/步骤 3配置域名解析修改本地 hosts生产环境配置 DNSbash运行# Windows: C:\Windows\System32\drivers\etc\hosts # Linux/Mac: /etc/hosts 127.0.0.1 welcome.pascaledge.cn 127.0.0.1 game.pascaledge.cn 127.0.0.1 api.pascaledge.cn步骤 4配置文件编写完整的appsettings.json示例json{ DefaultDocument: index.html, EnableSPAFallback: true, DefaultSite: home, Sites: [ { Name: home, Port: 8050, Hostnames: [welcome.pascaledge.cn], Path: ./www-dist/home }, { Name: game, Port: 8051, Hostnames: [game.pascaledge.cn], Path: ./www-dist/game }, { Name: api, Port: 8053, Hostnames: [api.pascaledge.cn], ForwardUrl: http://www.pascaledge.cn:5000 } ] }步骤 5启动服务bash运行dotnet run​启动后即可通过以下地址访问前端站点http://welcome.pascaledge.cn:8050游戏站点http://game.pascaledge.cn:8051API 代理http://api.pascaledge.cn:8053自动转发到后端四、扩展添加新站点1. 添加静态文件站点如管理后台修改appsettings.json新增站点配置json{ Sites: [ // 原有站点... { Name: admin, Port: 8054, Hostnames: [admin.pascaledge.cn], Path: ./www-dist/admin } ] }复制管理后台的 dist 文件到www-dist/admin无需重启服务配置自动生效2. 添加代理转发站点如后端服务json{ Sites: [ // 原有站点... { Name: backend, Port: 8055, Hostnames: [backend.pascaledge.cn], ForwardUrl: http://192.168.1.101:8080 } ] }五、核心配置项说明表格配置项类型说明DefaultDocumentstring默认首页文档默认 index.htmlEnableSPAFallbackbool是否启用 SPA 路由回退Vue/React 必备DefaultSitestring域名 / 端口不匹配时的默认站点Sites[].Namestring站点唯一标识Sites[].Portint监听端口Sites[].Hostnamesstring[]绑定的二级域名列表Sites[].Pathstring静态文件目录与 ForwardUrl 二选一Sites[].ForwardUrlstring代理转发地址与 Path 二选一六、总结这款ASP.NET Core 服务完美解决了 Nginx 配置复杂、重启麻烦、SPA 路由配置繁琐等问题特别适合.NET 开发者、前端部署运维人员使用。单服务器上通过简单的 JSON 配置就能实现多二级域名的 Vue 静态站点托管和后端 API 代理转发配置热加载更是提升了运维效率。如果你也在为多站点部署、域名映射、代理转发头疼不妨试试这款工具告别 Nginx 的复杂配置用更简单的方式搞定部署源代码托管GitHub - PascalMing/Pascal.Edge.WebServiceAgent: Pascal.Edge.WebService Vue Agent · GitHub可执行文件打包下载.Net 10环境:
返回列表