如何在开发时部署和运行前后端分离的 JavaWeb 项目

本贴最后更新于 2679 天前,其中的信息可能已经天翻地覆

在开发中大型的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中运行即可。

  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 5 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    69 引用 • 372 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 2 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • danl
    132 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 6 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 587 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 19 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 721 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 2 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注