NodeJS+MongoDB后端与Webpack前端.env配置及敏感数据保护问题

一、NodeJS后端（Heroku部署）环境变量配置 #

本地开发环境配置 #

• 在后端项目根目录创建.env文件，写入MongoDB连接凭据：

  MONGODB_URI=mongodb+srv://<用户名>:<密码>@cluster地址/数据库名?retryWrites=true&w=majority
  

• 将.env加入.gitignore，避免敏感数据提交到仓库：

  echo ".env" >> .gitignore
  

• 安装dotenv依赖加载本地环境变量：

  npm install dotenv --save-dev
  

• 在后端入口文件（如server.js）顶部引入并加载：

  require('dotenv').config();
  

• 代码中通过process.env.MONGODB_URI调用数据库连接地址。

Heroku部署环境配置 #

• 方式一：通过Heroku控制台配置
  1. 登录Heroku，进入你的应用页面
  2. 点击Settings → Config Vars
  3. 添加键值对：MONGODB_URI = 你的完整MongoDB连接字符串
• 方式二：通过Heroku CLI配置

  heroku config:set MONGODB_URI="mongodb+srv://<用户名>:<密码>@cluster地址/数据库名?retryWrites=true&w=majority" -a 你的应用名称
  

• 验证配置：运行heroku config -a 你的应用名称，确认变量已添加。

二、Webpack前端（GitHub Pages部署）环境变量与Google Maps配置 #

1. Google Maps API密钥环境变量配置 #

• 在前端项目根目录创建.env文件，注意Webpack环境变量需以REACT_APP_开头（非React项目可通过dotenv-webpack自定义前缀，建议遵循此规范）：

  REACT_APP_GOOGLE_MAPS_API_KEY=你的Google Maps API密钥
  

• 将.env加入前端项目的.gitignore。
• 安装dotenv-webpack插件，用于打包时注入环境变量：

  npm install dotenv-webpack --save-dev
  

• 修改webpack.config.js，引入并配置插件：

  const Dotenv = require('dotenv-webpack');
  
  module.exports = {
    // 其他Webpack配置项...
    plugins: [
      new Dotenv()
    ]
  };
  

• 前端代码中通过process.env.REACT_APP_GOOGLE_MAPS_API_KEY调用密钥。

2. 解决google is not defined错误 #

该错误源于Google Maps脚本未正确加载或加载时机不匹配，以下两种方案任选其一：

方案一：在HTML中预加载脚本

• 打开前端public/index.html（React项目），添加动态加载的脚本标签：

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_API_KEY%&callback=initMap"></script>
  

• 在组件中定义initMap回调函数，确保脚本加载完成后初始化地图：

  window.initMap = () => {
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    });
  };
  

方案二：组件内动态加载脚本

• 在地图组件中编写动态加载函数，确保google对象可用后再初始化地图：

  const loadGoogleMaps = () => {
    return new Promise((resolve, reject) => {
      if (window.google) {
        resolve(window.google);
        return;
      }
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`;
      script.async = true;
      script.defer = true;
      script.onload = () => resolve(window.google);
      script.onerror = reject;
      document.body.appendChild(script);
    });
  };
  
  // 组件挂载时执行加载逻辑
  useEffect(() => {
    loadGoogleMaps().then((google) => {
      new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    });
  }, []);
  

3. GitHub Pages部署配置 #

• 在前端package.json中添加homepage字段，指定GitHub Pages访问地址：

  "homepage": "https://你的GitHub用户名.github.io/仓库名称/"
  

• 配置部署脚本：

  "scripts": {
    "build": "webpack --mode production",
    "deploy": "gh-pages -d dist" // dist为Webpack输出目录，根据实际修改
  }
  

• 安装gh-pages部署依赖：

  npm install gh-pages --save-dev
  

• 执行部署命令：

  npm run deploy
  

• 注意：GitHub Pages为静态托管，需在构建阶段注入环境变量。可直接在本地.env中配置密钥后执行npm run build，或通过命令行传入：

  REACT_APP_GOOGLE_MAPS_API_KEY=你的密钥 npm run build
  

三、跨域问题处理 #

由于前端在GitHub Pages、后端在Heroku，需配置后端CORS允许前端域名访问：

• 安装cors依赖：

  npm install cors --save
  

• 在后端server.js中配置CORS：

  const cors = require('cors');
  app.use(cors({
    origin: 'https://你的GitHub用户名.github.io/仓库名称/' // 替换为你的前端域名
  }));
  

内容的提问来源于stack exchange，提问作者French At Home