前端工程部署实例

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

项目背景

前端项目需要集成兄弟部门开发的一个服务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
dist/ ] end subgraph "Nginx Proxy" C[Nginx] D[Static Resource Proxy
dist/static] E[Page Proxy
dist/index.html] end subgraph "Service" F(Generate Access URL
http://localhost/User-Server) Z(Generate Resource API
http://localhost/User-Server/static) X[Request Service
UserService.exe] end subgraph "Invocation" G[electron Embed] --> F H[iframe Embed] --> F end subgraph "Frontend Projects: ECSNext" I[Project
Configuration] --> G I[Project
Configuration] --> H J[Project
Runtime] --> G J[Project
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
相关推荐
何贤几秒前
😲我写出了 Threejs 版城市天际线?!(官推转发🥳+ 源码分享🚀)
前端·开源·three.js
前端老鹰1 分钟前
JavaScript Array.prototype.at ():数组任意位置取值的新姿势
前端·javascript
autumnTop8 分钟前
为什么访问不了同事的服务器或者ping不通地址了?
前端·后端·程序员
weixin_4433533130 分钟前
小红书帖子评论的nodejs爬虫脚本
前端·爬虫
yzzzzzzzzzzzzzzzzz31 分钟前
HTML 常用标签介绍
前端·html
Wcy307651906634 分钟前
web前端第二次作业
前端·javascript·css
北京_宏哥34 分钟前
Python零基础从入门到精通详细教程11 - python数据类型之数字(Number)-浮点型(float)详解
前端·python·面试
waterHBO37 分钟前
css 模拟一个动画效果,消息堆叠。
前端·css
艾小码1 小时前
JavaScript 排序完全指南:从基础到高阶实战
前端·javascript·排序算法
前端加油站1 小时前
在 cursor 成为流行的开发方式后,作为普通开发我们能做什么
前端