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 反向代理

推荐

方法论：

1. 设置反向代理：通过 Nginx 配置反向代理，将前端请求转发到后端服务器。
2. 配置 CORS 头部：在 Nginx 配置中添加 Access-Control-Allow-Origin 等头部，允许跨域请求。
3. 处理预检请求：对于 OPTIONS 请求，直接在 Nginx 中返回相应的 CORS 头部，避免请求到达后端服务器。

2.2 升级现有框架（使用 Webpack 替换 Brunch）

不推荐

方法论：

1. 安装 Webpack 及相关依赖：替换现有的 Brunch 构建工具，使用 Webpack 及其插件来处理项目的构建。
2. 配置 Webpack DevServer：使用 Webpack DevServer 的 proxy 选项来配置代理，将 API 请求转发到后端服务器。
3. 集成 Babel：确保项目中的 JavaScript 代码能够通过 Babel 编译，支持现代 JavaScript 语法。

2.3 使用 Express 方案

推荐

方法论：

1. 使用 Express 作为主服务器：在 Express 中启动 Brunch，并处理所有前端请求。
2. 配置代理中间件：使用 http-proxy-middleware 在 Express 中配置代理，将 API 请求转发到后端服务器。
3. 处理静态文件：通过 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

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);

3.2.4 尝试启动

因为本地文件已经汉化，服务端文件没有汉化所以出现下面场景

如何证明已经可以使用  f12 打开

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"
  }
}