企业官网建设流程全解析

如何免费自部署eSIM-Tools：Netlify上线全流程指南，含环境变量与OAuth密钥配置详解

【免费下载链接】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

eSIM-Tools是一款专为已有 Giffgaff 和 Simyo 号码用户设计的免费 eSIM 管理工具集，支持将物理 SIM 卡转换为 eSIM、更换设备和生成激活二维码。本文将带你用 Netlify免费完成 eSIM-Tools 自部署：从仓库克隆、构建配置，到环境变量与 OAuth 密钥的详细设置，全程无需服务器费用，跟随步骤即可上线你自己的 eSIM 管理工具。

项目简介：eSIM-Tools 能做什么？

上线后的站点为两类用户提供完整流程：

• 🔄Giffgaff 用户：物理 SIM 转 eSIM、短信验证码全自动激活、生成 eSIM 二维码
• 📲Simyo 用户：设备更换、获取现有 eSIM、扫码在新设备安装

整个转换流程通常1-2 分钟即可完成，无需联系客服。

项目采用「原生 JavaScript 前端 + Netlify Serverless 后端」的 JAMstack 架构，前端无框架依赖、打包体积小，后端由 Netlify Functions（业务逻辑）与 Edge Functions（BFF 代理）组成，非常适合免费额度自部署。

自部署前的准备工作

部署 eSIM-Tools 只需三样东西：

💡 无需购买服务器、域名（Netlify 会分配免费子域名），也无需数据库。

一键安装步骤：把代码推上 Netlify

第 1 步：克隆仓库

git clone https://gitcode.com/gh_mirrors/es/eSIM-Tools cd eSIM-Tools npm install

第 2 步：连接 Netlify 站点

1. 登录 Netlify 控制台，选择Add new site → Import an existing project
2. 关联你克隆好的 Git 仓库（或先在代码托管平台把仓库 Fork 到自己账号）
3. 构建设置可以直接沿用仓库根目录 netlify.toml 的自动配置：
   • Build command：npm run build --silent
   • Publish directory：dist
   • Functions 目录：netlify/functions
   • Edge Functions 目录：netlify/edge-functions

netlify.toml 中还预置了路由重写规则（/giffgaff、/simyo两个工具页）、Simyo/Giffgaff API 代理、CORS 与安全响应头（CSP、缓存策略等），这些全部自动生效，不需要手动修改。

第 3 步：等待首次部署完成

首次部署约 2-4 分钟（依赖安装 + 静态构建）。构建脚本 scripts/build-static.js 会把静态资源拷贝并用 esbuild 按 browserslist 目标转译到dist/，全程无需任何额外配置。

环境变量配置详解（核心）

eSIM-Tools 的 Serverless 函数依赖一组环境变量，变量清单以 env.example 为模板。在 Netlify 控制台的Site settings → Environment variables中逐项添加：

OAuth 密钥配置的两个常见坑

1. GIFFGAFF_CLIENT_SECRET格式校验：giffgaff-token-exchange.js 会校验密钥必须为合法 Base64 且不少于 32 字符，任一不满足即返回 500 错误。如果密钥是明文，请先做 Base64 编码再填入。
2. GIFFGAFF_REDIRECT_URI只影响服务端：该变量仅用于服务端 token 交换；前端的授权跳转 URI 由 api-config.js 中的oauthConfig.redirectUri独立控制，Netlify 环境变量不会自动改写前端授权 URL。两处默认值保持giffgaff://auth/callback/一致即可。

🔐 安全提示：ACCESS_KEY与GIFFGAFF_CLIENT_SECRET属于敏感信息，只放在 Netlify 环境变量中，不要提交到代码仓库。本地开发可复制 env.example 为.env使用。

部署后如何验证配置成功？

用健康检查接口自检

项目内置了分层健康检查函数 health.js，它会检查 4 个关键环境变量（ACCESS_KEY、ALLOWED_ORIGIN、GIFFGAFF_CLIENT_ID、GIFFGAFF_CLIENT_SECRET）是否齐全。访问：

你的站点域名/.netlify/functions/health

返回结果中missing: 0表示关键变量全部配置完成；若看到缺失数量大于 0，回到环境变量面板补齐后重新部署即可。

冒烟测试两条业务线

• 打开/giffgaff：选择登录方式，走一遍 OAuth + MFA 流程，能拿到会员信息说明 OAuth 密钥配置正确
• 打开/simyo：输入账号登录，能进入下一步说明SIMYO_CLIENT_TOKEN代理链路正常

本地调试：Netlify Dev 完整模拟

修改函数或环境变量后，推荐先用本地模拟环境验证，避免反复触发线上部署：

npm run netlify-dev

该命令会自动执行 prebuild 并通过 Netlify CLI 在localhost:8888完整模拟 Functions 与 Edge Functions（含 BFF 代理 bff-proxy.js 的密钥注入链路）。.env中填写的变量会同步生效。

常见问题排查

更多函数级说明可参考 netlify/functions/CLAUDE.md 与 netlify/edge-functions/CLAUDE.md。

总结

按以上流程操作，你只需几分钟就能免费拥有自己的 eSIM-Tools 实例。若后续要修改代码，本地运行npm run netlify-dev验证后再推送即可自动重新部署。

延伸阅读

• 部署配置总览：netlify.toml
• 环境变量模板：env.example
• 本地部署脚本：scripts/deploy.sh
• Giffgaff 使用教程（图文）：docs/User_Guide.md
• 安全指南：docs/SECURITY.md

【免费下载链接】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