InsightFlow 服务配置优化与部署实践

Detachym2026-03-18 17:53

引言

在个人技术空间的构建过程中，我将InsightFlow 实时监控大屏作为核心项目之一 ------ 它的目标是通过可视化界面实时展示云服务器的 CPU、内存、磁盘等资源使用情况，帮助我及时发现系统异常。然而，在将项目从本地开发环境部署到阿里云 ECS（AlmaLinux 系统）的过程中，我遇到了一系列 "新手友好型" 坑点：端口配置混乱、前端只显示文本、Nginx 报 502 错误、权限不足导致 403......

本文将完整记录我从 "问题频发" 到 "服务稳定运行" 的全过程，包含具体操作步骤、代码对比、配置文件详解、权限处理技巧，适合和我一样的后端开发新手参考。

一、问题背景

1.1 项目初始状态

InsightFlow 是一个基于 Spring Boot + WebSocket 的实时监控项目，本地开发时一切正常：访问localhost:8080能看到完整的监控大屏，数据每秒更新。但当我把项目打包成 JAR 文件上传到云服务器后，问题接踵而至。

1.2 具体问题表现

（1）服务端口配置混乱
  • 本地开发时，我在application.yml中把端口设为了8081（怕和其他项目冲突）；
  • 但在写 Nginx 配置时，我 "想当然" 地把代理端口写成了8080；
  • 结果就是：访问云服务器的8080端口时，要么连接超时，要么报 404 Not Found。
（2）前端界面只显示文本消息

好不容易把端口统一成8080后，浏览器终于有响应了 ------ 但只显示了一行字："系统运行中"，完全没有我预期的监控大屏界面。

（3）博客主页链接指向错误路径

我的个人博客（基于 Hugo 构建）主页上有一个 "InsightFlow 项目" 的链接，但我最初把链接写成了服务器上的文件夹路径 （如/root/PersonalSpace/InsightFlow），而不是公网 URL。结果访问者点击链接时，要么看到 403 Forbidden（权限不足），要么看到一个文件夹目录列表，完全无法使用监控服务。

（4）Nginx 配置存在冲突和权限问题

为了解决上述问题，我不断修改 Nginx 配置文件，导致：

  • 配置文件中出现多个server块监听同一个端口，Nginx 启动时报错；
  • 多个location块匹配相同路径，访问时出现 502 Bad Gateway；
  • 网站文件放在/root/PersonalSpace目录下，Nginx 运行用户（nginx）没有访问权限，报 403 Forbidden。

二、解决方案概述

2.1 核心目标

本次优化的核心目标很明确：

  1. 确保 InsightFlow 后端服务稳定运行，端口配置统一；
  2. 前端监控大屏完整显示，WebSocket 实时数据推送正常；
  3. 博客主页的项目链接正确指向公网 URL；
  4. Nginx 配置清晰无冲突，权限设置合理，外部访问正常。

2.2 技术栈说明

先简单解释一下本文用到的技术（方便新手理解）：

  • Spring Boot：后端框架，负责处理 HTTP 请求、管理 WebSocket 连接、采集服务器资源数据；
  • Nginx：反向代理服务器，负责将外部请求（80/8080/5000 端口）转发到内部对应的服务，同时处理静态资源；
  • WebSocket：在单个 TCP 连接上进行全双工通信的协议，用于实现后端数据的实时推送（避免前端频繁轮询）；
  • HTML/CSS/JS：构建监控大屏的前端技术，通过 JS 建立 WebSocket 连接并动态更新页面。

三、具体实施步骤

3.1 服务配置调整

3.1.1 统一端口配置为 8080

首先要把 InsightFlow 服务的端口统一为8080------ 这是 Java Web 应用的常用端口，且没有被云服务器上的其他服务占用。

操作步骤：

  1. 打开本地项目的src/main/resources/application.yml文件；
  2. 修改server.port为8080，同时确保context-path为/（避免路径前缀问题）。

配置文件对比：

yaml

复制代码 
# 修改前（端口混乱）
server:
  port: 8081
  servlet:
    context-path: /insightflow  # 多余的前缀，导致访问路径复杂

