技术咨询：能否将React前端与SpringBoot后端部署至同一Azure WebApp？

方法一：React静态资源嵌入SpringBoot项目 #

• 先在React项目根目录执行npm run build，生成包含所有前端静态文件的build文件夹
• 把build里的所有文件复制到SpringBoot项目的src/main/resources/static目录下
• 执行mvn clean package打包SpringBoot为可执行JAR包
• 将这个JAR包直接部署到Azure WebApp的Java运行环境
• 访问WebApp根路径时会自动加载React页面，后端接口用/api这类前缀区分，天然避免跨域问题

方法二：利用虚拟应用程序做路径映射 #

• 分别构建React静态产物和SpringBoot JAR包
• 登录Azure门户，找到目标WebApp，进入「配置」→「路径映射」
• 添加虚拟应用程序规则：
  • 根路径/指向存放React静态文件的目录
  • 添加虚拟路径/api，物理路径指向SpringBoot JAR的部署目录（或配置启动命令让SpringBoot在对应子路径运行）
• 配置WebApp的启动命令，确保SpringBoot服务正常启动，同时静态资源能被正确访问

方法三：多容器Docker Compose部署 #

• 编写docker-compose.yml，分别定义两个服务：一个用Nginx托管React静态文件，另一个运行SpringBoot镜像
• 在Nginx配置里添加反向代理规则，把所有/api开头的请求转发到SpringBoot容器
• 在Azure WebApp的运行环境选择「容器」，上传这个docker-compose.yml文件，Azure会自动创建并关联两个容器
• 这种方式前后端完全隔离，各自更新互不影响，适合复杂项目的长期维护

内容的提问来源于stack exchange，提问作者Sanjay Prasad