部署后React应用中EmailJS失效，环境变量及用户ID报错排查

我用GitLab和Netlify部署React应用，自认为.gitlab-ci.yml和GitLab环境变量配置没问题，但开发和生产构建都报「用户ID必填」错误。现在开发构建的问题已经修复，但部署后还是出现环境变量未定义的情况，虽然已经在Netlify配置了环境变量，也修改了.gitlab-ci.yml，还是没解决。这是我第一次用这类部署工具。

React组件代码 #

import { useState } from "react";
import emailjs from "emailjs-com";

import './Contact.css';

const Contact = () => {

  const [ status, setStatus ] = useState('Send');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('Sending...')
    const { fromName, email, subject, message } = e.target.elements;
    const templateParams = {
      fromName: fromName.value,
      email: email.value,
      subject: subject.value,
      message: message.value,
    };

  try {
    const response = await emailjs.send(
      process.env.REACT_APP_SERVICE_ID,
      process.env.REACT_APP_YOUR_TEMPLATE_ID,
      templateParams,
      process.env.REACT_APP_YOUR_API_KEY,
    );

    if (response.status === 200) {
      setStatus("Message sent!");
      e.target.reset();
      setTimeout(() => {
        setStatus("Send");
      }, 5000);
    } else {
      setStatus("Failed to send message. Please try again");
    }
  } catch (error) {
    console.error("Error sending message:", error);
    setStatus("Failed to send message. Please try again.");
  }
};

初始.gitlab-ci.yml配置 #

stages:
  - build
  - deploy

build project:
  stage: build
  image : node:16
  script:
    - cd portfolio
    - |
      if [ "$SET_PERMISSIONS" = "true" ]; then
        chmod +x node_modules/.bin/react-scripts
      fi
    - npm install
    - echo "REACT_APP_SERVICE_ID=$REACT_APP_SERVICE_ID" >> .env.production
    - echo "REACT_APP_YOUR_API_KEY=$REACT_APP_YOUR_API_KEY" >> .env.production
    - echo "REACT_APP_YOUR_TEMPLATE_ID=$REACT_APP_YOUR_TEMPLATE_ID" >> .env.production
    - npm run build
  artifacts:
    paths:
      - build/

netlify:
  stage: deploy
  image: node:16
  script:
    - cd portfolio
    - npm install -g netlify-cli
    - netlify deploy --dir=build --prod

修改后的.gitlab-ci.yml配置 #

stages:
  - build
  - deploy

build project:
  stage: build
  image : node:16
  script:
    - cd portfolio
    - |
      if [ "$SET_PERMISSIONS" = "true" ]; then
        chmod +x node_modules/.bin/react-scripts
      fi
    - npm install
    - echo "REACT_APP_SERVICE_ID=$REACT_APP_SERVICE_ID" >> .env
    - echo "REACT_APP_YOUR_API_KEY=$REACT_APP_YOUR_API_KEY" >> .env
    - echo "REACT_APP_YOUR_TEMPLATE_ID=$REACT_APP_YOUR_TEMPLATE_ID" >> .env
    - npm run build
  artifacts:
    paths:
      - build/

netlify:
  stage: deploy
  image: node:16
  script:
    - cd portfolio
    - npm install -g netlify-cli
    - |
      NETLIFY_AUTH_TOKEN=$NETLIFY_AUTH_TOKEN \
      NETLIFY_SITE_ID=$NETLIFY_SITE_ID \
      REACT_APP_SERVICE_ID=$REACT_APP_SERVICE_ID \
      REACT_APP_YOUR_API_KEY=$REACT_APP_YOUR_API_KEY \
      REACT_APP_YOUR_TEMPLATE_ID=$REACT_APP_YOUR_TEMPLATE_ID \
      netlify deploy --dir=build --prod

问题排查与解决建议 #

1. 确认GitLab环境变量的可用性 #

• 在GitLab CI的build project阶段添加echo $REACT_APP_SERVICE_ID命令，查看构建日志确认变量值是否存在。如果输出为空，检查GitLab项目「设置→CI/CD→变量」配置：确保变量未勾选"保护"（非受保护分支需关闭），且勾选"在流水线中可用"。

2. 修正React环境变量的构建逻辑 #

React的REACT_APP_*变量仅在构建阶段注入，部署阶段传递变量无效：

• 初始配置写入.env.production是正确的，因为npm run build默认读取该文件。可在构建脚本中添加cat .env.production，确认文件生成路径和内容是否正确。
• 修改后的配置写入.env会导致构建失败，因为npm run build优先读取.env.production，.env中的变量不会被加载。

3. 统一变量注入方式避免冲突 #

如果已在Netlify后台配置REACT_APP_*变量，同时GitLab构建也注入变量，会出现冲突。二选一即可：

• 方案一：GitLab构建时注入变量并生成.env.production，直接部署构建产物，Netlify后台无需再配置这些变量。
• 方案二：取消GitLab的构建阶段，让Netlify直接拉取GitLab代码并构建，变量统一在Netlify后台配置。

4. 检查构建脚本的路径正确性 #

在build project阶段添加pwd和ls命令，确认cd portfolio后处于React项目根目录（存在package.json），避免.env.production生成到错误路径导致构建时无法读取。

5. 验证构建产物中的变量 #

下载GitLab生成的build artifact，解压后在静态JS文件中搜索环境变量对应的实际值。如果未找到，说明构建时变量未正确注入，需回到构建阶段排查。

内容的提问来源于stack exchange，提问作者Paul Baumajam Baumann