# 修改后（统一配置）
server:
  port: 8080
  servlet:
    context-path: /  # 根路径，访问更简洁

新手解释：

  • server.port：Spring Boot 应用启动时监听的端口；
  • context-path：应用的上下文路径，设为/后，访问http://IP:8080就能直接到达应用，不需要加/insightflow前缀。
3.1.2 修改 Controller：从返回文本到返回 HTML

前端只显示文本的问题，根源在于我用错了 Controller 注解 ------@RestController会把返回值当作纯文本 / JSON 处理，而@Controller才能返回 HTML 页面。

问题根源分析：

  • @RestController = @Controller + @ResponseBody：方法返回值会直接写入 HTTP 响应体，不会被视图解析器解析；
  • @Controller：方法返回值会被视图解析器解析为视图名称（如index.html），然后找到对应的静态文件渲染返回。

操作步骤：

  1. 打开HealthController.java（路径：src/main/java/com/example/insightflow/controller/）；
  2. 将@RestController改为@Controller；
  3. 将根路径方法的返回值从"系统运行中"改为"index.html"。

代码对比：

java

运行

复制代码 
// 修改前（只返回文本）
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HealthController {
    @GetMapping("/")
    public String healthCheck() {
        return "系统运行中";  // 纯文本，不会渲染HTML
    }
}

// 修改后（返回HTML页面）
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HealthController {
    @GetMapping("/")
    public String index() {
        return "index.html";  // 视图解析器会去static目录找这个文件
    }
}

新手提示：

  • index.html文件必须放在src/main/resources/static/目录下（Spring Boot 默认的静态资源目录）；
  • 如果用 Thymeleaf 等模板引擎，文件要放在templates/目录，且返回值不需要加.html后缀。
3.1.3 前端配置更新

为了让界面更简洁，且 WebSocket 连接路径与后端匹配，需要修改前端代码：

  1. 移除界面上 "端口：8080" 的显示（统一端口后不需要显式展示）；
  2. 更新 WebSocket 连接路径，移除/insightflow前缀。

操作步骤： 打开src/main/resources/static/index.html，找到 WebSocket 连接代码并修改。

代码对比：

javascript

运行

复制代码 
// 修改前（路径带前缀）
const ws = new WebSocket('ws://' + window.location.host + '/insightflow/ws/monitor');

// 修改后（路径简洁）
const ws = new WebSocket('ws://' + window.location.host + '/ws/monitor');

新手解释：

  • window.location.host：自动获取当前页面的主机名和端口（如47.xxx.xxx.xxx:8080），部署到不同服务器时不需要手动修改代码；
  • 移除/insightflow前缀是因为后端context-path设为了/，路径要保持一致。

3.2 Nginx 配置优化

Nginx 是本次部署的 "关键枢纽"------ 它负责把外部请求转发到内部服务，同时处理静态资源。在优化前，我的配置文件非常混乱，接下来我会一步步重构它。

3.2.1 Nginx 配置文件位置说明

在 AlmaLinux 系统中：

  • 主配置文件：/etc/nginx/nginx.conf（一般不需要修改，保持默认即可）；
  • 自定义站点配置：/etc/nginx/conf.d/目录下的.conf文件（会被自动加载）。

为了保持整洁，我在/etc/nginx/conf.d/目录下创建了一个名为personal-space.conf的文件，专门用于配置我的个人技术空间。

3.2.2 配置文件重构

操作步骤：

  1. 用 vim 编辑器打开配置文件：vim /etc/nginx/conf.d/personal-space.conf；
  2. 清空原有内容，写入以下配置（已隐藏具体 IP，替换为47.xxx.xxx.xxx）。

完整 Nginx 配置示例：

nginx

复制代码 
# 配置1：博客主页（80端口，HTTP默认端口）
server {
    listen 80;
    server_name 47.xxx.xxx.xxx;  # 替换为你的云服务器公网IP或域名

    # 博客静态文件根目录（Hugo生成的静态文件放在这里）
    root /root/PersonalSpace/HtmlPro;
    index index.html;

    # 匹配所有路径，尝试查找静态文件
    location / {
        try_files $uri $uri/ =404;  # 先找文件，再找目录，都找不到返回404
    }

    # 禁止访问隐藏文件（如.git、.env）
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }
}

