boot-react 生产部署完全指南:如何把 React 资源打包进 Spring Boot Fat JAR
boot-react 生产部署完全指南如何把 React 资源打包进 Spring Boot Fat JAR【免费下载链接】boot-reactA starter application with spring boot and react项目地址: https://gitcode.com/gh_mirrors/bo/boot-reactboot-react是一个经典的 Spring Boot React 全栈脚手架。它最大的亮点是通过一条 Gradle 命令就能把React 前端构建产物直接打包进 Spring Boot Fat JAR让你只部署一个 JAR 文件就跑起整个前后端应用。本文带你完整拆解「React 资源打包进 Spring Boot JAR」的全流程。一、项目结构速览前后端双模块协作boot-react 采用 Gradle 多项目结构前后端各占一个子模块由 settings.gradle 统一注册模块目录职责后端backend/Spring Boot 应用、Spring Security、Spring Session前端frontend/React Redux webpack 构建理解这个结构是关键后端的jar任务会依赖前端的assemble任务这就是「一条命令打包两个世界」的底层原理。二、一条命令把 React 构建产物装进 JAR2.1 打包命令最快方式在项目根目录执行./gradlew clean assemble构建完成后产物位于backend/build/libs/boot-react-0.0.1-SNAPSHOT.jar。2.2 打包机制全解析整个过程由两个 Gradle 文件协作完成① 前端构建frontend/build.gradle通过 Node 插件自动下载 Node 6.10.3无需本机安装 Node 环境bundle任务执行yarn run bundle调用 webpack 生产配置assemble任务依赖bundle输出到frontend/dist目录② 前端生产配置frontend/webpack.config.jsNODE_ENVproduction开启 React 生产模式UglifyJsPlugin压缩混淆 JSExtractTextPlugin把 Stylus 样式抽取为独立的styles.cssCommonsChunkPlugin将node_modules依赖分离为vendors.js利于浏览器缓存③ JAR 装配backend/build.gradle第 56-62 行核心代码仅 6 行jar { from(../frontend/dist) { into static } } jar.dependsOn(:frontend:assemble)它把frontend/dist里的全部产物index.html、main.js、vendors.js、styles.css以static目录的形式塞进 Fat JAR。Spring Boot 启动后自动从classpath:/static/提供静态资源前端即刻可用。三、生产环境启动 Fat JAR 的完整步骤3.1 带 Profile 启动java -jar -Dspring.profiles.activeproduction \ backend/build/libs/boot-react-0.0.1-SNAPSHOT.jar3.2 关于 Redis 会话生产必读⚠️应用使用 Spring Session 持久化会话Profile会话存储方式建议场景默认内存 Map仅开发环境redis真实 Redis 实例生产环境可水平扩展生产配置在backend/src/main/resources/application.yml中官方建议通过环境变量注入 Redis 地址和密码避免明文写在配置里。四、SPA 路由不 404 的秘密PushState 资源解析器React Router 默认使用浏览器 history 模式URL 形如/login、/private。开发环境由 dev server 兜底见frontend/server.js而生产环境交给SinglePageAppConfig这个专门的资源处理器 源码backend/src/main/java/react/config/SinglePageAppConfig.java它的策略非常巧妙请求路径带已知扩展名js、css、png、json 等→ 正常返回静态资源请求/api开头 → 交给 REST 接口处理其余一切路径 → 回退返回index.html交给前端路由接管这样用户直接刷新/private这类页面也不会 404。如果你改用 hash 路由/#/login这个配置可以移除。五、Docker 镜像部署可选进阶不想裸跑 JAR项目内置了 Docker 插件# 构建镜像 ./gradlew backend:buildDocker # 运行容器 docker run -p 8080:8080 boot-react/boot-react根目录的docker-compose.yml则把应用和 Redis 一起编排一条docker-compose up -d即可拉起完整生产栈。六、常见问题排查清单 现象原因解决JAR 里没有前端资源只跑了backend:assemble未触发前端构建使用根目录./gradlew clean assemble页面能打开但样式丢失styles.css未被抽取或路径错误检查webpack.config.js的 ExtractTextPlugin 配置刷新子路由 404缺少 SPA 资源回退确认SinglePageAppConfig未被移除多实例部署会话丢失会话存内存启用redisProfile 并配置真实 Redis总结boot-react 用极简的 Gradle 依赖链jar → frontend:assemble → yarn bundle实现了React 资源一键打包进 Spring Boot Fat JAR的完整生产链路配合 SPA 资源回退和 Redis 会话是一个非常适合学习和二开的全栈部署范本。克隆仓库git clone https://gitcode.com/gh_mirrors/bo/boot-react后花 5 分钟通读backend/build.gradle你就能完全掌握这套打包机制。【免费下载链接】boot-reactA starter application with spring boot and react项目地址: https://gitcode.com/gh_mirrors/bo/boot-react创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考