最近笔者负责的一个前端项目部署上线了，现将其分享出来，供各位大佬指点。
项目背景
前端项目需要集成兄弟部门开发的一个服务UserService，此服务在改造之前只能用在client端，即在node环境下通过shell指令打开，本质上是新的进程，使用electron开发。现需要对其改造，使其能支持web和client端。
部署思路
改造思路为：前端项目首先打包生成dist目录；然后使用nginx分别代理入口文件dist/index.html和静态资源路径dist/static/;最后直接将nginx代理的url作为使用iframe或者electron的入口。
在次改造过程中，提供api接口服务的后端程序会随着调用方一起启动，并且在前端项目中直接使用正确的接口地址而无需使用nginx做代理。
架构拓扑
使用mermaid标识此次部署的结构：
graph TB
subgraph "Frontend Project: UserManager"
A[React App]
B[Webpack Bundling<br/> dist/ ]
end
subgraph "Nginx Proxy"
C[Nginx]
D[Static Resource Proxy<br/> dist/static]
E[Page Proxy<br/> dist/index.html]
end
subgraph "Service"
F(Generate Access URL<br/>http://localhost/User-Server)
Z(Generate Resource API<br/>http://localhost/User-Server/static)
X[Request Service<br/> UserService.exe]
end
subgraph "Invocation"
G[electron Embed] --> F
H[iframe Embed] --> F
end
subgraph "Frontend Projects: ECSNext"
I[Project<br/>Configuration] --> G
I[Project<br/>Configuration] --> H
J[Project<br/>Runtime] --> G
J[Project<br/>Runtime] --> H
end
A --> B
B --> D
B --> E
D --> C
E --> C
C -- Generate Access URL --> F
C -- Generate Resource API --> Z
E --> X