# 配置2：InsightFlow服务（8080端口代理）
server {
    listen 8080;
    server_name 47.xxx.xxx.xxx;

    # 代理所有HTTP请求到本地Spring Boot服务
    location / {
        proxy_pass http://localhost:8080;  # 转发到本地8080端口
        proxy_set_header Host $host;  # 传递原始Host头
        proxy_set_header X-Real-IP $remote_addr;  # 传递真实客户端IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 传递代理链IP
        proxy_set_header X-Forwarded-Proto $scheme;  # 传递协议（HTTP/HTTPS）
    }

    # 重点：WebSocket连接需要特殊配置
    location /ws/monitor {
        proxy_pass http://localhost:8080/ws/monitor;
        proxy_http_version 1.1;  # WebSocket需要HTTP/1.1
        proxy_set_header Upgrade $http_upgrade;  # 升级协议为WebSocket
        proxy_set_header Connection "upgrade";  # 保持连接打开
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

# 配置3：Agent服务（5000端口代理，可选）
server {
    listen 5000;
    server_name 47.xxx.xxx.xxx;

    location / {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

关键配置项新手解释：

  • listen 80：Nginx 监听的端口，80 是 HTTP 默认端口，访问时不需要在 URL 中加端口；
  • server_name：服务器的 IP 或域名，Nginx 会根据这个值选择对应的server块处理请求；
  • root：静态文件的根目录，访问http://47.xxx.xxx.xxx/时，Nginx 会在这个目录下找index.html；
  • location /：路径匹配规则，/表示匹配所有路径；
  • proxy_pass：反向代理的目标地址，把请求转发到本地运行的服务；
  • WebSocket 配置重点 ：
    • proxy_http_version 1.1：WebSocket 必须使用 HTTP/1.1 协议；
    • proxy_set_header Upgrade $http_upgrade：将 HTTP 请求升级为 WebSocket 请求；
    • proxy_set_header Connection "upgrade"：告诉 Nginx 保持连接打开，用于实时通信。
3.2.3 权限设置（解决 403 Forbidden）

由于我把网站文件放在了/root/PersonalSpace目录下，而 Nginx 运行用户是nginx，默认没有访问/root目录的权限，这会导致 403 错误。

解决权限问题的步骤：

  1. 查看 Nginx 运行用户：

    bash

    运行

    复制代码 
    ps aux | grep nginx

    输出示例（第一列就是运行用户）：

    plaintext

    复制代码 
    nginx      1234  0.0  0.1  12345  6789 ?        S    10:00   0:00 nginx: worker process

  2. 修改文件权限（两种方案，推荐方案二）：

    • 方案一：修改文件所有者（适合个人学习环境） 将/root/PersonalSpace目录的所有者改为nginx用户：

      bash

      运行

      复制代码 
      chown -R nginx:nginx /root/PersonalSpace

      但这种方案有安全风险，因为nginx用户获得了/root目录的访问权限。

    • 方案二：调整目录权限并移动文件（更安全）

      1. 将网站文件移动到/var/www/目录下（Nginx 默认的网站目录）：

        bash

        运行

        复制代码 
        mkdir -p /var/www/personal-space
mv /root/PersonalSpace/* /var/www/personal-space/

      2. 修改/var/www/personal-space目录的权限，让nginx用户可以读取：

        bash

        运行

        复制代码 
        chmod -R 755 /var/www/personal-space
chown -R root:nginx /var/www/personal-space

      3. 同时修改 Nginx 配置文件中的root路径：

        nginx

        复制代码 
        root /var/www/personal-space/HtmlPro;  # 替换原来的/root/PersonalSpace/HtmlPro

  3. 处理 SELinux（AlmaLinux 特有的坑点）：AlmaLinux 默认开启 SELinux（安全增强型 Linux），即使文件权限正确，SELinux 也可能阻止 Nginx 访问文件。

    • 临时关闭 SELinux（重启后失效，用于测试）： bash

      运行

      复制代码 
      setenforce 0

    • 永久关闭 SELinux（不推荐，安全起见可以设置布尔值）：编辑/etc/selinux/config文件，将SELINUX=enforcing改为SELINUX=disabled，然后重启服务器。

    • 更安全的方式：设置 SELinux 布尔值，允许 Nginx 访问网站文件： bash

      运行

      复制代码 
      setsebool -P httpd_can_network_connect on  # 允许Nginx连接网络
setsebool -P httpd_read_user_content on  # 允许Nginx读取用户文件
3.2.4 重启 Nginx 并验证配置

  1. 测试 Nginx 配置是否正确：

    bash

    运行

    复制代码 
    nginx -t

    如果输出syntax is ok和test is successful，说明配置正确。

  2. 重新加载 Nginx 配置：

    bash

    运行

    复制代码 
    systemctl reload nginx

    （如果 Nginx 没启动，用systemctl start nginx启动）

3.3 博客链接更新

我的个人博客是用 Hugo 构建的，需要修改博客源码中的项目链接，然后重新生成静态文件并上传到服务器。

操作步骤：

  1. 打开 Hugo 博客的源码文件（通常是content/posts/xxx.md或config.toml）；

  2. 找到 InsightFlow 项目的链接，将其从文件夹路径改为公网 URL： markdown

    复制代码 
    # 修改前
[InsightFlow项目](/root/PersonalSpace/InsightFlow)

# 修改后
[InsightFlow实时监控大屏](http://47.xxx.xxx.xxx:8080)

  3. 重新生成 Hugo 静态文件： bash

    运行

    复制代码 
    hugo -D  # -D表示包含草稿文件

  4. 将生成的public/目录下的文件上传到服务器的/var/www/personal-space/HtmlPro目录（覆盖原有文件）。

3.4 服务状态验证

完成上述配置后，需要一步步验证服务是否正常运行。

3.4.1 验证 InsightFlow 后端服务

  1. 上传并启动 Spring Boot JAR 文件 ：将本地打包好的insightflow-0.0.1-SNAPSHOT.jar上传到服务器，然后用以下命令启动：

    bash

    运行

    复制代码 
    nohup java -jar insightflow-0.0.1-SNAPSHOT.jar > insightflow.log 2>&1 &
    • nohup：让服务在后台运行，即使关闭 SSH 连接也不会停止；
    • > insightflow.log 2>&1：将日志输出到insightflow.log文件；
    • &：让命令在后台运行。

  2. 查看服务日志：

    bash

    运行

    复制代码 
    tail -f insightflow.log

    如果看到Started InsightFlowApplication in X.XXX seconds，说明服务启动成功。

  3. 验证 8080 端口是否开放 ：用curl命令本地测试：

    bash

    运行

    复制代码 
    curl http://localhost:8080

    如果返回index.html的内容，说明后端服务正常。

3.4.2 验证云服务器安全组

阿里云 ECS 默认会屏蔽外部端口访问，需要在阿里云控制台的 "安全组" 配置中开放 80、8080、5000 端口：

  1. 登录阿里云控制台，进入 "云服务器 ECS" → "实例" → 找到你的实例 → 点击 "安全组" → "配置规则"；
  2. 添加入方向规则：
    • 端口范围：80/80，授权对象：0.0.0.0/0（允许所有 IP 访问 80 端口）；
    • 端口范围：8080/8080，授权对象：0.0.0.0/0；
    • 端口范围：5000/5000，授权对象：0.0.0.0/0。

四、技术细节与关键点

4.1 Spring Boot 控制器类型的区别

这是我踩的第一个大坑，必须深入理解：

  • @RestController：

    • 用途：构建 RESTful API，返回 JSON 或纯文本；
    • 原理：所有方法默认添加@ResponseBody注解，返回值直接序列化后写入响应体；
    • 场景：后端接口开发，如/api/user返回用户信息 JSON。

  • @Controller：

    • 用途：构建 Web 应用，返回 HTML 页面或视图；
    • 原理：方法返回值被视图解析器解析为视图名称，找到对应的模板文件渲染后返回；
    • 场景：前端页面渲染，如访问/返回监控大屏。

新手记忆技巧：

  • 要返回 "页面" 用@Controller；
  • 要返回 "数据" 用@RestController。

4.2 WebSocket 连接路径的重要性

WebSocket 是实时监控的核心，路径配置错误会导致前端无法建立连接，数据显示为--（就像用户提供的文档中 8080 端口的情况）。

WebSocket 工作原理（简单版）：

  1. 前端通过new WebSocket(url)向后端发送 HTTP 请求，请求头中包含Upgrade: websocket和Connection: upgrade；
  2. 后端收到请求后，同意升级协议，返回101 Switching Protocols响应；
  3. 此时 HTTP 连接升级为 WebSocket 连接，双方可以实时双向传输数据。

常见 WebSocket 配置错误：

  • 前端路径与后端@ServerEndpoint路径不匹配；
  • Nginx 没有配置 WebSocket 协议升级，导致连接被中断；
  • 后端context-path设置了前缀，但前端路径没有加。

4.3 Nginx 的 root 和 alias 的区别

这是 Nginx 配置中另一个新手容易混淆的点：

  • root ：将请求路径追加到root指定的目录后面；示例：

    nginx

    复制代码 
    location /blog/ {
    root /var/www;
}

    访问http://IP/blog/index.html时，Nginx 会找/var/www/blog/index.html。

  • alias ：将请求路径替换为alias指定的目录；示例：

    nginx

    复制代码 
    location /blog/ {
    alias /var/www/blog/;
}

    访问http://IP/blog/index.html时，Nginx 会找/var/www/blog/index.html（注意alias末尾的斜杠不能少）。

新手记忆技巧：

  • root是 "追加"，alias是 "替换"；
  • 如果location路径和目录名一致，用root；否则用alias。

4.4 Nginx proxy_pass 末尾斜杠的问题

proxy_pass末尾的斜杠会影响请求路径的转发，必须注意：

  • proxy_pass 末尾有斜杠：

    nginx

    复制代码 
    location /insightflow/ {
    proxy_pass http://localhost:8080/;
}

    访问http://IP/insightflow/api/data时，会转发到http://localhost:8080/api/data（去掉了/insightflow前缀）。

  • proxy_pass 末尾没有斜杠：

    nginx

    复制代码 
    location /insightflow/ {
    proxy_pass http://localhost:8080;
}

    访问http://IP/insightflow/api/data时，会转发到http://localhost:8080/insightflow/api/data（保留了/insightflow前缀）。

五、成果与验证

完成所有配置后，我对三个服务进行了验证，结果如下（结合用户提供的文档内容）：

5.1 服务状态展示

表格

服务名称 端口 访问 URL 状态
个人博客 80 http://47.xxx.xxx.xxx/ ✅ 正常运行
InsightFlow 监控大屏 8080 http://47.xxx.xxx.xxx:8080 ⚠️ 界面显示正常，数据待优化
Agent 小助手 5000 http://47.xxx.xxx.xxx:5000/ ✅ 正常运行

5.2 功能验证详情

（1）个人博客（80 端口）
  • 访问http://47.xxx.xxx.xxx/，能看到完整的博客主页；
  • 点击 "InsightFlow 实时监控大屏" 链接，能正确跳转到http://47.xxx.xxx.xxx:8080；
  • 博客静态资源（CSS、JS、图片）加载正常，没有 404 错误。
（2）InsightFlow 监控大屏（8080 端口）
  • 访问http://47.xxx.xxx.xxx:8080，能看到完整的监控大屏界面（不再是纯文本）；
  • 但根据用户提供的文档，8080 端口的 "采集时间""CPU 使用率" 等数据显示为--，说明 WebSocket 连接可能存在问题；
  • 问题排查思路 ：
    1. 查看后端日志，确认 WebSocket 端点/ws/monitor是否正常注册；
    2. 打开浏览器开发者工具（F12），查看 "Network" 标签页中的 WebSocket 连接状态；
    3. 检查 Nginx 的 WebSocket 配置，确认Upgrade和Connection头是否正确传递；
    4. 确认云服务器安全组是否开放了 WebSocket 连接（其实 WebSocket 是基于 HTTP 升级的，开放 8080 端口即可）。
（3）Agent 小助手（5000 端口）
  • 访问http://47.xxx.xxx.xxx:5000/，能看到 "Detachym 的小助手" 界面；
  • 显示 "状态：就绪 | 模型: qwen2:0.5b"，服务正常运行。

六、总结与反思

6.1 解决的问题

通过本次优化，我成功解决了以下问题：

  1. ✅ 服务端口配置混乱（统一为 8080）；
  2. ✅ 前端界面只显示文本（修改 Controller 注解为@Controller）；
  3. ✅ 博客链接指向错误（改为公网 URL）；
  4. ✅ Nginx 配置冲突（重构配置文件，移除重复内容）；
  5. ✅ Nginx 权限不足（调整文件权限，处理 SELinux）。

6.2 技术收获

作为一名后端开发新手，本次部署让我收获颇丰：

  1. 深入理解了 Spring Boot 控制器类型的区别 ：不再混淆@Controller和@RestController；
  2. 掌握了 Nginx 反向代理的基本配置：学会了配置静态资源、代理 HTTP 请求、处理 WebSocket 连接；
  3. 了解了 Linux 文件权限和 SELinux 的处理：不再对 403 Forbidden 错误束手无策；
  4. 体会到了配置文件规范的重要性：混乱的配置文件会导致无数问题，清晰的配置才能提高效率。

6.3 后续建议

为了让服务更稳定、更安全，我计划后续做以下优化：

  1. 定期检查服务状态：写一个脚本，定期检查 InsightFlow、Nginx、Agent 服务是否运行，异常时自动重启；
  2. 使用 HTTPS 加密连接：申请免费的 Let's Encrypt SSL 证书，将 HTTP 升级为 HTTPS，提高数据传输安全性；
  3. 监控系统资源使用情况：除了 InsightFlow 本身，再部署一个更全面的监控工具（如 Prometheus + Grafana），监控服务器的 CPU、内存、磁盘、网络等资源；
  4. 定期备份配置文件：将 Nginx 配置、Spring Boot 配置、博客源码等推送到 GitHub 仓库，防止配置丢失；
  5. 优化 WebSocket 连接 ：排查 8080 端口数据显示为--的问题，确保实时数据推送正常。

七、参考资料

  1. Spring Boot 官方文档 ：Controller Advice
  2. Nginx 官方文档 ：反向代理配置
  3. WebSocket 协议规范 ：RFC 6455
  4. AlmaLinux 权限管理 ：SELinux 用户指南
  5. Hugo 静态站点生成器 ：Hugo 官方文档

结语

从 "问题频发" 到 "服务稳定运行"，整个过程花了我两天时间，但收获的知识远超过解决问题本身。作为一名后端开发新手，我深刻体会到 "实践出真知" 的道理 ------ 只有亲手踩过坑，才能真正理解技术的细节。

希望本文能对和我一样的新手有所帮助，如果你在部署过程中遇到了其他问题，欢迎在评论区留言交流！

相关推荐
rainchestnut1 小时前
Spring AI 初步集成(1)-初始化
spring boot
y = xⁿ1 小时前
【LeetCodehot100】T23:合并k个升序链表
java·数据结构·链表
流水武qin2 小时前
SpringAI多模态的基本使用
java·spring boot·spring·ai
小飞Coding2 小时前
Spring 容器生命周期：10大核心扩展接口+实战代码
spring boot
共享家95272 小时前
Java入门（多态）
java·开发语言
毕设源码-赖学姐2 小时前
【开题答辩全过程】以 基于Java的婚礼策划平台的设计与实现为例，包含答辩的问题和答案
java·开发语言
吾诺2 小时前
Spring Boot--@PathVariable、@RequestParam、@RequestBody
java·spring boot·后端
jiankeljx2 小时前
Spring Boot实现多数据源连接和切换
spring boot·后端·oracle
luanma1509803 小时前
Spring 框架——@Retryable 注解与 @Recover 注解
java·前端·spring
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04UV安装并设置国内源05OpenClaw Control UI安全上下文访问配置06本地部署 OpenClaw + DeepSeek-R1 完全指南07Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services08小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）09OpenClaw macOS 完整安装与本地模型配置教程（实战版）10AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南