jhipster前后端分离

仅适用于jhipster5.1.0

分离前端和API服务器

介绍

JHipster是一个“全栈”开发工具，其目标是使您可以有效地使用前端代码（Angular / React）和后端代码（Spring Boot）。

但是，通常需要将前端代码和后端代码分开，这通常是因为它们是由不同的团队开发的，并且具有不同的生命周期。

Pleae指出，这不是JHipster的默认工作方式：这并不复杂，并且效果很好，但这是一个高级主题。如果您刚刚开始使用JHipster，我们建议您首先使用我们的标准工作方式。

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

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

• jhipster --skip-client 只会生成一个后端应用程序（这通常是JHipster微服务）
• jhipster --skip-server 只会生成一个前端应用程序

目录布局

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

在前端工作时，您需要知道两个目录：

• 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通用应用程序属性中jhipster.cors定义的属性来配置CORS
• 默认情况下，此dev模式在Monolith和网关中启用。对于微服务，默认情况下禁用此功能，因为您应该通过网关访问它们。
• 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，并且
• 它将作为从代理/api到http://api.jhipster.tech:8081/api

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