在AWS EC2上为React(Vite)应用配置环境变量的方法

方案1：构建时从SSM参数注入环境变量（直接解决前端变量问题） #

Vite会在构建阶段将以VITE_开头的环境变量注入到生产代码中，关键是让构建命令能读取到从SSM获取的密钥：

• 直接在EC2实例上执行以下命令，一次性完成参数获取、环境变量设置和生产构建：

  # 从SSM获取解密后的密钥，导出为环境变量后执行构建
  export VITE_OPENWEATHER_API_KEY=$(aws ssm get-parameter --name YOUR_PARAMETER_NAME --with-decryption --query Parameter.Value --output text) && npm run build
  

• 构建完成后，将dist目录下的所有文件复制到Nginx的静态文件目录（通常是/usr/share/nginx/html）：

  sudo cp -r dist/* /usr/share/nginx/html/
  

• 重启Nginx使变更生效：

  sudo systemctl restart nginx
  

之前单独执行export后构建无效的原因：单独导出的环境变量仅在当前Shell会话有效，若新开终端或切换用户执行构建，变量会丢失。将导出命令与构建命令放在同一行，能确保构建过程读取到变量。

方案2：使用后端代理隐藏API密钥（更安全的方案） #

前端代码中的API密钥会被用户通过浏览器开发者工具看到，若你的OpenWeather密钥需要保护，建议用后端代理：

1. 在EC2实例上搭建一个简单的Node.js服务：

   // proxy-server.js
   const express = require('express');
   const axios = require('axios');
   const { SSMClient, GetParameterCommand } = require('@aws-sdk/client-ssm');
   
   const app = express();
   const port = 3001;
   const region = 'YOUR_AWS_REGION'; // 替换为你的AWS区域，如us-east-1
   
   // 从SSM获取API密钥
   const getApiKey = async () => {
     const client = new SSMClient({ region });
     const command = new GetParameterCommand({
       Name: 'YOUR_PARAMETER_NAME',
       WithDecryption: true
     });
     const response = await client.send(command);
     return response.Parameter.Value;
   };
   
   // 代理天气API请求
   app.get('/api/weather', async (req, res) => {
     const apiKey = await getApiKey();
     const { q } = req.query;
     try {
       const weatherResponse = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${q}&appid=${apiKey}`);
       res.json(weatherResponse.data);
     } catch (error) {
       res.status(error.response?.status || 500).json(error.response?.data || { message: '请求失败' });
     }
   });
   
   app.listen(port, () => {
     console.log(`Proxy server running on port ${port}`);
   });
   

2. 安装依赖并启动服务（用PM2管理后台运行）：

   npm install express axios @aws-sdk/client-ssm pm2 -g
   pm2 start proxy-server.js --name weather-proxy
   pm2 startup # 设置开机自启
   

3. 配置Nginx，将前端的API请求转发到这个代理服务：
   修改Nginx配置文件（通常是/etc/nginx/nginx.conf或/etc/nginx/sites-available/default），添加反向代理规则：

   server {
     listen 80;
     root /usr/share/nginx/html;
     index index.html;
   
     # 代理前端的API请求到Node服务
     location /api/ {
       proxy_pass http://localhost:3001/;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
     }
   
     # 处理React路由的刷新问题
     location / {
       try_files $uri $uri/ /index.html;
     }
   }
   

4. 修改前端代码，将API请求地址改为/api/weather，无需再在前端配置API密钥：

   // 前端请求示例
   const fetchWeather = async (city) => {
     const response = await fetch(`/api/weather?q=${city}`);
     return response.json();
   };
   

5. 重启Nginx：

   sudo systemctl restart nginx
   

方案3：将环境变量写入构建脚本 #

如果需要频繁构建，可以创建一个Shell脚本（比如build.sh），自动完成参数获取和构建：

#!/bin/bash
# 获取SSM参数并导出为环境变量
export VITE_OPENWEATHER_API_KEY=$(aws ssm get-parameter --name YOUR_PARAMETER_NAME --with-decryption --query Parameter.Value --output text)
# 执行构建
npm run build
# 复制到Nginx目录
sudo cp -r dist/* /usr/share/nginx/html/
# 重启Nginx
sudo systemctl restart nginx

给脚本添加执行权限：

chmod +x build.sh

之后只需运行./build.sh即可完成构建部署。

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