Next.js 动态配置利器：Nacos 助你轻松实现实时配置更新!

Next.js 动态配置利器：Nacos 助你轻松实现实时配置更新!

大家好，我是梦兽，一个 WEB 全栈开发和 Rust 爱好者。如果你对 Rust 非常感兴趣，可以关注梦兽编程公众号加入我们的交流圈。

---

在当今云原生和微服务架构盛行的时代，应用程序配置与服务发现的重要性日益凸显。Next.js 作为一个功能强大的全栈框架，不仅在前后端分离及 SSR（服务端渲染）方面表现出色，同时也具备与各种外部配置中心无缝衔接的能力。Nacos 作为阿里巴巴推出的云原生服务治理平台，提供了集中式配置管理和动态服务发现的解决方案，通过与 Next.js 集成，不仅可以实现实时的配置更新，还能大幅提升系统的灵活性和稳定性。本文将探讨如何在 Next.js 项目中利用 Nacos 实现动态配置，从而更好地适应快速变化的业务需求与多环境部署场景。

什么是 Nacos

Nacos 是阿里巴巴开源的云原生服务治理平台，提供集中配置管理、动态服务发现和直观的管理控制台，帮助开发者高效管理微服务架构下的配置和通信。通过 Nacos，我们可以实现服务的自动注册与发现，以及配置的热更新，大大减少了运维的复杂度，确保应用能够在面对流量高峰或者业务变更时依然保持高效性和稳定性。

集成 Nacos 的前期准备

这里主要讲 Next.js 这方面的内容，关于 Nacos 本身的详细使用请参考官方文档或相关教程。为了成功实现集成，以下几点前期准备工作是必不可少的：

1. 环境搭建

   • Node.js 与 Next.js 项目：确保你的开发环境中已安装了最新版 Node.js，并通过 npx create-next-app 命令初始化一个 Next.js 项目。
   • Nacos 服务端：可以选择通过 Docker 直接拉取 Nacos 官方镜像进行本地测试。例如：

     docker run -d --name nacos-standalone -p 8848:8848 nacos/nacos-server
     

     通过浏览器访问 http://localhost:8848/nacos 确认服务是否正常运行。

2. 依赖库安装

   • 在 Next.js 项目中安装 Nacos 相关依赖库：

     npm install nacos --save
     

   • 其他环境配置，如通过环境变量管理 Nacos 的服务地址、命名空间和分组信息，确保后续读取配置的稳定性和灵活性。

3. 调试与监控工具

   • 为了更好地监控配置变更与系统状态，建议引入日志管理工具、性能监控插件，确保在使用过程中能及时捕捉异常并做出调整。

实现思路

---

安装 nacos 依赖

npm install nacos --save

SSE 服务端代码

新建 app/api/nacos/route.ts 文件，添加下面内容。

import { getConfigs, subscribeConfig } from '@/packages/nacos';
import { EventEmitter } from 'events';

// 全局事件分发器，用于分发配置更新消息
const configUpdateEmitter = new EventEmitter();

// 全局订阅 Nacos 配置，只订阅一次
subscribeConfig('TEST', 'DEFAULT_GROUP', content => {
  configUpdateEmitter.emit('configUpdate', content);
});

