Ambari 本地二次开发——跨域处理
# Ambari本地二次开发——跨域处理
# 1. Ambari-web框架解读
根据 package.json
文件,前端项目使用了以下技术框架和工具:
# 1.1 主要技术框架
Ember.js
ember-precompile-brunch
: ^0.1.1- 用于预编译 Ember.js 模板,使其可以在浏览器中高效运行。
ember-radio-button
: 0.1.2- 提供了一个简单的 Ember.js 组件,用于创建单选按钮。
# 1.2 构建工具
Brunch
assetsmanager-brunch
: ~1.8.1- 用于管理项目中的静态资源,如图片、字体等。
babel-brunch
: 6.0.0- 用于将 ES6+ 代码转换为 ES5 代码,以兼容更多的浏览器。
clean-css-brunch
: >= 1.0 < 1.5- 用于压缩 CSS 文件,减少文件大小,提高加载速度。
css-brunch
: >= 1.0 < 1.5- 用于处理 CSS 文件,包括合并和编译。
javascript-brunch
: >= 1.0 < 1.5- 用于处理 JavaScript 文件,包括合并和编译。
less-brunch
: >= 1.0 < 1.5- 用于编译 LESS 文件为 CSS。
uglify-js-brunch
: >= 1.0 < 1.5- 用于压缩 JavaScript 文件,减少文件大小,提高加载速度。
# 1.3 CSS 预处理器
LESS
less-brunch
: >= 1.0 < 1.5- 用于将 LESS 文件编译为 CSS 文件,支持变量、嵌套等高级功能。
# 1.4 JavaScript 编译
Babel
babel
: ^6.5.2- JavaScript 编译器,用于将 ES6+ 代码转换为 ES5 代码。
babel-plugin-transform-object-assign
: 6.22.0- Babel 插件,用于转换 ES6 的 Object.assign 语法。
babel-preset-es2015
: ^6.18.0- Babel 预设,用于支持 ES2015 语法。
# 1.5 测试框架
Mocha
mocha
: 2.5.3- 测试框架,用于编写和运行测试用例。
Chai
chai
: ~3.5.0- 断言库,与 Mocha 搭配使用,用于编写测试断言。
Sinon
sinon
: =1.7.3- 测试工具库,用于创建模拟、间谍和存根。
sinon-chai
: ~2.8.0- 将 Sinon 的断言方法集成到 Chai 中。
Karma
karma
: >=0.11.14- 测试运行器,用于在多个浏览器中运行测试。
karma-phantomjs-launcher
: 1.0.2- Karma 插件,用于在 PhantomJS 浏览器中运行测试。
karma-babel-preprocessor
: ^6.0.1- Karma 插件,用于在测试前编译 ES6+ 代码。
karma-chai
: ~0.1.0- Karma 插件,用于集成 Chai 断言库。
karma-commonjs-require
: ~0.0.3- Karma 插件,用于支持 CommonJS 模块。
karma-coverage
: ~0.2.0- Karma 插件,用于生成测试覆盖率报告。
karma-ember-precompiler-brunch
: ^1.0.0- Karma 插件,用于预编译 Ember.js 模板。
karma-mocha
: 0.1.1- Karma 插件,用于集成 Mocha 测试框架。
karma-sinon
: ~1.0.2- Karma 插件,用于集成 Sinon 测试工具库。
# 1.6 其他工具
Express
express
: 2.5.8- Web 应用框架,用于搭建开发服务器。
PhantomJS
phantomjs
: ~2.1.0- 无头浏览器,用于在没有 GUI 的环境中运行测试。
# 2. 解决思路
# 2.1 使用 Nginx 反向代理
推荐
方法论:
- 设置反向代理:通过 Nginx 配置反向代理,将前端请求转发到后端服务器。
- 配置 CORS 头部:在 Nginx 配置中添加
Access-Control-Allow-Origin
等头部,允许跨域请求。 - 处理预检请求:对于
OPTIONS
请求,直接在 Nginx 中返回相应的 CORS 头部,避免请求到达后端服务器。
# 2.2 升级现有框架(使用 Webpack 替换 Brunch)
不推荐
方法论:
- 安装 Webpack 及相关依赖:替换现有的 Brunch 构建工具,使用 Webpack 及其插件来处理项目的构建。
- 配置 Webpack DevServer:使用 Webpack DevServer 的
proxy
选项来配置代理,将 API 请求转发到后端服务器。 - 集成 Babel:确保项目中的 JavaScript 代码能够通过 Babel 编译,支持现代 JavaScript 语法。
# 2.3 使用 Express 方案
推荐
方法论:
- 使用 Express 作为主服务器:在 Express 中启动 Brunch,并处理所有前端请求。
- 配置代理中间件:使用
http-proxy-middleware
在 Express 中配置代理,将 API 请求转发到后端服务器。 - 处理静态文件:通过 Express 提供静态文件服务,确保前端资源能够正确加载。
# 优缺点对比表
方案 | 优点 | 缺点 |
---|---|---|
Nginx 反向代理 | - 性能高:Nginx 作为高性能的反向代理服务器,能够高效处理大量请求。 | - 需要额外的服务器配置:需要在服务器上安装和配置 Nginx。 |
- 灵活性强:可以根据需求灵活配置不同的代理规则和头部。 | - 复杂度增加:对于不熟悉 Nginx 配置的开发者,可能需要额外的学习成本。 | |
升级现有框架(Webpack) | - 现代化工具链:Webpack 是当前最流行的前端构建工具之一,拥有丰富的插件生态和强大的功能。 | - 迁移成本:从 Brunch 迁移到 Webpack 可能需要重写部分构建配置和脚本。 |
- 更好的开发体验:Webpack DevServer 提供热模块替换(HMR)等功能,提高开发效率。 | - 学习曲线:Webpack 的配置相对复杂,可能需要一定的学习时间。 | |
使用 Express 方案(推荐) | - 集成度高:所有配置和逻辑都在一个 Node.js 应用中,易于管理。 | - 性能可能不如 Nginx:Express 的性能可能不如专门的反向代理服务器(如 Nginx)。 |
- 灵活性强:可以根据需求灵活配置代理规则和中间件。 | - 需要额外的 Node.js 依赖:需要安装和配置额外的 Node.js 依赖(如 http-proxy-middleware )。 |
# 3. 基于 Express 方案落地
# 3.1 node16支持
nvm use 16
npm config set registry https://registry.npmmirror.com
npm install -g yarn
yarn config set registry https://registry.npmmirror.com
# express 直上 4.19.2,
# http-proxy-middleware 直上 3.0.0
# cross-spawn 直上 7.0.3
yarn add express@4.19.2 http-proxy-middleware@3.0.0 cross-spawn@7.0.3 --ignore-engines --save --ignore-engines
yarn install --ignore-engines
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.2 修改的点
# 3.2.1 engine 修改
建议修改>=4 不然会存在相关启动bug
# 3.2.2 brunch 修改
避免3333端口一致造成的触发测试环境
修改为源码模式 方便debug
# 3.2.3 编写Express服务代码
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const path = require('path');
const spawn = require('cross-spawn');
const app = express();
// 启动 Brunch
const brunch = spawn('brunch', ['watch'], { stdio: 'inherit' });
brunch.on('close', (code) => {
console.log(`Brunch 进程已经退出, code ${code}`);
});
// 代理 API 请求
app.use('/api/v1', createProxyMiddleware({
target: 'http://localhost:28080', // 后端服务器地址
pathRewrite: {
'': '/api/v1', // 把api/v1 拼进去代理路径前缀
},
changeOrigin: true,
}));
// 静态文件服务
app.use(express.static(path.join(__dirname, 'public')));
// 启动服务器
const port = process.env.PORT || 3000;
const server = app.listen(port, () => {
console.log(`代理服务已经开启 http://localhost:${port}`);
});
// 处理进程退出 一般需要等待上一会
const handleExit = (signal) => {
console.log(`接收到信号 ${signal}. Closing Brunch and server...`);
brunch.kill('SIGINT');
server.close(() => {
console.log('Brunch 服务已经关闭');
process.exit(0);
});
};
process.on('SIGINT', handleExit);
process.on('SIGTERM', handleExit);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# 3.2.4 尝试启动
因为本地文件已经汉化,服务端文件没有汉化所以出现下面场景
如何证明已经可以使用 f12 打开
1
2
3
2
3
# 3.2.5 package.json 源代码
{
"name": "Ambari",
"description": "Front-end package for the Apache Ambari Project",
"version": "2.4.0",
"homepage": "http://ambari.apache.org/",
"repository": {
"type": "git",
"url": "https://gitbox.apache.org/repos/asf/ambari/repo?p=ambari.git;a=summary"
},
"dependencies": {
"assetsmanager-brunch": "~1.8.1",
"babel-brunch": "6.0.0",
"brunch": "1.7.20",
"clean-css-brunch": ">= 1.0 < 1.5",
"cross-spawn": "7.0.3",
"css-brunch": ">= 1.0 < 1.5",
"cssstyle": "0.2.3",
"ember-precompile-brunch": "^0.1.1",
"ember-radio-button": "0.1.2",
"http-proxy-middleware": "3.0.0",
"javascript-brunch": ">= 1.0 < 1.5",
"less-brunch": ">= 1.0 < 1.5",
"uglify-js-brunch": ">= 1.0 < 1.5"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-plugin-transform-object-assign": "6.22.0",
"babel-preset-es2015": "^6.18.0",
"chai": "~3.5.0",
"express": "4.19.2",
"karma": ">=0.11.14",
"karma-babel-preprocessor": "^6.0.1",
"karma-chai": "~0.1.0",
"karma-commonjs-require": "~0.0.3",
"karma-coverage": "~0.2.0",
"karma-ember-precompiler-brunch": "^1.0.0",
"karma-mocha": "0.1.1",
"karma-phantomjs-launcher": "1.0.2",
"karma-sinon": "~1.0.2",
"mocha": "2.5.3",
"phantomjs": "~2.1.0",
"sinon": "=1.7.3",
"sinon-chai": "~2.8.0"
},
"scripts": {
"start": "brunch watch --server",
"test": "karma start"
},
"engines": {
"node": ">=4.0.0"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52