TT Bigdata TT Bigdata
首页
  • 部署专题

    • 常规安装
    • 一键部署
  • 组件安装

    • 常规&高可用
  • 版本专题

    • 更新说明
  • Ambari-Env

    • 环境准备
    • 开始使用
  • 组件编译

    • 专区—Ambari
    • 专区—Bigtop
  • 报错解决

    • 专区—Ambari
    • 专区—Bigtop
  • 其他技巧

    • Maven镜像加速
    • Gradle镜像加速
    • Bower镜像加速
    • 虚拟环境思路
    • R环境安装+一键安装脚本
    • Ivy配置私有镜像仓库
    • Node.js 多版本共存方案
    • Ambari Web本地启动
    • Npm镜像加速
    • PostgreSQL快速安装
    • Temurin JDK 23快速安装
  • 成神之路

    • 专区—Ambari
    • 专区—Bigtop
  • 集成案例

    • Redis集成教学
    • Dolphin集成教学
    • Doris集成教学
    • 持续整理...
  • 模板代码

    • 各类组件
    • 通用模板
  • 国产化&其他系统

    • Centos系列
    • Kylin系列
    • OpenEuler系列
    • Rocky系列
    • Ubuntu系列
  • 生产调优

    • 组件调优指南
    • 1v1指导调优
  • 定制开发

    • 组件版本定制
    • 样式风格定制
  • 蓝图愿景
  • 技术支持
  • 合作共建
GitHub (opens new window)

JaneTTR

数据酿造智慧,每一滴都是沉淀!
首页
  • 部署专题

    • 常规安装
    • 一键部署
  • 组件安装

    • 常规&高可用
  • 版本专题

    • 更新说明
  • Ambari-Env

    • 环境准备
    • 开始使用
  • 组件编译

    • 专区—Ambari
    • 专区—Bigtop
  • 报错解决

    • 专区—Ambari
    • 专区—Bigtop
  • 其他技巧

    • Maven镜像加速
    • Gradle镜像加速
    • Bower镜像加速
    • 虚拟环境思路
    • R环境安装+一键安装脚本
    • Ivy配置私有镜像仓库
    • Node.js 多版本共存方案
    • Ambari Web本地启动
    • Npm镜像加速
    • PostgreSQL快速安装
    • Temurin JDK 23快速安装
  • 成神之路

    • 专区—Ambari
    • 专区—Bigtop
  • 集成案例

    • Redis集成教学
    • Dolphin集成教学
    • Doris集成教学
    • 持续整理...
  • 模板代码

    • 各类组件
    • 通用模板
  • 国产化&其他系统

    • Centos系列
    • Kylin系列
    • OpenEuler系列
    • Rocky系列
    • Ubuntu系列
  • 生产调优

    • 组件调优指南
    • 1v1指导调优
  • 定制开发

    • 组件版本定制
    • 样式风格定制
  • 蓝图愿景
  • 技术支持
  • 合作共建
GitHub (opens new window)
  • Ambari

    • 编译小技巧

      • Ambari 编译打前端包如何提速
      • Ambari 编译打包需要的 GCC 环境
      • Ambari 汉化方案及实践
      • Ambari 乱码问题处理及解决方案
      • Ambari 本地二次开发——跨域处理
        • Ambari本地二次开发——跨域处理
          • 1. Ambari-web框架解读
          • 1.1 主要技术框架
          • 1.2 构建工具
          • 1.3 CSS 预处理器
          • 1.4 JavaScript 编译
          • 1.5 测试框架
          • 1.6 其他工具
          • 2. 解决思路
          • 2.1 使用 Nginx 反向代理
          • 2.2 升级现有框架(使用 Webpack 替换 Brunch)
          • 2.3 使用 Express 方案
          • 优缺点对比表
          • 3. 基于 Express 方案落地
          • 3.1 node16支持
          • 3.2 修改的点
          • 3.2.1 engine 修改
          • 3.2.2 brunch 修改
          • 3.2.3 编写Express服务代码
          • 3.2.4 尝试启动
          • 3.2.5 package.json 源代码
    • 使用Ambari-Env编译

    • 适用于Centos7.9

    • 适用于Rocky8.10

    • 适用于Ubuntu22.04

  • Ambari-Metrics

  • Ambari-Infra

  • 组件编译-Ambari
  • Ambari
  • 编译小技巧
JaneTTR
2023-04-06
目录

Ambari 本地二次开发——跨域处理

# Ambari本地二次开发——跨域处理

# 1. Ambari-web框架解读

根据 package.json 文件,前端项目使用了以下技术框架和工具:

image-20240804125009026

# 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
1
2
3
4
5
6
7
8
9
10

# 3.2 修改的点

# 3.2.1 engine 修改

建议修改>=4 不然会存在相关启动bug

image-20240804152836387

# 3.2.2 brunch 修改

避免3333端口一致造成的触发测试环境

image-20240804153107738

修改为源码模式 方便debug

image-20240804153148718

# 3.2.3 编写Express服务代码

image-20240804151332887

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
# 3.2.4 尝试启动
因为本地文件已经汉化,服务端文件没有汉化所以出现下面场景

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

image-20240804155716211

image-20240804155658148

image-20240804155836382

image-20240804160154809

# 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
#Ambari#跨域处理#二次开发
Ambari 乱码问题处理及解决方案
Ambari 源码编译指南-懒人篇

← Ambari 乱码问题处理及解决方案 Ambari 源码编译指南-懒人篇→

最近更新
01
Pandoc 缺失导致 SparkR 构建失败
06-08
02
Cyrus SASL/GSASL 缺失解决
06-07
03
Hadoop_3.3.4 编译实战 1.0.0+
06-06
更多文章>
Theme by Vdoing | Copyright © 2017-2025 JaneTTR | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式