后端Springboot+前端React集成并部署到Azure App Service

背景：自己一直在研究后端，现在需要将前端的项目集成到后端，作为小白记录一下自己的踩坑历程，使用的框架是springboot+react

前端

1. 使用npm run build 进行打包 ，打包后会看到在你的项目文件夹里多了个build文件夹：
   
   然后当你点击build文件夹下的index.html之后，会发现打开是空白的：
   为什么呢？？然后你检查了了下index.html，发现里面的路径是绝对路径
   
   所以当然找不到js和css以及图片资源啥的，那怎么让这些路径变成相对路径呢，很简单…我们在package.json加上homepage就行：
   
   然后再次npm run build ，打开index.html 会看到正常的页面了

后端

1. springboot搭建过程不会的可以自行百度，这边不做详细说明。
2. 为了集成前端，后端需要修改默认的静态资源文件配置：
   在这篇文章中博主提供了两种方法：我用的是第一种直接修改application.properties 文件，在文件中添加如下设置，

“spring.mvc.static-path-pattern” 用于阐述HTTP请求地址，
“spring.resources.static-locations” 则用于描述静态资源的存放位置

文件名就是刚才react打包的文件名,如(build)，可以自己修改，只要保证一致就行。之后将自己打包的文件夹放到resource目录下即可。

之后启动项目，注意如果想访问index.html 需要的访问路径是：http://localhost:8080/build/index.html
就可以看到 index.html 页面了，你也可以将项目打包，使用 mvn clean package 生成jar包 上传到服务器。
如果想要默认打开index.html页面的话可以这样做：
在resource目录下新建一个public文件夹，然后把你React打包的build文件夹里的文件都丢进去就行。
如图所示

这样启动springboot项目后，打开http://localhost:8080/就会自动定位到index.html了，为什么呢？
因为spring-boot静态首页的支持，即index.html放在以下目录结构会直接映射到应用的根目录下：

classpath:/META-INF/resources/index.html  
classpath:/resources/index.html  
classpath:/static/index.html  
calsspath:/public/index.html

所以当我们把首页放到以下路径中任意一个就会自动渲染出来了。
至于springboot-静态资源默认访问路径顺序是：
META-INF/resources > resources > static > public
具体的可以参考这篇文章

部署到Azure APP Service

教程：

1. Quickstart: Create a Java app on Azure App Service
2. Create a Hello World web app for Azure App Service using IntelliJ

踩坑：选择Web Container的时候要选择相应的Java版本 因为Springboot已经内置了Tomcat
之后部署到Azure上，就可以正常访问啦！！！

参考文献：

1. React+SpringBoot项目部署
2. Spring Boot之如何配置静态资源的地址与访问路径
3. React项目如何打包发布及遇到的坑