export async function GET() {
  const headers = {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    Connection: 'keep-alive',
  };

  try {
    let isConnected = true;

    const stream = new ReadableStream({
      async start(controller) {
        // 检查 controller 状态的函数
        const isControllerActive = () => {
          return controller.desiredSize !== null && !stream.locked;
        };

        // 添加定期发送心跳保持连接
        const heartbeatInterval = setInterval(() => {
          if (!isControllerActive()) {
            clearInterval(heartbeatInterval);
            cleanup();
            return;
          }
          safeSend(`data: ping\n\n`);
        }, 30000);

        // 安全地发送数据的函数
        const safeSend = (data: any) => {
          if (isConnected && isControllerActive()) {
            try {
              controller.enqueue(data);
            } catch (error) {
              console.error('发送数据失败:', error);
              cleanup();
            }
          }
        };

        // 当全局配置有更新时，通过 SSE 推送给当前客户端
        const onConfigUpdate = (content: any) => {
          safeSend(`data: ${JSON.stringify(content)}\n\n`);
        };

        // 清理函数
        const cleanup = () => {
          isConnected = false;
          clearInterval(heartbeatInterval);
          configUpdateEmitter.removeListener('configUpdate', onConfigUpdate);
        };

        // 注册全局配置更新事件
        configUpdateEmitter.on('configUpdate', onConfigUpdate);

        stream.cancel().catch(() => {
          cleanup();
        });

        // 清除订阅
        return cleanup;
      },
    });

    return new Response(stream, { headers });
  } catch (error) {
    return new Response(JSON.stringify(error), {
      status: 500,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }
}

这样我们的服务端代码就实现了，多个 SSE 连接复用一个 Nacos 连接，从而避免了重复订阅配置，减轻了服务器负担。

客户端代码

实现思路

为了确保页面中使用到的配置能统一管理及更新，我们借助了一个名为 useSysConfig 的 hooks，它在页面多个位置被调用时，只会使用一个全局唯一的 SSE 连接。为此，我们提供了一个 EventSourceManager 来实现该功能，保证每个页面仅实例化一次 SSE 连接，减轻服务器压力。

EventSourceManager 的实现代码如下：

class EventSourceManager {
  private static instance: EventSourceManager;
  private eventSource: EventSource | null = null;
  private listeners: Set<(data: any) => void> = new Set();
  private reconnectTimer: NodeJS.Timeout | null = null;
  private isConnecting: boolean = false;

  private constructor() {}

  static getInstance() {
    if (!EventSourceManager.instance) {
      EventSourceManager.instance = new EventSourceManager();
    }
    return EventSourceManager.instance;
  }

  connect() {
    if (this.eventSource || this.isConnecting) return;

    this.isConnecting = true;
    this.eventSource = new EventSource('/api/nacos');

    this.eventSource.onmessage = event => {
      if (event.data === 'ping') return;
      const data = JSON.parse(event.data);
      this.listeners.forEach(listener => listener(data));
    };

    this.eventSource.onerror = () => {
      this.cleanup();
      // 重连逻辑
      this.reconnectTimer = setTimeout(() => {
        this.connect();
      }, 5000);
    };
  }

  subscribe(listener: (data: any) => void) {
    this.listeners.add(listener);
    if (!this.eventSource) {
      this.connect();
    }

    return () => {
      this.listeners.delete(listener);
    };
  }

  private cleanup() {
    if (this.eventSource) {
      this.eventSource.close();
      this.eventSource = null;
    }
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer);
      this.reconnectTimer = null;
    }
    this.isConnecting = false;
  }
}

export const eventSourceManager = EventSourceManager.getInstance();

使用 useNacosConfig 来获取配置：

'use client';

import { useEffect, useState } from 'react';
import { eventSourceManager } from '@/packages/nacos/react/EventSourceManager';

function useNacosConfig() {
  const [config, setConfig] = useState();

  useEffect(() => {
    return eventSourceManager.subscribe(setConfig);
  }, []);

  return config;
}

export default useNacosConfig;

将 Config 放入到上下文中：

import { useAtom } from 'jotai/index';
import { sysConfigAtom } from '@/atoms/useSysConfig/atoms';
import { useNacosConfig } from '@/packages/nacos/react';
import { useEffect } from 'react';

function useSysConfig() {
  'use client';
  const [sysConfig, setSysConfig] = useAtom(sysConfigAtom);
  const config = useNacosConfig();

  useEffect(() => {
    if (config) {
      setSysConfig(config);
    }
  }, [config, setSysConfig]);

  return sysConfig;
}

export default useSysConfig;

---

结束语

本文详细介绍了如何在 Next.js 项目中集成 Nacos，实现动态配置的实时更新。通过服务端的 SSE 机制和客户端的统一事件管理，我们不仅达到了配置的自动下发和统一管理，更为系统提供了一种简单、高效的动态扩展解决方案。希望本文能为你的项目带去新的思路和灵感，帮助你在微服务和云原生路线中走得更远！

欢迎留言讨论或关注梦兽编程公众号，与我一同探索更多前沿技术。祝大家开发愉快，共同进步！