在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项目,然后使用dubbo+zookeeper或者springCloud来构建微服务,前端则会是一个单独的项目,前台的请求通过微服务来调用。但是,不同与传统的web项目,这类前后端分离的项目如何在开发中部署和运行呢?
当前后端分离时,后端项目一定会被加载到tomcat的webapp目录下面,但是前端的资源院该如何被访问到呢?这里以tomcat这个中间件为例,探讨在开发这类项目的时候,如何让前后端分离的项目部署并且运行起来,即后端项目部署在tomcat之后如何在运行时访问静态资源(非上线部署)。
主要有两种方案:1.在本地通过Nginx来处理这些静态资源。2、将静态资源统一放入一个javaweb应用中,并将自动生成的war包随后端项目一期丢入tomcat。下面详细介绍
一、使用Nginx来访问静态资源。
在本地安装nginx并且修改nginx.conf,修改相关配置,将web访问的端口的资源进行更改,配置如下:
server {
listen 80;
server_name localhost;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">charset</span> utf-<span class="hljs-number" style="box-sizing: border-box; color: teal;">8</span>;
<span class="hljs-comment" style="box-sizing: border-box; color: #999988; font-style: italic;">#access_log logs/host.access.log main;</span>
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">location</span> / {
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_pass</span> <span class="hljs-url" style="box-sizing: border-box;">http://tomcat_pool</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_redirect</span> <span class="hljs-built_in" style="box-sizing: border-box; color: #0086b3;">off</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_set_header</span> HOST <span class="hljs-variable" style="box-sizing: border-box; color: teal;">$host</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_set_header</span> X-Real-IP <span class="hljs-variable" style="box-sizing: border-box; color: teal;">$remote_addr</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_set_header</span> X-Forwarded-For <span class="hljs-variable" style="box-sizing: border-box; color: teal;">$proxy_add_x_forwarded_for</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">client_max_body_size</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">10m</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">client_body_buffer_size</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">128k</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_connect_timeout</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">90</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_send_timeout</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">90</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_read_timeout</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">90</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_buffer_size</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">4k</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_buffers</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">4</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">32k</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_busy_buffers_size</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">64k</span>;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">proxy_temp_file_write_size</span> <span class="hljs-number" style="box-sizing: border-box; color: teal;">64k</span>;
}
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">location</span> <span class="hljs-regexp" style="box-sizing: border-box; color: #009926;">~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)$</span> {
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">root</span> D:\Workspaces\esop-html;
<span class="hljs-title" style="box-sizing: border-box; color: #990000; font-weight: bold;">index</span> index.html;
}</code></pre>
listen对象改为本地的tomcat访问端口,最下面location中的root改为前端项目中静态资源的位置,这样就可以实现只部署后端的项目就能访问前端的页面了。
二、将前端项目转换为动态的web项目,随后端项目一起丢入tomcat
这个方案省去了在本地安装和配置nginx,但是也只适用于开发阶段项目的部署运行和调试,真正在生产环境通常前后端项目会部署在不同的服务器。
- 如果是Intellij Idea,在导入前端项目之后,右键项目 add framework support --> web application,这时将会把前端项目转换为一个javaweb项目,然后将静态资源放在生成的web目录下即可。
- 如果是eclipse,可以新建一个javaweb项目然后将静态资源放入web或者webcontent目录下,或者直接先导入前端项目,然后通过 project facts 将项目转换为dynamic web项目并勾选 js等相关配置。
然后,运行项目时把后端的war包和前端的war包一同添加到 deployment中运行即可。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于