部署运维参考
本文仅讨论 Admin 前端部署。后端服务部署相关问题请查阅 服务开发文档。
编译源文件
# 进入项目目录
cd pangu-framework/pangu-admin/pangu-admin-frontend
# 构建部署(生产模式):编译后的文件将输出到 dist 文件夹
npm run build
部署
我们可以将 dist 文件夹内的文件直接部署到 ngix 或者 caddy 等 web 服务器。nginx 的相关资源已经非常丰富了,本文就以新兴 web 服务器 caddy 为例来展示如何部署盘古 admin。示例将达到如下效果:
- 静态资源部署。
- 反向代理盘古 Admin 后端统一网关接口。
- 包括静态资源和 API 接口全站自动启用 SSL。
基于 Nginx 部署盘古 Admin
略。相关资源非常丰富,请自行查阅。
基于 Caddy 部署盘古 Admin
Caddy 简介
Caddy 2 is a powerful, enterprise-ready, open source web server with automatic HTTPS written in Go. — 摘自 Caddy 官网
- 充当 WebServer 部署项目静态网站。
- 充当流量网关方向代理后端的 Web 节点(业务网关)。
- 全站自动 SSL。包含静态网站和 API 请求。
- 解决跨域请求;解决前端 https 后端 http 的协议适配问题。
上传静态资源文件
将编译输出后 dist 文件夹内容上传到服务器某个路径。如:/var/www/pangu-admin
解析域名
登录域名服务商控制台,添加一条二级域名,如: pangu-admin.pulanit.com
的解析记录。
修改配置文件
# vi /etc/caddy/Caddyfile
pangu-admin.pulanit.com {
# Set this path to your site's directory.
root * /var/www/pangu-admin
encode gzip
# Enable the static file server.
file_server
# Another common task is to set up a reverse proxy:
reverse_proxy /api/* {
# 可以指定多个后端业务网关 WEB 节点
to localhost:8080
}
}
- 静态资源文件上传到目录:
/var/www/pangu-admin
。 - Admin 后端部署不在本文讨论范围,本文仅通过 Caddy 反向代理后端业务网关。
- 通过如上配置,网站和 API 自动都拥有了 https 的能力。
测试
根据上述配置即可尝试访问盘古 Admin 首页了。https://pangu-admin.pulanit.com
提示
上述部署结构,使得静态网站和 API 处于同一域名下,解决了跨域的问题。但如果 API 需要反向代理到不同的端口下或者域名下,则可以设置业务网关的参数开启跨域支持,也可以在 Caddy 配置文件配置响应头参数以支持跨域访问。
下一步
继续阅读其它章节获取你想要的答案或通过我们的 开发者社区 寻求更多帮助。