AWS Amplify托管React前端作品集网站联系表单后端解决方案咨询

我完全懂你的困扰——折腾了两周还没搞定，肯定有点头大。前端环境变量在Amplify这类静态托管平台上确实容易被打包进前端代码，导致EmailJS的敏感凭证暴露。下面给你几个实际可行的解决方案，你可以根据自己的技术熟悉度和时间成本来选：

方案一：改用专为静态网站设计的表单邮件服务 #

这类服务的核心逻辑是帮你把表单提交的后端逻辑封装好，你只需要在前端调用它们提供的公开端点，不用暴露任何敏感信息。操作流程大概是：

• 在服务后台配置好你的接收邮箱，生成一个专属的表单提交URL
• 前端直接把表单数据通过POST请求发送到这个URL即可
• 服务会自动处理邮件发送，你不用写任何后端代码

优点是零后端开发，5分钟就能搞定，适合快速解决问题；缺点是免费版通常有每月提交次数限制，高流量场景可能需要付费升级。

方案二：用AWS Lambda + SES（和Amplify无缝集成） #

既然你的前端已经托管在Amplify，用AWS自家的服务是最顺手的，而且可控性强。步骤如下：

1. 创建Lambda函数：用Node.js写一个简单的处理函数，接收前端传来的表单数据（姓名、邮箱、消息内容），调用AWS SES发送邮件到你的邮箱。示例代码大概是：

const AWS = require('aws-sdk');
const ses = new AWS.SES({ region: '你的AWS区域' });

exports.handler = async (event) => {
  const { name, email, message } = JSON.parse(event.body);
  
  const params = {
    Destination: { ToAddresses: ['你的接收邮箱'] },
    Message: {
      Body: { Text: { Data: `来自${name}的消息：\n邮箱：${email}\n内容：${message}` } },
      Subject: { Data: '作品集网站联系消息' }
    },
    Source: '你的发件邮箱（需要在SES里验证）'
  };
  
  try {
    await ses.sendEmail(params).promise();
    return { statusCode: 200, body: JSON.stringify({ success: true }) };
  } catch (err) {
    return { statusCode: 500, body: JSON.stringify({ error: err.message }) };
  }
};

2. 配置IAM权限：给这个Lambda函数添加AmazonSESFullAccess权限（或者更精细的权限，只允许发送邮件）
3. 集成到Amplify：在Amplify控制台里用「Functions」功能把Lambda部署好，或者创建一个API网关把Lambda暴露为HTTP端点
4. 前端调用：直接POST请求到这个Lambda的端点，不用暴露任何敏感信息——所有凭证都在AWS后台，前端完全看不到

优点是和现有Amplify环境无缝衔接，没有第三方依赖；缺点是需要熟悉AWS Lambda和SES的基本配置，但都是可视化操作，文档也很全，上手不算难。

方案三：轻量无服务器后端（Vercel/Netlify Functions） #

如果你不想碰AWS的服务，也可以用Vercel或Netlify的无服务器函数，原理和Lambda类似，但配置更简单。比如用Netlify Functions：

• 在项目里创建一个netlify/functions/send-email.js文件，写处理表单请求的逻辑，调用SendGrid或Mailgun这类邮件服务发送邮件
• 部署项目到Netlify，函数会自动被部署并生成端点
• 前端调用这个端点即可

这类方案的优点是配置极简，代码量少；缺点是需要注册对应的平台账号，并且熟悉它们的函数写法，但整体复杂度远低于搭建完整后端。

方案四：检查Amplify环境变量配置（修复EmailJS的使用方式） #

如果你还是想用EmailJS，可以先排查一下环境变量不生效的原因：

• 在Amplify控制台的「Settings > Environment variables」里添加你的EmailJS用户ID，变量名要以REACT_APP_开头（比如REACT_APP_EMAILJS_USER_ID）
• 前端代码里用process.env.REACT_APP_EMAILJS_USER_ID来调用
• 重新构建部署应用

不过要注意：静态网站的环境变量最终会被打包到前端代码中，如果你担心的是EmailJS的私钥暴露，那这个方案还是不行——私钥绝对不能放在前端，必须用后端调用EmailJS的后端SDK来发送邮件。

内容的提问来源于stack exchange，提问作者Din Yair Sadot