如何将原生JS天气应用迁移至Node.js以使用环境变量隐藏API密钥

你当前编写的Express基础服务逻辑已经具备雏形，核心实现思路是所有第三方天气API的请求全部由Node后端代理转发，API密钥仅存于服务端环境变量中，完全不向浏览器端暴露，按以下步骤落地即可：

1. 规整项目结构，替换硬编码绝对路径 #

你当前代码中写死了本地电脑的绝对路径，迁移部署到其他环境会直接报错，先调整为通用的标准项目结构：

weather-app/
├── .env                # 存储环境变量（API密钥等敏感信息）
├── .gitignore
├── server.js           # 存放你当前编写的Express服务代码
└── public/             # 所有前端静态资源（原原生JS项目的HTML/JS/CSS文件）全部放这个目录
    ├── app.html
    ├── app.js
    └── style.css

修改现有server.js代码，用Node内置path模块拼接相对路径，移除硬编码的绝对路径：

const express = require("express");
const path = require("path");
const app = express();
require("dotenv").config();

const PORT = process.env.PORT || 3000;
const PUBLIC_PATH = path.join(__dirname, "public");

// 托管public目录下所有静态资源
app.use(express.static(PUBLIC_PATH));
// 首页路由
app.get("/", (req, res) => {
    res.sendFile(path.join(PUBLIC_PATH, "app.html"));
});

app.listen(PORT, () => {
    console.log(`服务已启动，访问地址 http://localhost:${PORT}`);
});

2. 配置环境变量与忽略规则 #

在项目根目录新建.env文件，写入天气API密钥等敏感配置：

WEATHER_API_KEY=填入你自己的天气服务API密钥
PORT=3000

在项目根目录新建.gitignore文件，排除敏感文件和依赖目录，避免密钥被提交到公共代码仓库：

node_modules
.env
.DS_Store

注意：dotenv加载的环境变量仅在Node服务运行时可读取，只要不主动通过接口返回给前端，浏览器端完全无法获取这些值，从根源避免密钥泄露。

3. 新增后端代理接口转发天气请求 #

废弃原前端直接携带密钥请求第三方天气API的逻辑，改为在Express服务中新增专用接口，由后端携带密钥请求天气服务后将结果返回给前端：

// Node 18及以上版本原生自带fetch，低版本需额外安装node-fetch@2依赖
app.get("/api/weather", async (req, res) => {
    try {
        // 接收前端传的查询参数（城市名、经纬度等，根据你用的天气API要求调整）
        const { city, lat, lon } = req.query;
        // 拼接第三方天气API请求地址，密钥从环境变量读取，不会暴露给前端
        const targetApiUrl = `https://你使用的天气服务API请求地址?key=${process.env.WEATHER_API_KEY}&city=${city}&lat=${lat}&lon=${lon}`;
        
        const apiResp = await fetch(targetApiUrl);
        const weatherData = await apiResp.json();
        res.json(weatherData);
    } catch (error) {
        res.status(500).json({ code: 500, msg: "天气信息获取失败" });
    }
});

4. 修改前端请求逻辑 #

原原生JS代码中直接请求第三方API的部分，改为请求自己搭建的后端代理接口，不需要携带密钥：

// 旧逻辑（密钥暴露在前端，废弃）
// fetch("https://第三方天气API地址?key=明文密钥&city=北京")

// 新逻辑
async function fetchWeather(cityName) {
    const resp = await fetch(`/api/weather?city=${encodeURIComponent(cityName)}`);
    const data = await resp.json();
    // 后续天气数据渲染逻辑和原原生JS逻辑完全一致，不需要改动
    renderWeatherData(data);
}

落地注意事项 #

• Node版本低于18时，执行npm install node-fetch@2安装fetch依赖即可正常使用
• 本地开发可执行npm install nodemon -D安装热重载工具，启动命令改为nodemon server.js，修改服务端代码后会自动重启，不用手动操作
• 部署上线时不需要上传.env文件，在部署平台的环境变量配置项中添加WEATHER_API_KEY对应的值即可，代码会自动读取
• 禁止在任何前端JS代码中调用process.env读取变量，也不要编写接口主动将环境变量值返回给前端，否则会失去隐藏密钥的作用

内容的提问来源于stack exchange，提问作者Legible_Jibberish