如何为Angular应用配置ELK技术栈

两种可选方案对比 #

两种方案没有绝对的正确错误，分别对应不同的使用场景：

• 方案1：Angular端直接发送请求到Logstash
  • 优势：架构轻量化，无额外中间服务运维成本，链路延迟低
  • 劣势：公网部署存在安全风险，Logstash接口暴露后容易被恶意攻击，前端上报缺少统一的日志校验、脱敏、聚合能力，需要额外配置CORS解决跨域问题
  • 适用场景：仅内部访问的测试环境、工具类应用
• 方案2：经Node.js服务端转发到Logstash
  • 优势：生产级安全方案，Logstash无需暴露公网，Node层可统一实现日志鉴权、脱敏、过滤、采样、批量上报、失败重试等能力，天然解决跨域问题
  • 劣势：需要额外维护Node服务，链路增加一层后有轻微延迟
  • 适用场景：面向公网用户的生产环境应用，是更推荐的通用方案

具体配置步骤 #

方案2（推荐生产级）配置流程 #

1. 配置Logstash接收端

编写Logstash管道配置文件（比如命名为angular-log.conf），示例如下：

input {
  http {
    # 监听地址，仅开放给Node服务所在的内网IP即可
    host => "127.0.0.1"
    port => 5044
    codec => json
  }
}

filter {
  # 统一添加日志标识、字段处理逻辑
  mutate {
    add_field => {
      "log_source" => "angular_frontend"
      "process_time" => "%{@timestamp}"
    }
  }
}

output {
  elasticsearch {
    hosts => ["http://127.0.0.1:9200"]
    index => "angular-app-logs-%{+YYYY.MM.dd}"
  }
}

启动Logstash时指定加载该配置即可。

2. 开发Node.js转发接口

以Express框架为例，核心代码示例：

const express = require('express');
const axios = require('axios');
const app = express();

// 解析JSON请求体
app.use(express.json());

// 日志上报接口
app.post('/api/log/report', async (req, res) => {
  try {
    const logData = req.body;
    // 可在此处添加自定义处理逻辑：比如校验上报权限、过滤无效日志、敏感信息脱敏、日志采样等
    await axios.post('http://127.0.0.1:5044', logData);
    return res.status(204).end();
  } catch (e) {
    console.error('日志转发失败', e);
    return res.status(500).send('log upload failed');
  }
});

app.listen(3000, () => {
  console.log('Node转发服务启动成功，端口3000');
});

3. Angular端封装上报服务

在Angular项目中封装统一的日志上报服务，示例代码：

// log.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class LogService {
  constructor(private http: HttpClient) {}

  /**
   * 上报日志
   * @param level 日志级别：info/warn/error
   * @param content 日志内容
   * @param extra 额外扩展字段
   */
  report(level: 'info' | 'warn' | 'error', content: unknown, extra?: Record<string, unknown>) {
    const payload = {
      level,
      content,
      timestamp: new Date().toISOString(),
      pageUrl: window.location.href,
      userAgent: navigator.userAgent,
      ...extra
    };
    return this.http.post('/api/log/report', payload).subscribe();
  }
}

在需要上报日志的位置直接注入LogService调用report方法即可。

方案1配置流程 #

如果需要使用直连方案，仅需调整两处配置即可：

1. 修改Logstash的input配置，添加CORS规则：

input {
  http {
    host => "0.0.0.0"
    port => 5044
    codec => json
    response_headers => {
      "Access-Control-Allow-Origin" => "你的Angular应用域名"
      "Access-Control-Allow-Methods" => "POST, OPTIONS"
      "Access-Control-Allow-Headers" => "Content-Type"
    }
  }
}

2. 修改Angular的上报地址，直接指向Logstash的HTTP接口地址即可。
   注意：生产环境使用方案1时，务必限制CORS的允许域名，不要使用*，避免Logstash接口被恶意调用

内容的提问来源于stack exchange，提问作者Baruch Levin