在GitHub Pages上为React前端通过环境变量配置后端URL

架构老林

2026-7-20

解决GitHub Pages前端配置后端URL环境变量的问题

一、在GitHub仓库配置环境变量

打开前端项目仓库，点击顶部「Settings」
左侧菜单选择「Secrets and variables」→「Actions」
点击「New repository variable」（若后端URL为公开地址，用variable即可；需保密则选secret）
变量名按前端框架规则填写：React项目用REACT_APP_BACKEND_URL，Vite项目用VITE_BACKEND_URL，变量值填你的后端部署地址（例如https://your-username.github.io/your-backend-repo/）
点击「Add variable」保存

二、修改部署Workflow注入变量

进入仓库「Actions」标签，找到当前的Pages部署Workflow，点击「Edit workflow」
在构建步骤中添加环境变量注入，以React项目为例：
```
- name: Build
  run: npm run build
  env:
    REACT_APP_BACKEND_URL: ${{ vars.REACT_APP_BACKEND_URL }}
```
Vite项目则替换为VITE_BACKEND_URL: ${{ vars.VITE_BACKEND_URL }}
保存Workflow，触发重新部署

三、前端代码读取环境变量

React项目：直接使用process.env.REACT_APP_BACKEND_URL
Vite项目：使用import.meta.env.VITE_BACKEND_URL

示例登录请求代码：

const login = async (username, password) => {
  const res = await fetch(`${process.env.REACT_APP_BACKEND_URL}/api/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  });
  return res.json();
};