前后端分离
来源: |
时间:2018-11-09
|
|

前后端分离

介绍

JHipster是一个“全栈”开发工具,其目标是使您能够高效地使用前端代码(Angular / React)和后端代码(Spring Boot)。

但是,分离前端和后端代码是一个常见的要求,通常是因为它们是由不同的团队开发的,并且具有不同的生命周期。

请注意,这不是默认的JHipster工作方式:这样做并不复杂,效果很好,但这是一个高级主题。如果您刚刚开始使用JHipster,我们建议您首先使用我们的标准工作方式。

仅生成前端或后端应用程序

您可以选择仅生成JHipster后端或JHipster前端应用程序。在生成时,这只是选择我们的应用程序生成文档中描述的标志的问题

  • jhipster --skip-client 将只生成一个后端应用程序(这通常是JHipster微服务)

  • jhipster --skip-server 只会生成一个前端应用程序

目录布局

JHipster使用标准的Maven目录布局。在后端工作时,您只需阅读Maven标准目录布局文档即可

在前端工作时,您需要知道2个目录:

  • src/main/webapp 是开发客户端应用程序的地方

  • target/www 是您的客户端应用程序将打包的地方

如果您有独立的团队在前端和后端工作,那么您有两个解决方案:

  • 两个团队都可以在同一个项目上工作。由于目录是分开的,团队之间不会有太多冲突。为了使事情更加清洁,两个团队都可以在不同的分支机构工作。

  • 前端代码可以存储在特定的Git项目中,然后作为Git子模块导入到主后端项目中。这需要移动客户端构建脚本,但这是一个简单的重构。

HTTP请求路由和缓存

一旦前端和后端分离,问题将是如何处理HTTP请求:

  • 所有API调用都将使用/api前缀。如果您使用的是Angular,则配置中SERVER_API_URL定义的特定常量webpack.common.js可以丰富此前缀。例如,您可以将其"http://api.jhipster.tech:8081/"用作后端API服务器(如果您这样做,请阅读下面关于CORS的文档)。

  • 调用/服务静态资产(来自前端),不应由浏览器缓存。

  • 调用/app(包含客户端应用程序)和/content(包含静态内容,如图像和CSS)的调用应该在生产中缓存,因为这些资产是经过哈希处理的。

使用BrowserSync

dev模式中,JHipster使用BrowserSync进行前端应用程序的热重载。BrowserSync有一个代理(这是它的文档),它将请求路由/api到后端服务器(默认情况下http://127.0.0.1:8080)。

这仅适用于dev模式,但这是从前端访问不同API服务器的一种非常强大的方法。

使用CORS

CORS(跨源请求共享)允许使用相同的前端访问不同的后端服务器,而无需配置代理。

这是一种易于使用的解决方案,但在生产中可能不太安全。

JHipster提供开箱即用的CORS配置:

  • 可以使用jhipster.cors属性配置CORS ,如JHipster常用应用程序属性中所定义

  • 默认情况下,它在dev单块和网关的模式下启用对于微服务,它默认是禁用的,因为您应该通过网关访问它们。

  • prod出于安全原因,默认情况下在模式下禁用它

使用NGinx

分离前端和后端代码的另一种解决方案是使用代理服务器。这在生产中非常普遍,有些团队也在开发中使用这种技术。

此配置将根据您的特定用例而更改,因此生成器无法自动执行此操作,此处位于工作配置下方。

创建src/main/docker/nginx.ymlDocker Compose文件:

version: '2'services:
  nginx:
    image: nginx:1.13-alpine
    volumes:
    - ./../../../target/www:/usr/share/nginx/html
    - ./nginx/site.conf:/etc/nginx/conf.d/default.conf
    ports:
    - "8000:80"

此Docker镜像将配置一个NGinx服务器,该服务器从target/www以下位置读取静态资源:这是默认情况下生成JHipster前端应用程序的位置。在生产中,您可能会有一个特定的文件夹。

它还读取一个./nginx/site.conf文件:这是一个特定于NGinx的配置文件。这是一个示例site.conf

server {
    listen 80;
    index index.html;
    server_name localhost;
    error_log  /var/log/nginx/error.log;
    location / {
        root /usr/share/nginx/html;
    }
    location /api {
        proxy_pass http://api.jhipster.tech:8081/api;
    }
    location /management {
        proxy_pass http://api.jhipster.tech:8081/management;
    }
    location /v2 {
       proxy_pass http://api.jhipster.tech:8081/v2;
    }
    location /swagger-ui {
        proxy_pass http://api.jhipster.tech:8081/swagger-ui;
    }
    location /swagger-resources {
        proxy_pass http://api.jhipster.tech:8081/swagger-resources;
    }}

这种配置意味着:

  • NGinx将在港口运行 80

  • 它将读取文件夹中的静态资产/usr/share/nginx/html,和

  • 它将作为从代理/apihttp://api.jhipster.tech:8081/api

此配置需要根据您的特定需求进行一些调整,但对于大多数应用程序来说应该是一个足够好的起点。


J

提交
查看更多评论
没有更多评论