前端Nginx后端Jetty分离部署

古城微笑少年丶 2022-06-06 23:40 199阅读 0赞

即将开始的一个项目技术要求是实现前后端分离，且前端部署在Nginx服务器上  
  
而后端部署在jetty服务器上，架构采用vue+spring boot  
  
  
关键是之前也没接触过分离部署，vue是啥也不清楚！！！  
  
通过几天的摸索，了解了 那么一点，记录下来，系列笔记如下：  
  
  
[与Nginx的第一次亲密接触][Nginx]  
  
[Jetty官网下载][Jetty]  
  
[与Jetty的第一次亲密接触][Jetty 1]  
  
[Jetty第一次访问没有首页 ][Jetty 1]  
  
[ Jetty修改默认端口 ][Jetty_]  
  
有了前面的积累，可以开始尝试了

###       前端使用vue.js       ###

##### 你需要先下载好`vue.min.js`和`vue-resource.min.js`       #####

##### first.html #####

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">  <script src="../js/vue.min.js"></script>  <script src="../js/vue-resource.min.js"></script> <title>分离部署</title> </head> <body> <div id="app"> <div> { { msg}}</div> </div> <script> new Vue({ el:'#app', data:{msg:""}, created: function() { this.getData(); }, methods:{ getData: function() { //jetty服务器所在ip //vuedemo是项目名 //getDate是Servlet访问路径 var url="http://192.168.71.110:8888/vuedemo/getDate"; //ajax获取数据 this.$http.get(url).then(function(data){ this.msg=data.body; },function(response){ console.log(response) }) } } }); </script> </script> </body> </html>

###       后端使用普通Servlet    ###

#####    ProviceDateServlet.java #####

package com.vuedemo.controller;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/ProviceDateServlet")
    public class ProviceDateServlet extends HttpServlet { 
        private static final long serialVersionUID = 1L;
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //返回给前端的数据
            response.getWriter().write("hello vue with ajax");
        }
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            doGet(request, response);
        }
    
    }

Servlet的配置（web.xml）

<servlet>
        <servlet-name>ProviceDateServlet</servlet-name>
        <servlet-class>com.vuedemo.controller.ProviceDateServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>ProviceDateServlet</servlet-name>
        
        <url-pattern>/getDate</url-pattern>
      </servlet-mapping>

##### 因为是分离部署，涉及跨域请求，我的处理方式是在后端加一个过滤器，也可以使用jsonp解决      过滤器 #####

package com.vuedemo.filter;
    
    import java.io.IOException;
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebFilter("/preHandleFilter")
    public class preHandleFilter implements Filter { 
    
    
        public preHandleFilter() {
        }
    
    
        public void destroy() {
        }
    
    
        public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
            HttpServletRequest request = (HttpServletRequest) req;
            HttpServletResponse response = (HttpServletResponse) resp;
    
            response.setHeader("Access-Control-Allow-Origin", "*");  
            response.setHeader("Access-Control-Allow-Methods", "*");  
            response.setHeader("Access-Control-Max-Age", "3600");  
            response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
            response.setHeader("Access-Control-Allow-Credentials","true");
            chain.doFilter(request, response);
        }
    
        /** * @see Filter#init(FilterConfig) */
        public void init(FilterConfig fConfig) throws ServletException {
            // TODO Auto-generated method stub
        }
    
    }

过滤器的配置（web.xml）

<filter>  
        <filter-name>preHandleFilter</filter-name>  
        <filter-class>com.vuedemo.filter.preHandleFilter</filter-class>  
      </filter>  
      <filter-mapping>
        <filter-name>preHandleFilter</filter-name>  
        
        <url-pattern>/*</url-pattern>  
      </filter-mapping>

部署：  
  
将前端页面（包括js库）部署到Nginx的html目录下

![这里写图片描述][SouthEast]  
  
[**后端直接打成war包**][war]，把war包发布到Jetty服务器的webapp目录下  
  
![这里写图片描述][SouthEast 1]  
  
然后分别启动两个服务器，访问一下  
  
![这里写图片描述][SouthEast 2]  
  
这就差不多了，虽然离真实开发环境还很远，开发环境这两个服务器都是在Linux机器上，不过也原理是一样的，慢慢来，等那个项目开始了在总结真实开发过程

[Nginx]: http://blog.csdn.net/leisure_life/article/details/78090398
[Jetty]: http://blog.csdn.net/leisure_life/article/details/78088881
[Jetty 1]: http://blog.csdn.net/leisure_life/article/details/78089488
[Jetty_]: http://blog.csdn.net/leisure_life/article/details/78089586
[SouthEast]: /images/20220607/e47eb6b3f66a429d9a185c7d60775f2f.png
[war]: http://blog.csdn.net/leisure_life/article/details/78134594
[SouthEast 1]: /images/20220607/2ff39bc9f2ec4a3a9198b50a865a9051.png
[SouthEast 2]: /images/20220607/aacc1fc79fda4b3b805cdaa00c2813c0.png