GitHub Actions部署时环境变量没生效怎么办？

IT人文华提问于 2026-03-22 19:06:23 阅读 10

工具

我用 GitHub Actions 自动部署 React 项目到服务器，明明在 secrets 里设置了 REACT_APP_API_URL，但构建后还是 undefined，本地 .env 文件能正常读取。

我在代码里是这么用的：

const apiUrl = process.env.REACT_APP_API_URL;
console.log('API URL:', apiUrl); // 部署后打印 undefined
fetch(<code>${apiUrl}/users</code>)
  .then(res => res.json())
  .then(data => console.log(data));

workflow 文件也加了 env 配置，但就是不生效，是不是哪里漏了？

协作开发自动部署

我来解答赞 2 收藏

反馈

1 条解答

皇甫雯雯 Lv1

问题应该出在 GitHub Actions 的环境变量配置上。虽然你在 secrets 和 workflow 文件里都设置了 REACT_APP_API_URL，但在构建过程中，React 默认不会将环境变量传递给生产构建。你需要手动指定哪些环境变量是公共的，才能在构建时被使用。

解决方法是在你的 workflow 文件中，使用 REACT_APP_ 前缀的环境变量，并且在 build 命令前设置 CI=false 来确保 React 能够读取这些变量。你可以这样修改你的 workflow 文件：

pre class="pure-highlightjs line-numbers">

name: Deploy React App



on:

  push:

    branches:

      - main



jobs:

  deploy:

    runs-on: ubuntu-latest



    steps:

    - name: Checkout code

      uses: actions/checkout@v2



    - name: Set up Node.js

      uses: actions/setup-node@v2

      with:

        node-version: '14'



    - name: Install dependencies

      run: npm install



    - name: Build the project

      env:

        CI: false

        REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}

      run: npm run build



    - name: Upload artifact

      uses: actions/upload-artifact@v2

      with:

        name: build

        path: ./build

注意这里的关键点是设置 CI: false，这样 React 就会读取 REACT_APP_ 开头的环境变量了。希望这能解决问题。

2026-03-22 19:09