Appearance
系统部署 ¶
后端构建 ¶
由于
DaxPay
基于Bootx-Platform
进行开发的,Bootx-Platform
后端是一个基于Spring Boot 3的脚手架,所以构建方式也跟普通的Spring Boot 项目基本相同。
首先在项目中执行mvn -B clean package -Dmaven.test.skip=true -Dmaven.javadoc.skip=true -Dmaven.gpg.skip
命令进行构建,
-Dmaven.javadoc.skip=true
是跳过DOC文档相关的构造,可以加快构建的速度。-Dmaven.test.skip=true
是跳过测试用例,可以加快构建的速度。-Dmaven.gpg.skip
是跳过GPG签名加密插件的执行,只有daxpay-single-sdk
模块在install
时才会用到。
构建执行完成后,到项目下daxpay-single-server
模块下的target目录中找到daxpay-server.jar
文件, 这个文件就是我们所需要的可执行Jar包。
前端构建 ¶
由于
DaxPay
基于Bootx-Platform
进行开发的,Bootx-Platform
前端是一个Antd Vue 4组件库的Vue项目,所以构建方式就是标准的前端构建方式。
Node版本需要大于等于20.11.1
,包管理工具使用pnpm
,版本需要大于等于9.0.2
,构建完后的制品在dist
文件夹下,
shell
# 安装依赖
pnpm install
# 执行打包命令
pnpm run build
部署示例(前后端独立部署) ¶
提示
因为支付系统会涉及到一些三方支付网关的回调,以及例如微信授权域名、jsapi安全域名的限制,所以部署时,我们需要保证访问的入口地址尽量少,从而尽量少的占用如微信公众平台各类域名的占用。 这样就需要我们对项目进行一些配置,从而实现这些诉求。
域名分配 ¶
假定我们拥有一个域名
www.daxpay.com
,并且该域名已经备案,下面的配置是独立部署模式的配置示例:
项目 | 域名分配 | 说明 |
---|---|---|
server | https://www.daxpay.com/server/ | 后端独立部署类不同的机器样,通常也不会被直接被访问,所以做个请求转发即可满足回调和接口调用的需求 |
H5 | https://www.daxpay.com/h5/ | H5手机端通常使用手机访问,同时在微信中的访问的话,需要占用微信授权域名和jsapi安全域名的数量,所以和PC前端放到了同一个域名下 |
PC | https://www.daxpay.com/ | PC端是用户和管理员访问的入口,所以让其可以直接访问 |
移动端配置 ¶
分别提供了前端嵌入到后端中和独立部署两种模式,区别是网站的根目录和接口的前缀配置不同,下面的配置是独立部署模式的
.env.production
配置示例:
properties
# 独立部署模式
VITE_PUBLIC_PATH = /h5
## API 接口前缀
VITE_GLOB_API_URL_PREFIX=/server
# 是否删除console
VITE_DROP_CONSOLE=true
# 虚拟控制台
VITE_V_CONSOLE=false
# 是否启用gzip压缩或brotli压缩, 可选: gzip | brotli | none, 如果你需要多种形式,你可以用','来分隔
VITE_BUILD_COMPRESS='none'
# 使用压缩时是否删除原始文件,默认为false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE=false
PC端配置 ¶
分别提供了前端嵌入到后端中和独立部署两种模式,区别是网站的根目录和接口的前缀配置不同,下面的配置是独立部署模式的
.env.production
配置示例:
properties
# 名称 不可为空
VITE_GLOB_APP_TITLE=DaxPay服务端
# 独立部署模式
VITE_PUBLIC_PATH=/
# API 接口前缀
VITE_GLOB_API_URL_PREFIX=/server
# 是否启用gzip压缩或brotli压缩, 可选: gzip | brotli | none, 如果你需要多种形式,你可以用','来分隔
VITE_BUILD_COMPRESS='none'
# 接口地址
VITE_GLOB_API_URL=
# 终端类型
VITE_GLOB_APP_CLIENT=dax-pay
# 超时时间
VITE_GLOB_API_TIMEOUT=30000
# 是否开启打包分析
VITE_ENABLE_ANALYZE=false
Nginx配置 ¶
此处前端的静态文件,为了方便部署,我们分别放在了两个目录下
web
和h5
。项目启用了HTTPS,具体配置过程请自行查阅资料,静态文件的分布以及转发部分配置如下:
shell
# 后端服务请求转发,
location /server/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_redirect default;
proxy_buffering on;
# websocket协议升级
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 后端地址
proxy_pass http://127.0.0.1:9999/;
}
# 将根路径映射到web前端
location / {
# PC前端静态文件所在的路径
alias /www/sites/www.daxpay.com/index/web/;
try_files $uri $uri/ /index.html;
}
# 将h5路径映射到h5前端
location /h5/ {
# h5前端静态文件所在的路径
alias /www/sites/www.daxpay.com/index/h5/;
try_files $uri $uri/ /h5/index.html;
}
部署示例(前端嵌入在后端中) ¶
提示
不再推荐新手使用,新手推荐直接使用Docker一键部署模式,水平足够的在特殊场景下可以使用嵌入式方式,其中上传文件的处理不额外说明,清自行处理, 有时候部署时不方便安装Nginx,又或者客户技术水平有限,只会简单这java启停命令,所以将前端嵌入在后端中,这样可以减少部署的复杂度。只需要启动起来后端即可。
PC配置 ¶
PC端访问是通过二级目录进行访问的,所以打包时需要修改即可
发布路径
和接口前缀
两项参数,然后进行正常构建即可。
properties
# 名称 不可为空
VITE_GLOB_APP_TITLE=DaxPay服务端
# 嵌入式模式 与后端部署在一起
VITE_PUBLIC_PATH=/web
# API 接口前缀
VITE_GLOB_API_URL_PREFIX=
# 是否启用gzip压缩或brotli压缩, 可选: gzip | brotli | none, 如果你需要多种形式,你可以用','来分隔
VITE_BUILD_COMPRESS='none'
# 接口地址
VITE_GLOB_API_URL=
# 终端类型
VITE_GLOB_APP_CLIENT=dax-pay
# 超时时间
VITE_GLOB_API_TIMEOUT=30000
# 是否开启打包分析
VITE_ENABLE_ANALYZE=false
H5配置 ¶
H5端访问是通过二级目录进行访问的,所以打包时需要修改即可
发布路径
和接口前缀
两项参数,然后进行正常构建即可。
properties
# 嵌入式模式 与后端部署在一起
#VITE_PUBLIC_PATH=/h5
# API 接口前缀
#VITE_GLOB_API_URL_PREFIX=
# 是否删除console
VITE_DROP_CONSOLE=true
# 虚拟控制台
VITE_V_CONSOLE=false
# 是否启用gzip压缩或brotli压缩, 可选: gzip | brotli | none, 如果你需要多种形式,你可以用','来分隔
VITE_BUILD_COMPRESS='none'
# 使用压缩时是否删除原始文件,默认为false
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE=false
后端配置 ¶
默认访问时需要添加上前端所在的
目录+index.html
,这样用起来会稍显繁琐,同时前端使用history
路由模式, 直接访问会出现404,导致一些页面没办法被访问,如微信授权重定向页面,所以系统内置了转发控制器,见Front*
相关的几个类。
- 在后端项目中resources目录下创建static目录
- 然后在
static
目录文件夹下创建h5
和web
文件夹,用于分别存放前端打包后的静态文件。 - 将PC端打包的静态文件拷贝到web目录下,H5端打包的静态文件拷贝到h5目录下。
- 对后端进行构建打包即可。