Tomcat部署静态资源

一、项目环境和目的

1、项目环境

本地调试，后端springboot+前端vue，其中前端vue项目要使用到离线瓦片地图。

2、目的

由于离线瓦片地图数据比较大，直接放进后端springboot项目或者前端vue项目目录都不太现实，所以，这里使用tomcat另外将离线瓦片地图发布为本地的静态资源，然后前端可以直接访问到。

二、具体操作

1、准备

首先下载安装tomcat（记得配置环境变量等，这里就不赘述了）。

2、具体实现

①将瓦片地图数据解压到本地路径，这里我的路径为C:\offlinemaps\map\tile；

②修改tomcat配置conf/setting.xml文件，在Host下添加<Context path="" docBase="C:\offlinemaps\map\tile" reloadable="true" debug="0" crossContext="true"/>标签。其中，docBase下的路径替换为你的静态资源路径，我这里是我的瓦片地图路径；

    <Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true">

        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" pattern="%h %l %u %t &quot;%r&quot; %s %b" prefix="localhost_access_log" suffix=".txt"/>

		<Context path="" docBase="C:\offlinemaps\map\tile" reloadable="true" debug="0" crossContext="true"/>
	  </Host>

③idea启动或者tomcat启动（bin/startup.bat）

这里演示idea启动tomcat：

配置你自己的tomcat，url，端口号，勾选“部署Tomcat实例中配置的应用程序”；

点击部署，添加你自己的文件夹路径，也就是上面的路径，我的为C:\offlinemaps\map\tile；

确定应用后，就可以直接启动了。

④前端设置跨域

我的请求地址为http://localhost/tilemap/0/0/0.jpg

下面设置前端跨域

module.exports = {
	devServer: {
        host: '0.0.0.0',
        port: port,
        open: true,
        proxy: {
            '/tilemap': {
                target: 'http://localhost:8081',  // 后端服务器1的地址
                changeOrigin: true,               // 是否允许跨域
                pathRewrite: { '^/tilemap': '' }     // 重写路径，去掉 '/api1' 前缀
            },
            //其他的自己配置……
        },
	}
}

三、实现效果