比利牛仔 發表於 2019-8-28 16:49:00

React+SpringBoot项目部署

<h1 class="title"><span style="font-size: 12px">&nbsp;静态资源访问配置&nbsp;</span></h1>
<h1 class="title"><span style="font-size: 12px">&nbsp;&nbsp;https://www.jianshu.com/p/b6e0a0df32ec</span></h1>
<p>&nbsp;https://segmentfault.com/q/1010000012240531/a-1020000012250927</p>
<p>&nbsp;</p>
<p>&nbsp;_______________________________________________________________________________________________</p>
<p>&nbsp;</p>
<div class="article-header-box">
<div class="article-header">
<div class="article-title-box">
<h1 class="title-article">springboot-静态资源默认访问路径顺序</h1>
</div>
<div class="article-info-box">
<div class="article-bar-top"><span class="time"><span class="time">2018年10月22日 12:56:23&nbsp;cygodwg&nbsp;<span class="read-count">阅读数 503<span class="article_info_click">更多</span></span></span></span>
<div class="tags-box space"><span class="label">分类专栏：&nbsp;springboot</span></div>
</div>
<div class="operating">&nbsp;</div>
</div>
</div>
</div>
<div id="article_content" class="article_content clearfix">
<div class="article-copyright"><span class="creativecommons"><span class="creativecommons">版权声明：本文为博主原创文章，遵循&nbsp;CC 4.0 by-sa&nbsp;版权协议，转载请附上原文出处链接和本声明。</span></span>
<div class="article-source-link2222">本文链接：https://blog.csdn.net/cygodwg/article/details/83271275</div>
</div>
<div id="content_views" class="htmledit_views">
<p>META-INF/resources/hello.html&nbsp;hello.html内容META-INF/resources/hello</p>
<p>static/hello.html hello.html内容static/hello</p>
<p>resources/hello.html 内容resources/hello</p>
<p>public/hello.html 内容public/hello</p>
<p>访问http://localhost/hello.html</p>
<p>页面内容META-INF/resources/hello，访问路径是META-INF/resources/hello.html，去掉该html</p>
<p>再访问http://localhost/hello.html</p>
<p>内容：resources/hello，访问路径是resources/hello.html去掉该html</p>
<p>访问http://localhost/hello.html</p>
<p>内容：static/hello，访问路径static/hello.html，去掉该html</p>
<p>再访问http://localhost/hello.html</p>
<p>内容resources/public/hello world，访问路径public/hello world，去掉该html</p>
<p>由此实验得知静态资源默认访问路径是</p>
<h3>META-INF/resources &gt; resources &gt; static &gt; public</h3>
</div>
</div>
<p>________________________________________________________________________________________________</p>
<p>&nbsp;</p>
<h1 class="postTitle">Springboot 之 静态资源路径配置</h1>
<div class="clear">&nbsp;</div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body ">
<p>1、静态资源路径是指系统可以直接访问的路径，且路径下的所有文件均可被用户通过浏览器直接读取。</p>
<p>2、在Springboot中默认的静态资源路径有：classpath:/META-INF/resources/，classpath:/resources/，classpath:/static/，classpath:/public/</p>
<p>3、在Springboot中可以直接在配置文件中覆盖默认的静态资源路径的配置信息：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre>#自定义的属性，指定了一个路径，注意要以/结尾<br>web.upload-path=D:/temp/study13<strong>/</strong>
<br>#表示所有的访问都经过静态资源路径
spring.mvc.static-path-pattern=/**<br><br>#覆盖默认配置，所以需要将默认的也加上否则static、public等这些路径将不能被当作静态资源路径<br>#在最末尾的file:${web.upload-path}中的file:表示是一个具体的硬盘路径，其他的使用classpath指的是系统环境变量<br>spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.upload-path}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p>4、在SpringBoot开发中，可以在Java代码中覆盖默认静态资源配置</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
<pre>import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

      if(!registry.hasMappingForPattern("/static/**")){
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
      }
      super.addResourceHandlers(registry);
    }

}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif"></span></div>
</div>
<p>&nbsp;5、由于Spring Boot&nbsp;默认资源路径配置的问题，使用IDEA开发Spring Boot应用时，会导致一个问题————浏览器、编辑器 不能同时访问 JS&nbsp;等资源的问题。这时往往通过配置 4&nbsp;中的代码，来实现同时访问资源文件的效果</p>
<p>&nbsp;</p>
<p>参考知识林：http://www.zslin.com/web/article/detail/23</p>
</div>
</div>
<p>_______________________________________________________________________________________________</p>
<div class="show-content" data-note-content="">
<div class="show-content-free">
<p>首先我用create-react-app搭建了一个react项目(这一步操作大家可以去官网看https://reactjs.org/docs/add-react-to-a-new-app.html)</p>
<p>你会得到一个结构如下的项目：</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="499" data-height="533"><img src="https://upload-images.jianshu.io/upload_images/2649238-b3ce9cd4a88ab964.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/499/format/webp"></div>
</div>
<div class="image-caption">image.png</div>
</div>
<p>我们可以通过 yarn start 运行这个项目：</p>
<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="291" data-height="120"><img src="https://upload-images.jianshu.io/upload_images/2649238-40b0e71365c7f1b8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/291/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="459" data-height="217"><img src="https://upload-images.jianshu.io/upload_images/2649238-51e652b3367ed1bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/459/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>跑起来的页面是这样的：</p>



<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="1920" data-height="1008"><img src="https://upload-images.jianshu.io/upload_images/2649238-ed75a6bd0ed5beae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>好的，现在你已经成功在开发环境中跑起来了，接下来我们来打包，然后将其部署到服务器上</p>
<p>打包也很简单，执行 npm run build :</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="620" data-height="591"><img src="https://upload-images.jianshu.io/upload_images/2649238-0d3b5bb1a53839e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>你会发现在你的项目文件夹里多了个build文件夹：</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="193" data-height="288"><img src="https://upload-images.jianshu.io/upload_images/2649238-1a0759159f8f3415.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/193/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="412" data-height="278"><img src="https://upload-images.jianshu.io/upload_images/2649238-72b552eb09d5e8ed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/412/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>然后当你点击index.html之后，会发现打开是这样的：</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="1920" data-height="1009"><img src="https://upload-images.jianshu.io/upload_images/2649238-dd8195e19490ade8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>一片空白...然后你检查了了下index.html，发现里面的路径是这样的：</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="992" data-height="494"><img src="https://upload-images.jianshu.io/upload_images/2649238-dd2f271c9e7b3c2b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/992/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>发现了啥问题没...里面的路径是绝对路径，所以当然找不到js和css以及图片资源啥的，那怎么让这些路径变成相对路径呢，很简单...我们再package.json加上homepage就行：</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="545" data-height="506"><img src="https://upload-images.jianshu.io/upload_images/2649238-35dfc3996f26a6bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/545/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>大家看最后一句就行...然后我们再次打包，然后再点index.html，会发现一切正常：</p>



<br>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="1920" data-height="1004"><img src="https://upload-images.jianshu.io/upload_images/2649238-77d62cf44ecb7b75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>好的，现在我们通过build得到了html页面以及js和css和各种资源...你也发现了，我们网页的入口是index.html</p>
<p>所以比如说你自己有个服务器地址是&nbsp;www.abc.com&nbsp;，你只要在访问www.abc.com的时候把index.html返回出去就行了...因为我自己的服务器是用SpringBoot搭建的，所以我就用SpringBoot来举例子</p>
<p>SpringBoot返回html页面也很简单，在resource目录下新建一个public文件夹，然后把你React打包的build文件夹里的文件都丢进去就行...（这里截图是我自己的项目，我把一些.js和.json文件去掉了，因为好像没啥用）</p>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill">&nbsp;</div>
<div class="image-view" data-width="285" data-height="176"><img src="https://upload-images.jianshu.io/upload_images/2649238-f6bed034d6ca8c36.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/285/format/webp"></div>



</div>
<div class="image-caption">image.png</div>



</div>
<p>这个时候你访问www.abc.com他就会直接返回index.html了（注意在SpringBoot里的Controller去掉对"/"的拦截）</p>
<p>然后你只要把SpringBoot项目部署到服务器上(如何部署SpringBoot项目大家可以看这篇文章https://blog.csdn.net/ruglcc/article/details/76147645)，然后访问你的域名，你就可以看到index.html了，比如我刚刚部署的自己的网页www.nanmian.top</p>
<p>OK这篇文章结束了，大家也发现了目前的网页很简单...就只有一个页面，我刚学前端...所以也不是很懂，不知道之后项目变大了这种方法还行不行...到时候我会再记录的</p>
<p>&nbsp;______________________________________________________________________________</p>



</div>



</div><br><br>
来源：https://www.cnblogs.com/kelelipeng/p/11424995.html
頁: [1]
查看完整版本: React+SpringBoot项目部署