在 Minikube 上部署 Rancher:避坑指南与实战教程
前言在本地环境(如 Minikube)部署 Rancher 时,最常见的两个问题是资源分配不足和证书签发卡死。本文将记录如何通过宿主机 IP(192.168.31.133)和固定 NodePort(30081)成功搭建 Rancher。
一、 环境准备
宿主机 IP: 192.168.31.133
目标访问端口: 30081
1. 启动 Minikube (关键参数)在 Docker 驱动下,Minikube 运行在容器内。为了让宿主机能直接访问 NodePort,必须在启动时通过 --ports 参数建立隧道映射。
123456# 建议先清理旧环境minikube delete# 启动并映射 30081 端口,分配至少 8GB 内存(Rancher 较重,建议给足)minikube start --cpus 4 --memory 8192 --driver=docker --ports=30081:30081
2. 安装 Helm12curl https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 | ...
Next.js + Supabase 实现完美的重置密码工作流(含 React Email 与 Resend SMTP 配置)
前言在现代 Web 开发中,身份验证(Auth)是一个核心环节。Supabase 提供了强大的 Auth 服务,但如何将其完美集成到 Next.js (App Router) 中,并使用 React Email 自定义精美的邮件模板?本文将带你走通整个流程。
1. 核心工作流设计重置密码并非简单的“输入新密码”,为了安全性,它必须遵循 PKCE (Proof Key for Code Exchange) 流程:
Forgot Password: 用户输入邮箱,请求重置。
Magic Link: Supabase 发送一封带有 code 的邮件。
Auth Callback: 用户点击链接,回到应用后端交换 code 获取 Session。
Update Password: 用户进入受保护的修改页面,提交新密码。
2. 环境配置:让 Supabase 认识你的多域名Supabase 的 Site URL 只能设置一个(通常设为生产环境),但你可以通过 Redirect URLs 支持多环境(如 localhost 和 Vercel 预览)。
后台配置清单:
Site URL: htt ...
轻量化 K8s 管理方案:在 k3s 中部署 Skooner 可视化面板
前言管理 Kubernetes 集群不应该以牺牲系统资源为代价。虽然官方 Dashboard 功能强大,但对于小型集群或单节点 k3s 环境来说,它往往显得过于臃肿。如果你正在寻找一个极致轻快、响应迅速的管理界面,Skooner 是一个完美的平衡点。
Skooner(原名 K8dash)是一款开源、超轻量级的实时仪表盘,它在不增加集群负担的前提下,提供了核心的资源观测能力。
为什么选择 Skooner?Skooner 的设计哲学与 k3s 的轻量化理念完美契合:
极低的资源占用:它的内存占用通常不到 50MB,在你的系统监控中几乎可以忽略不计。
实时状态感知:基于 WebSocket 技术,无需手动刷新页面即可实时查看 CPU、内存消耗以及 Pod 状态。
移动端自适应:UI 采用响应式设计,即使在手机或平板浏览器上也能轻松排查集群问题。
部署步骤在本指南中,我们将通过 NodePort (32007) 的方式部署并暴露 Skooner,以便你直接通过物理机 IP 访问。
1. 部署核心组件首先,一键安装 Skooner 的命名空间、服务和部署资源:
12kubectl apply ...
Spring Cloud Gateway 聚合 Swagger UI:实现微服务统一 API 文档入口
🚀 前言在微服务架构中,随着服务数量的增加,每个业务服务(如 auth、workflow)都有自己独立的 Swagger UI 页面。对于开发者和测试人员来说,频繁切换不同的 URL 和端口来查看 API 文档非常低效。
为了解决这个问题,我在我的开源项目 hoteler-cloud 中,利用 Spring Cloud Gateway 和 Springdoc OpenAPI 实现了 Swagger UI 的聚合。现在,只需要访问网关服务(orchestration)的一个地址,即可通过下拉菜单切换所有后端服务的 API 文档。
💡 核心思路
网关层引入 UI 依赖:在网关服务 orchestration 中引入支持 WebFlux 的 Springdoc UI 包。
配置聚合路由:在 application.yml 中配置 springdoc.swagger-ui.urls,手动指定各微服务 OpenAPI 定义文件的路径。
网关转发逻辑:利用网关现有的路由机制,确保能够正确转发对各服务 /v3/api-docs 接口的请求。
🛠️ 具体实现步骤1. 添加依赖在 orchest ...
基于 Microsoft Graph API 与 React Email 构建现代化邮件发送系统
背景在传统的 Node.js 服务端开发中,使用 Nodemailer 配合 SMTP 协议是发送邮件的标准做法。然而,随着安全标准的提升,微软已宣布将在 2026 年彻底停止 Outlook/Microsoft 365 对 SMTP 基础身份验证(Basic Auth)的支持。
为了应对这一变化,我们需要转向 Microsoft Graph API。同时,为了解决邮件模板开发中样式难以调试、兼容性差的痛点,我们可以引入 React Email。本文将介绍如何结合这两者,构建一套符合 Shadcn UI 审美风格且具备高度可靠性的邮件发送系统。
技术栈
React Email: 使用 React 组件编写邮件模板,支持 Tailwind CSS。
Nodemailer: 成熟的 Node.js 邮件发送库。
Microsoft Graph API: 微软提供的现代化 API 接口,用于替代传统 SMTP。
MSAL Node: 微软官方提供的身份验证库。
1. 架构设计系统分为三层:模板层、逻辑层和传输层。
模板层:利用 React Email 定义 UI,确保样式在 ...
React 路由跳转:从 a 标签到编程式导航
React 路由跳转:从 a 标签到编程式导航在 React 应用开发中,正确处理页面跳转是确保应用性能和用户体验的关键。本文将对比传统的 <a> 标签与 React Router 提供的导航方式。
1. 为什么不推荐使用 标签?标准的 <a> 标签通过 href 属性进行跳转时,会触发浏览器的全页刷新。
状态丢失:应用内存中的所有 State(如登录信息、表单输入)都会被重置。
加载冗余:浏览器会重新请求所有资源(JS, CSS),失去了单页应用(SPA)的性能优势。
2. 声明式导航:Link 组件对于普通的导航链接,应当使用 react-router-dom 提供的 <Link> 组件。它通过拦截点击事件并使用 History API 来更新 URL,从而实现无刷新跳转。
1234import { Link } from 'react-router-dom';// 基础用法<Link to="/reset-password">Forgot password?</ ...
Performance Fix for Stripe.js Script Loading
Technical SummaryThis summary details a refactoring effort aimed at preventing the premature loading of the Stripe payment script, a common cause of degraded initial page load performance in applications that integrate third-party libraries.
The ObjectiveThe primary goal was to ensure that the core Stripe JavaScript file (e.g., https://m.stripe.com/6 or https://js.stripe.com/v3/) is only requested and downloaded when a user actually enters a payment-required context, facilitating true lazy loadi ...
Bazel 8 Bzlmod 迁移记录:从 WORKSPACE 到 MODULE.bazel
Bazel 8 Bzlmod 迁移记录:从 WORKSPACE 到 MODULE.bazel本文档记录了项目 hoteler 从 Bazel 旧版 WORKSPACE 机制迁移到 Bazel 8 Bzlmod(Bazel 模块系统)的完整过程,重点记录了在迁移 Java 和 Maven 依赖时遇到的关键问题及其解决方案。
1. 迁移背景与目标
原 Bazel 版本: Bazel 7.x
目标 Bazel 版本: Bazel 8.4.2
目标: 完全移除 WORKSPACE 文件,将所有外部依赖(包括规则集和 Maven Artifacts)迁移到 MODULE.bazel 文件中进行管理。
涉及的关键规则集: rules_java、rules_jvm_external、rules_spring。
2. 原始 WORKSPACE 结构概述项目原先使用传统的 WORKSPACE 文件管理依赖,主要依赖 http_archive 引入规则集,并使用 rules_jvm_external 的 maven_install 函数定义所有 Maven 依赖。
123456789101112131 ...
📝 PostgreSQL 18.x Docker 镜像 PGDATA 路径变更说明
📝 PostgreSQL 18.x Docker 镜像 PGDATA 路径变更说明本文档旨在记录 PostgreSQL 官方 Docker 镜像自版本 18.0 起,其默认数据目录(PGDATA)路径的变化,并指导如何正确配置卷挂载以实现数据持久化。
🚀 核心变更:PGDATA 路径版本化从 PostgreSQL 18.x 开始,官方 Docker 镜像将数据库的数据存储位置 (PGDATA 环境变量) 更改为版本特定的路径。
PostgreSQL PGDATA 路径变更
PostgreSQL 版本
旧版本 PGDATA 默认路径
18.x 版本 PGDATA 默认路径
17.x 及以前
/var/lib/postgresql/data
N/A
18.x 及以后
N/A
/var/lib/postgresql/18/docker
🔍 变更原因采用版本化的 PGDATA 路径有以下重要意义:
便于升级 (pg_upgrade): 允许用户将不同主版本的数据库数据目录(例如 /var/lib/postgresql ...
为 Angular Material 应用添加完美深色模式支持
💡 为 Angular Material 应用添加完美深色模式支持深色模式(Dark Mode)是现代应用不可或缺的功能。它不仅能提升用户在低光环境下的舒适度,还能让应用看起来更专业、更时尚。
如果你正在使用 Angular Material,实现深色模式可以非常优雅和高效。本文将分享我如何通过一个独立的 ThemePickerComponent,结合 Angular Signals 和 系统偏好检测,为我的应用添加深色模式的完整过程。
🛠️ 核心思路概览我的深色模式解决方案基于以下几个关键机制:
CSS 变量与 color-scheme: 利用 Angular Material 基于 CSS 变量的主题机制,并通过在 <html> 标签上切换 color-scheme 属性来控制主题。
Angular Signals: 使用 signal() 存储和管理当前的主题模式 ('light' 或 'dark')。
持久化与偏好: 通过 localStorage 记住用户的选择,同时使用 window.matchMedia 监听用户操作系统的 ...
