打包页面并且使用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一致,同时两者都可以手动设置静态资源的存放的根目录。

  • 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,和在网上的找到使用的东西必须要记录笔记。每天至少研究三种不了解的知识内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容