Tomcat如何代理多个前端(Vue)项目?

遇到这样一个有趣的事情,由于行里测试服务器有限,需要在一台测试服务器上同时部署多个项目,前端采用Vue进行开发,由于是多个项目,所以代理这些静态文件直接丢到webapp下肯定不可取,采用Nginx也完全没必要,所以打算利用Tomcat对这些Vue项目进行代理,那具体如何操作呢?

我们说一下项目环境,后端暂定2个项目,都是SpringBoot开发,一个项目跟路径为ybt,启用8080端口,一个项目跟路径为mzt,启用8081端口,Tomcat代理vue项目采用7070端口,那么,前端大致的路由映射为:

<第1个Vue项目>
baseUrl: {
    dev: 'http://128.1.136.133:8080/ybt',   
    pro: 'http://70.0.192.107:8080/ybt'
  },

<第2个Vue项目>
baseUrl: {
    dev: 'http://128.1.136.133:8081/mzt',   
    pro: 'http://70.0.192.107:8081/mzt'
  },

好了,那现在Tomcat如何代理监听7070端口以实现两个Vue项目都可以在这一台测试服务器上进行访问呢?

假若tomcat安装目录为:/home/web/tomcat/apache-tomcat-8.5.42

第一个Vue项目(编译好的dist目录)放置路径为:/home/web/ybt

第二个Vue项目(编译好的dist目录)放置路径为:/home/web/mzt

接下来,我们打开tomcat的配置文件/home/web/tomcat/apache-tomcat-8.5.42/conf/server.xml,修改默认监听端口8080为7070,如:

随后,修改host处配置,增加两个配置如下:



        
        

        
        
			   
	    	 		   

        
      

配置完毕,启动Tomcat,访问如下路径:

128.1.136.133:7070/ybt

128.1.136.133:7070/mzt

这样,两个项目的静态页面都可以访问了,顺便说下Tomcat配置文件的分层,由外向里分别是:Server->Service->Engine->Host->Context:

Context: 一个Context对一个Web应用程序

Host:一个Host用于定义一个虚拟主机

Engine:一组虚拟主机的集合

Service:一组Engine的集合,包括线程池Executor和连接器Connector的定义

 

你可能感兴趣的:(Nginx)