拓冰网站定制 
拆解eSIM-Tools架构原生JavaScriptNetlify Serverless的JAMstack实战方案【免费下载链接】eSIM-Tools专为已有 Giffgaff 和 Simyo 号码的用户设计的现代化 eSIM 管理工具集支持将物理 SIM 卡转换为 eSIM、设备更换和二维码生成。(A modern set of eSIM management tools designed specifically for users who already have Giffgaff and Simyo numbers, offering support for converting physical SIM cards to eSIMs, device replacements, and QR code generation.)项目地址: https://gitcode.com/gh_mirrors/es/eSIM-ToolseSIM-Tools 是一个专为 Giffgaff 和 Simyo 用户打造的 eSIM 管理工具集支持物理 SIM 转 eSIM、设备更换和二维码生成。它没有使用 React/Vue 等框架而是用**原生 JavaScript Netlify ServerlessFunctions Edge Functions**搭建了一套完整的 JAMstack 应用。本文带你从零拆解这套架构看看无框架如何做到功能完整、性能出色。 项目速览一个在线 eSIM 工具集打开项目首页你看到的是三块核心功能入口选择页、Giffgaff eSIM 工具、Simyo eSIM 工具。整个应用无需安装、打开即用首屏加载目标 1.2 秒并支持离线使用PWA Service Worker见 src/sw.js。️ 架构全景五层技术栈先看整体分工这也是理解全文的地图层级技术选型职责前端原生 JavaScript (ES2021)无框架浏览器原生 ES6 模块直接加载后端Netlify Functions (Node.js)11 个 Serverless 函数处理 OAuth/MFA/GraphQL 业务边缘层Edge Functions (Deno)BFF 代理、密钥注入、二维码生成构建静态拷贝 esbuild 转译 PostCSS非 Webpack 的轻量构建链质量Jest 30 质量/安全脚本单测、脱链检查、安全扫描一句话总结前端轻后端薄中间靠 BFF 串联——这正是 JAMstack 的典型形态静态资源走 CDN 边缘动态逻辑交给 Serverless。 前端篇为什么敢不用框架大多数 Web 项目默认框架 现代化而 eSIM-Tools 反其道而行业务页面不经 Webpack 打包由 HTML 里的script typemodule直接import/exportNetlify 静态托管原样派发。好处很直接零打包体积没有框架运行时没有 tree-shaking 的假瘦身天然代码分割每个模块是独立文件浏览器按模块粒度缓存改一个模块不影响其他缓存按需加载模块间用相对路径导入加载链路清晰可查四层模块架构以 Giffgaff 工具为例src/giffgaff/MODULE_ARCHITECTURE.md 有完整图解模块严格分四层依赖方向自下而上基础设施层state-manager.js状态单一数据源 观察者模式、api-config.jsAPI 端点集中配置、utils.jsPKCE 参数、Toast 等工具函数核心服务层oauth-handler.jsOAuth 2.0 PKCE 登录、mfa-handler.js多因素验证码、esim-service.jseSIM 预订/交换/激活全流程UI 控制层ui-controller.js订阅状态变更后更新 DOM应用入口层giffgaff-app.js 作为外观Facade初始化模块、绑定事件、协调流程这套设计用单例 观察者模式替代了框架的响应式系统状态一变订阅回调自动刷新界面学习成本比 Redux 低得多。通用能力日志、i18n、安全存储、通知则抽到 src/js/modules/ 供两条业务线复用。⚡ 后端篇Netlify Serverless 三层结构后端没有传统服务器全部逻辑由 Netlify 提供分三种形态第 1 层Netlify FunctionsNode.js——业务逻辑netlify/functions/ 下有 11 个函数每个对应一个业务动作giffgaff-token-exchangeOAuth 授权码换 Tokenclient_secret只存在于服务端giffgaff-graphqlGraphQL 代理401 时自动刷新 Tokengiffgaff-mfa-challenge/giffgaff-mfa-validation验证码发送与校验giffgaff-sms-activate短信验证码激活的端到端流程verify-cookie、auto-activate-esim、health、public-config、notifications等关键设计是统一中间件所有函数都用withAuth包装middleware.js一次性解决四件事——exports.handler withAuth(async (event, context, { auth, body }) { // auth: 鉴权结果body: 已解析的请求体 // Origin 校验 / 密钥校验 / CORS / 错误格式 / Sentry 上报全部自动处理 }, { validateSchema: mySchema, requireAuth: true });新增函数时只需关心业务本身鉴权、CORS、输入 Schema 验证、错误格式都是标配。第 2 层Edge FunctionsDeno——BFF 代理bff-proxy.js 是全局的 Backend-For-Frontend 层拦截所有/bff/*请求路由配置见 netlify.toml 的[[edge_functions]]做三件事密钥注入前端永远不接触ACCESS_KEYEdge 层在服务端读取环境变量并注入x-esim-key请求头后转发白名单转发只允许转发到显式声明的函数名 HTTP 方法未知目标直接 404边缘本地计算二维码生成qrcode-generate直接在 Edge 节点用纯 CPU 运算完成 10ms完全绕开 Function 冷启动——这是把快做到极致的一个典型取舍第 3 层静态 Rewrite——最便宜的 API 代理还有一类请求根本不经过 Serverlessnetlify.toml 用[[redirects]]把/api/simyo/*、/api/giffgaff/*直接 302 到官方 API并在响应头中补上浏览器无法设置的User-Agent、X-Client-Token一举解决 CORS 与伪装请求两个问题。同时配置了静态资源CSS/JS/图片max-age31536000, immutable一年强缓存HTML 短缓存 stale-while-revalidate平衡新鲜度与性能全站 CSP、X-Frame-Options等安全头完整策略见 docs/SECURITY.md经验法则能用静态规则解决的不要用 Function能用 Edge 解决的不要用 Node Function——冷启动和成本都更低。 一次请求的完整旅程以短信验证码激活 eSIM为例请求流经三层浏览器 (esim-service.js) │ fetch(/bff/giffgaff-sms-activate) ▼ Edge Function bff-proxy (Deno) │ 校验 Origin → 注入 x-esim-key → 白名单匹配 ▼ Netlify Function (Node.js) │ withAuth 中间件鉴权 Schema 验证 ▼ Giffgaff 官方 APIGraphQL / MFA / eSIM 端点 │ 响应沿原路返回Edge 层补充 CORS 头 ▼ 浏览器 → state-manager 更新 → ui-controller 刷新界面前端全程只认/bff/*这一个入口三层各自的职责来源校验、密钥管理、业务编排互不泄漏。️ 构建与质量保障小而完整的工程化构建npm run build只做静态拷贝 esbuild 按 browserslist 转译到dist/配合 transpile-dist-js.js没有 Webpack 配置维护成本测试Jest 30 jsdom覆盖率阈值 60%测试按业务线分目录tests/涵盖模块逻辑与 BFF 安全行为质量门禁quality-check.js含生产 HTML 脱链检查、security-check.js安全配置扫描部署前必须通过本地开发server.js 用 Express 模拟 Netlify 行为把 Function 包装成 Express 路由 helmet 安全头npm run dev即可在 localhost:3000 完整联调 给新手的 5 条可迁移经验框架不是必需品模块边界清晰、状态管理简单的项目原生 ES6 模块 观察者模式足够BFF 是前后端解耦的关键密钥留在服务端前端只面对/bff/*安全模型一下子就清晰了Serverless 要分档位Edge毫秒级、无冷启动→ Function复杂业务→ 静态 Rewrite零成本按请求特征选层统一中间件 复制粘贴鉴权/CORS/验证/错误处理集中在withAuth新函数零样板配置即架构一个 netlify.toml 同时定义了路由、代理、缓存、安全头——JAMstack 的服务端很多时候就是一份声明式配置这套架构用最小的依赖换来了最快的加载与最低的维护成本对中小规模 Web 项目而言是一份值得直接借鉴的 JAMstack 实战样本。【免费下载链接】eSIM-Tools专为已有 Giffgaff 和 Simyo 号码的用户设计的现代化 eSIM 管理工具集支持将物理 SIM 卡转换为 eSIM、设备更换和二维码生成。(A modern set of eSIM management tools designed specifically for users who already have Giffgaff and Simyo numbers, offering support for converting physical SIM cards to eSIMs, device replacements, and QR code generation.)项目地址: https://gitcode.com/gh_mirrors/es/eSIM-Tools创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 拆解eSIM-Tools架构：原生JavaScript+Netlify Serverless的JAMstack实战方案
拆解eSIM-Tools架构原生JavaScriptNetlify Serverless的JAMstack实战方案【免费下载链接】eSIM-Tools专为已有 Giffgaff 和 Simyo 号码的用户设计的现代化 eSIM 管理工具集支持将物理 SIM 卡转换为 eSIM、设备更换和二维码生成。(A modern set of eSIM management tools designed specifically for users who already have Giffgaff and Simyo numbers, offering support for converting physical SIM cards to eSIMs, device replacements, and QR code generation.)项目地址: https://gitcode.com/gh_mirrors/es/eSIM-ToolseSIM-Tools 是一个专为 Giffgaff 和 Simyo 用户打造的 eSIM 管理工具集支持物理 SIM 转 eSIM、设备更换和二维码生成。它没有使用 React/Vue 等框架而是用**原生 JavaScript Netlify ServerlessFunctions Edge Functions**搭建了一套完整的 JAMstack 应用。本文带你从零拆解这套架构看看无框架如何做到功能完整、性能出色。 项目速览一个在线 eSIM 工具集打开项目首页你看到的是三块核心功能入口选择页、Giffgaff eSIM 工具、Simyo eSIM 工具。整个应用无需安装、打开即用首屏加载目标 1.2 秒并支持离线使用PWA Service Worker见 src/sw.js。️ 架构全景五层技术栈先看整体分工这也是理解全文的地图层级技术选型职责前端原生 JavaScript (ES2021)无框架浏览器原生 ES6 模块直接加载后端Netlify Functions (Node.js)11 个 Serverless 函数处理 OAuth/MFA/GraphQL 业务边缘层Edge Functions (Deno)BFF 代理、密钥注入、二维码生成构建静态拷贝 esbuild 转译 PostCSS非 Webpack 的轻量构建链质量Jest 30 质量/安全脚本单测、脱链检查、安全扫描一句话总结前端轻后端薄中间靠 BFF 串联——这正是 JAMstack 的典型形态静态资源走 CDN 边缘动态逻辑交给 Serverless。 前端篇为什么敢不用框架大多数 Web 项目默认框架 现代化而 eSIM-Tools 反其道而行业务页面不经 Webpack 打包由 HTML 里的script typemodule直接import/exportNetlify 静态托管原样派发。好处很直接零打包体积没有框架运行时没有 tree-shaking 的假瘦身天然代码分割每个模块是独立文件浏览器按模块粒度缓存改一个模块不影响其他缓存按需加载模块间用相对路径导入加载链路清晰可查四层模块架构以 Giffgaff 工具为例src/giffgaff/MODULE_ARCHITECTURE.md 有完整图解模块严格分四层依赖方向自下而上基础设施层state-manager.js状态单一数据源 观察者模式、api-config.jsAPI 端点集中配置、utils.jsPKCE 参数、Toast 等工具函数核心服务层oauth-handler.jsOAuth 2.0 PKCE 登录、mfa-handler.js多因素验证码、esim-service.jseSIM 预订/交换/激活全流程UI 控制层ui-controller.js订阅状态变更后更新 DOM应用入口层giffgaff-app.js 作为外观Facade初始化模块、绑定事件、协调流程这套设计用单例 观察者模式替代了框架的响应式系统状态一变订阅回调自动刷新界面学习成本比 Redux 低得多。通用能力日志、i18n、安全存储、通知则抽到 src/js/modules/ 供两条业务线复用。⚡ 后端篇Netlify Serverless 三层结构后端没有传统服务器全部逻辑由 Netlify 提供分三种形态第 1 层Netlify FunctionsNode.js——业务逻辑netlify/functions/ 下有 11 个函数每个对应一个业务动作giffgaff-token-exchangeOAuth 授权码换 Tokenclient_secret只存在于服务端giffgaff-graphqlGraphQL 代理401 时自动刷新 Tokengiffgaff-mfa-challenge/giffgaff-mfa-validation验证码发送与校验giffgaff-sms-activate短信验证码激活的端到端流程verify-cookie、auto-activate-esim、health、public-config、notifications等关键设计是统一中间件所有函数都用withAuth包装middleware.js一次性解决四件事——exports.handler withAuth(async (event, context, { auth, body }) { // auth: 鉴权结果body: 已解析的请求体 // Origin 校验 / 密钥校验 / CORS / 错误格式 / Sentry 上报全部自动处理 }, { validateSchema: mySchema, requireAuth: true });新增函数时只需关心业务本身鉴权、CORS、输入 Schema 验证、错误格式都是标配。第 2 层Edge FunctionsDeno——BFF 代理bff-proxy.js 是全局的 Backend-For-Frontend 层拦截所有/bff/*请求路由配置见 netlify.toml 的[[edge_functions]]做三件事密钥注入前端永远不接触ACCESS_KEYEdge 层在服务端读取环境变量并注入x-esim-key请求头后转发白名单转发只允许转发到显式声明的函数名 HTTP 方法未知目标直接 404边缘本地计算二维码生成qrcode-generate直接在 Edge 节点用纯 CPU 运算完成 10ms完全绕开 Function 冷启动——这是把快做到极致的一个典型取舍第 3 层静态 Rewrite——最便宜的 API 代理还有一类请求根本不经过 Serverlessnetlify.toml 用[[redirects]]把/api/simyo/*、/api/giffgaff/*直接 302 到官方 API并在响应头中补上浏览器无法设置的User-Agent、X-Client-Token一举解决 CORS 与伪装请求两个问题。同时配置了静态资源CSS/JS/图片max-age31536000, immutable一年强缓存HTML 短缓存 stale-while-revalidate平衡新鲜度与性能全站 CSP、X-Frame-Options等安全头完整策略见 docs/SECURITY.md经验法则能用静态规则解决的不要用 Function能用 Edge 解决的不要用 Node Function——冷启动和成本都更低。 一次请求的完整旅程以短信验证码激活 eSIM为例请求流经三层浏览器 (esim-service.js) │ fetch(/bff/giffgaff-sms-activate) ▼ Edge Function bff-proxy (Deno) │ 校验 Origin → 注入 x-esim-key → 白名单匹配 ▼ Netlify Function (Node.js) │ withAuth 中间件鉴权 Schema 验证 ▼ Giffgaff 官方 APIGraphQL / MFA / eSIM 端点 │ 响应沿原路返回Edge 层补充 CORS 头 ▼ 浏览器 → state-manager 更新 → ui-controller 刷新界面前端全程只认/bff/*这一个入口三层各自的职责来源校验、密钥管理、业务编排互不泄漏。️ 构建与质量保障小而完整的工程化构建npm run build只做静态拷贝 esbuild 按 browserslist 转译到dist/配合 transpile-dist-js.js没有 Webpack 配置维护成本测试Jest 30 jsdom覆盖率阈值 60%测试按业务线分目录tests/涵盖模块逻辑与 BFF 安全行为质量门禁quality-check.js含生产 HTML 脱链检查、security-check.js安全配置扫描部署前必须通过本地开发server.js 用 Express 模拟 Netlify 行为把 Function 包装成 Express 路由 helmet 安全头npm run dev即可在 localhost:3000 完整联调 给新手的 5 条可迁移经验框架不是必需品模块边界清晰、状态管理简单的项目原生 ES6 模块 观察者模式足够BFF 是前后端解耦的关键密钥留在服务端前端只面对/bff/*安全模型一下子就清晰了Serverless 要分档位Edge毫秒级、无冷启动→ Function复杂业务→ 静态 Rewrite零成本按请求特征选层统一中间件 复制粘贴鉴权/CORS/验证/错误处理集中在withAuth新函数零样板配置即架构一个 netlify.toml 同时定义了路由、代理、缓存、安全头——JAMstack 的服务端很多时候就是一份声明式配置这套架构用最小的依赖换来了最快的加载与最低的维护成本对中小规模 Web 项目而言是一份值得直接借鉴的 JAMstack 实战样本。【免费下载链接】eSIM-Tools专为已有 Giffgaff 和 Simyo 号码的用户设计的现代化 eSIM 管理工具集支持将物理 SIM 卡转换为 eSIM、设备更换和二维码生成。(A modern set of eSIM management tools designed specifically for users who already have Giffgaff and Simyo numbers, offering support for converting physical SIM cards to eSIMs, device replacements, and QR code generation.)项目地址: https://gitcode.com/gh_mirrors/es/eSIM-Tools创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考