僅適用于jhipster5.1.0
分離前端和API服務(wù)器
介紹
JHipster是一個(gè)“全椥堤＃”開(kāi)發(fā)工具，其目標(biāo)是使您可以有效地使用前端代碼（Angular / React）和后端代碼（Spring Boot）。
但是，通常需要將前端代碼和后端代碼分開(kāi)，這通常是因?yàn)樗鼈兪怯刹煌膱F(tuán)隊(duì)開(kāi)發(fā)的加酵，并且具有不同的生命周期拳喻。
Pleae指出，這不是JHipster的默認(rèn)工作方式：這并不復(fù)雜猪腕，并且效果很好冗澈，但這是一個(gè)高級(jí)主題。如果您剛剛開(kāi)始使用JHipster陋葡，我們建議您首先使用我們的標(biāo)準(zhǔn)工作方式亚亲。
僅生成前端或后端應(yīng)用程序
您可以選擇僅生成JHipster后端或JHipster前端應(yīng)用程序。在生成時(shí)腐缤，這僅是選擇標(biāo)志的問(wèn)題捌归，這些標(biāo)志在我們的應(yīng)用程序生成文檔中進(jìn)行了描述：
-
jhipster --skip-client只會(huì)生成一個(gè)后端應(yīng)用程序（這通常是JHipster微服務(wù)） -
jhipster --skip-server只會(huì)生成一個(gè)前端應(yīng)用程序
目錄布局
JHipster使用標(biāo)準(zhǔn)的Maven目錄布局。在后端上工作時(shí)岭粤，您只需閱讀Maven標(biāo)準(zhǔn)目錄布局文檔惜索。
在前端工作時(shí)，您需要知道兩個(gè)目錄：
-
src/main/webapp是開(kāi)發(fā)客戶端應(yīng)用程序的地方 -
target/www是您的客戶端應(yīng)用程序?qū)⒈淮虬奈恢?/li>
如果您有分別在前端和后端工作的團(tuán)隊(duì)剃浇，則有兩種解決方案：
- 兩個(gè)團(tuán)隊(duì)可以從事同一個(gè)項(xiàng)目巾兆。由于目錄是分開(kāi)的，因此團(tuán)隊(duì)之間不會(huì)有太多沖突虎囚。為了使事情變得更加清潔角塑，兩個(gè)團(tuán)隊(duì)可以在不同的分支機(jī)構(gòu)工作。
- 前端代碼可以存儲(chǔ)在特定的Git項(xiàng)目中淘讥，然后作為Git子模塊導(dǎo)入到主后端項(xiàng)目中圃伶。這將需要移動(dòng)客戶端構(gòu)建腳本，但這是一個(gè)簡(jiǎn)單的重構(gòu)蒲列。
HTTP請(qǐng)求路由和緩存
一旦前端和后端分離留攒，問(wèn)題將是如何處理HTTP請(qǐng)求：
- 所有API調(diào)用都將使用
/api前綴。如果您使用的是Angular嫉嘀，則配置中還會(huì)SERVER_API_URL定義一個(gè)特定的常量，該常量webpack.common.js可以豐富此前綴魄揉。例如剪侮，您可以"http://api.jhipster.tech:8081/"用作后端API服務(wù)器（如果執(zhí)行此操作，請(qǐng)閱讀下面有關(guān)CORS的文檔）洛退。 - 調(diào)用
/服務(wù)靜態(tài)資產(chǎn)（從前端）瓣俯，不應(yīng)由瀏覽器緩存。 - 對(duì)
/app（包含客戶端應(yīng)用程序）和/content（包含靜態(tài)內(nèi)容兵怯，如圖像和CSS）的調(diào)用應(yīng)在生產(chǎn)中進(jìn)行緩存彩匕，因?yàn)檫@些資產(chǎn)是經(jīng)過(guò)哈希處理的。
使用BrowserSync
在dev模式下媒区，JHipster使用BrowserSync來(lái)熱重載前端應(yīng)用程序驼仪。BrowserSync具有一個(gè)代理（這是其文檔）掸犬，該代理會(huì)將請(qǐng)求從路由/api到后端服務(wù)器（默認(rèn)為http://127.0.0.1:8080）。
這僅在dev模式下有效绪爸，但這是從前端訪問(wèn)不同API服務(wù)器的非常有效的方法湾碎。
使用CORS
CORS（跨域請(qǐng)求共享）允許訪問(wèn)具有相同前端的不同后端服務(wù)器，而無(wú)需配置代理奠货。
這是一個(gè)易于使用的解決方案介褥，但是在生產(chǎn)中可能不太安全。
JHipster提供了開(kāi)箱即用的CORS配置：
- 可以使用JHipster通用應(yīng)用程序?qū)傩灾?/a>
jhipster.cors定義的屬性來(lái)配置CORS - 默認(rèn)情況下递惋，此
dev模式在Monolith和網(wǎng)關(guān)中啟用柔滔。對(duì)于微服務(wù)，默認(rèn)情況下禁用此功能萍虽，因?yàn)槟鷳?yīng)該通過(guò)網(wǎng)關(guān)訪問(wèn)它們睛廊。 -
prod出于安全原因，默認(rèn)情況下在模式下禁用此功能贩挣。
使用NGinx
分離前端代碼和后端代碼的另一種解決方案是使用代理服務(wù)器喉前。這在生產(chǎn)中很常見(jiàn)，有些團(tuán)隊(duì)也在開(kāi)發(fā)中使用了該技術(shù)王财。
此配置將根據(jù)您的特定用例進(jìn)行更改卵迂，因此生成器無(wú)法自動(dòng)進(jìn)行此配置，這在下面的可用配置下绒净。
創(chuàng)建一個(gè)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服務(wù)器见咒，該服務(wù)器從讀取靜態(tài)資產(chǎn)target/www：這是默認(rèn)情況下生成JHipster前端應(yīng)用程序的位置。在生產(chǎn)中挂疆，您可能為此有一個(gè)特定的文件夾改览。
它還讀取./nginx/site.conf文件：這是NGinx特定的配置文件。這是一個(gè)示例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將在端口上運(yùn)行
80 - 它將讀取文件夾中的靜態(tài)資產(chǎn)
/usr/share/nginx/html缤言，并且 - 它將作為從代理
/api到http://api.jhipster.tech:8081/api
根據(jù)您的特定需求宝当，此配置將需要進(jìn)行一些調(diào)整，但對(duì)于大多數(shù)應(yīng)用程序來(lái)說(shuō)胆萧，這應(yīng)該是一個(gè)足夠好的起點(diǎn)庆揩。
