前端工程部署实例

最近笔者负责的一个前端项目部署上线了，现将其分享出来，供各位大佬指点。

项目背景

前端项目需要集成兄弟部门开发的一个服务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

style F fill:#FF0000,stroke:#0f0,stroke-width:2px,color:#0000ff;
  A --> B 
  B --> D
  B --> E
  D --> C
  E --> C
  C -- Generate Access URL --> F
  C -- Generate Resource API --> Z
  E --> X