如何将React项目接入本地Supabase环境？同步生产库数据问题

一、React本地Supabase接入配置验证 #

你的配置思路没问题，根据环境切换API地址和密钥是合理的实践，补充几个关键注意点确保连接正常：

• 确认本地环境变量文件（.env.development）已正确配置：

  REACT_APP_SUPABASE_LOCAL_URL=http://localhost:54321
  REACT_APP_SUPABASE_ANON_KEY_LOCAL=<你的本地Supabase匿名密钥>
  

  本地匿名密钥可通过supabase status命令查看，或在本地Supabase Studio（默认地址http://localhost:54323）的「设置」页获取。
• 确保本地Supabase服务处于运行状态：执行supabase start启动服务，supabase status检查各组件（API、数据库等）状态是否正常。
• 可在React组件中添加简单测试代码验证连接：

  import { supabase } from './client';
  
  async function checkConnection() {
    try {
      const { data, error } = await supabase.auth.getSession();
      if (error) throw error;
      console.log('本地Supabase连接正常:', data);
    } catch (err) {
      console.error('连接失败:', err);
    }
  }
  

二、同步生产数据库数据到本地的解决办法 #

以下几种方法可实现生产数据到本地的同步：

方法1：使用Supabase CLI（推荐） #

1. 登录Supabase生产账号：

   supabase login
   

2. 导出生产数据库的仅数据（不含表结构）：

   supabase db dump --db-url <生产数据库连接字符串> --data-only -f production_data.sql
   

   生产连接字符串可在Supabase控制台「数据库」→「连接字符串」中获取，选择postgres://开头的完整地址。
3. 将导出的数据导入本地数据库：

   supabase db restore --data-only production_data.sql
   

   CLI会自动识别本地数据库的默认连接信息，无需额外配置。

方法2：使用PostgreSQL原生工具 #

若熟悉PostgreSQL命令行，可直接用pg_dump和pg_restore：

1. 导出生产数据：

   pg_dump -d <生产数据库连接字符串> -a -f production_data.sql
   

   -a参数指定仅导出数据，不包含表结构。
2. 导入本地数据库：

   pg_restore -d postgres://postgres:postgres@localhost:54322/postgres -a production_data.sql
   

   本地Supabase数据库默认端口为54322，用户名和密码均为postgres。

方法3：UI界面手动导出导入 #

若偏好可视化操作，可通过Supabase Studio完成：

• 在生产Supabase Studio中，进入目标表，点击「导出」按钮，选择CSV或JSON格式导出数据。
• 在本地Supabase Studio中，进入对应表，点击「导入」按钮，上传导出文件完成数据同步。

注意事项 #

• 同步前建议暂停本地自动迁移（若已配置），避免结构冲突。
• 若存在外键约束，需按表的依赖顺序导入，或临时禁用外键约束后再执行导入。
• 导入完成后，在本地Studio中查看表数据，验证同步结果是否符合预期。

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