打包页面并且使用spring boot做静态文件服务器出现bug

情景描述

• 前端使用create react app进行开发，并且使用指令npm run build将所有的页面打包存放在build 目录
• 将build目录移动到spring boot（启动在8080）的/src/main/resources/static文件夹下

build目录
index.html
static
  - css
      - main.1537b9bf.css
  - js
 

• index.html中<link href="/static/css/main.1537b9bf.css">
• 使用zuul（启动在8888）做代理。当你请求/todos就会将请求转发到localhost:8080
• 此时访问localhost:8888/todos/index.html
• 发现控制台报错：localhost:8888/static/css/main.1537b9bf.css not found.

矛盾点

• 请求css文件的url少了前缀todos，那么问题在于-->什么时候由谁发出的css请求？请求路径又是如何确定和修改的呢？

问题

• Q1:spring boot是如何进行静态资源处理的呢？是不是和express的static方式一致呢？

• A1:spring boot进行了自动的WebMvcAutoConfiguration配置，因此当你在浏览器发送GET请求，spring boot会自动的去几个确定的目录下寻找静态资源，并将资源返回。

  • 当你请求/index.html他会自动的依次去
    • classpath:/META-INF/resources/
    • classpath:/resources/
    • classpath:/META-INF/resources/
    • classpath:/static/

  这些目录写寻找index.html文件。
  这种方式和express.static一致，同时两者都可以手动设置静态资源的存放的根目录。

  • example
    • 请求http://localhost:port/todos/css/index.css
    • 这时候就有在可能拿到root/src/main/resources/static/todos/css/index.css文件

• Q2:是谁发送的获取css文件的请求呢？

• A2:打开你的请求的index.html文件，页面需要加载，这个过程中发现了例如href、src等元素属性，需要其他的文件资源，这时候就会发送请求去请求这些资源。

• Q3:请求css文件的url是如何确定的呢？

• A3:可以这样理解，既然是寻找文件，那么这个url就是文件的路径。http://localhost:port就是文件系统的根目录。对应着当前的静态文件根目录。而请求css的路径，就是根据你所设置的文件路径（href或者src的值），获得正确的url路径进行请求然后到对应的服务器静态文件夹寻找。

• Q4:那么是什么导致请求css的url中的/todos丢失？

• A4:因为元素的src或者href属性的值是一个绝对路径以/开头。此时浏览器会认为根目录的位置对应http://localhost:port，然后加上src或者href的值，而这里的根目录就是http://locahost:port自然请求url变成了localhost:8888/static/css/main.1537b9bf.css

• Q5:如何让请求的url改变，不舍去todos呢？

• A5:当前我们的路径在http://localhost:port/todos下面我们只需cd ./static/css/main.1537b9bf.css即可拿到相应的文件，因此我们可以设置src的值直接为./static/css/main.1537b9bf.css不使用绝对路径，将路径导向根，就可以在当前的url下以相对路径寻找文件

反思

• 其实我对这种服务器提供静态资源的方式在express的时候就接触过，因为会用，所以也没有看和研究。改变思想：会用不等于会。其实这个问题我研究的不是很清楚，还是很表象。今晚我会继续看

ACTION

• 自己使用的东西，一定要弄清楚原理，为什么。还是一样只要出bug，和在网上的找到使用的东西必须要记录笔记。每天至少研究三种不了解的知识内容