Skip to main content

Source: ocean/docs/SUPABASE_STAGING_SETUP.md | ✏️ Edit on GitHub

Supabase Staging/Production Setup Guide

Overview​

This guide helps you set up separate Supabase projects for staging and production environments.

Current State​

  • Single Supabase project: fldiayolmgphysdwgsuk
  • Used by both environments
  • No data isolation between staging and production

Steps to Set Up Staging​

1. Create New Supabase Project for Staging​

  1. Go to Supabase Dashboard
  2. Click "New Project"
  3. Name it: ocean-staging (or similar)
  4. Choose the same region as production for consistency
  5. Generate a strong database password

2. Export Current Schema​

# Export the current database schema (structure only, no data)
npx supabase db dump --schema public --no-data > supabase/schema.sql

# Export auth schema and settings
npx supabase db dump --schema auth --no-data > supabase/auth-schema.sql

3. Configure Staging Project​

Update your staging environment variables:

# Staging Supabase (new project)
VITE_SUPABASE_URL_STAGING=https://[NEW_STAGING_PROJECT_ID].supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY_STAGING=sb_publishable_[NEW_STAGING_KEY]
SUPABASE_SERVICE_ROLE_KEY_STAGING=sb_secret_[NEW_STAGING_SERVICE_KEY]

# Production Supabase (keep existing)
VITE_SUPABASE_URL_PRODUCTION=https://fldiayolmgphysdwgsuk.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY_PRODUCTION=sb_publishable_6pgbON9h6UDxzPeRX2GPbw_MGrxdtn4
SUPABASE_SERVICE_ROLE_KEY_PRODUCTION=sb_secret_nweq_vsrvBD8QkOk06Vnxg_pkggWlxI

4. Apply Migrations to Staging​

# Set up staging project
npx supabase link --project-ref [NEW_STAGING_PROJECT_ID]

# Apply all migrations
npx supabase db push

5. Update Webhook URLs in Migrations​

Create environment-specific migration:

-- For staging environment
CREATE OR REPLACE FUNCTION public.webhook_sync_user_to_stripe()
RETURNS trigger
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public, extensions, pg_catalog
AS $$
DECLARE
  request_id bigint;
  headers jsonb;
  body jsonb;
  webhook_url text;
BEGIN
  -- Determine webhook URL based on environment
  webhook_url := CASE
    WHEN current_setting('app.environment', true) = 'production' THEN
      'https://ocean.goldfish.io/api/webhooks/stripe'
    ELSE
      'https://staging.ocean.goldfish.io/api/webhooks/stripe'
  END;

  -- Build headers with environment-specific auth
  headers := jsonb_build_object(
    'Content-Type', 'application/json',
    'Authorization', 'Bearer ' || current_setting('app.webhook_secret', true)
  );

  -- Build webhook payload
  body := jsonb_build_object(
    'type', 'INSERT',
    'table', 'users',
    'record', row_to_json(NEW)
  );

  -- Make async HTTP request to Cloudflare Worker
  SELECT extensions.net.http_post(
    url := webhook_url,
    headers := headers,
    body := body,
    timeout_milliseconds := 5000
  ) INTO request_id;

  RETURN NEW;
END;
$$;

6. Update Application Configuration​

// src/lib/supabase.ts
const supabaseUrl =
  import.meta.env.MODE === 'production'
    ? import.meta.env.VITE_SUPABASE_URL_PRODUCTION
    : import.meta.env.VITE_SUPABASE_URL_STAGING

const supabaseAnonKey =
  import.meta.env.MODE === 'production'
    ? import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY_PRODUCTION
    : import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY_STAGING

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

7. Update GitHub Secrets​

Add staging-specific secrets:

gh secret set SUPABASE_URL_STAGING --repo goldfish-inc/ocean
gh secret set SUPABASE_PUBLISHABLE_KEY_STAGING --repo goldfish-inc/ocean
gh secret set SUPABASE_SERVICE_ROLE_KEY_STAGING --repo goldfish-inc/ocean

8. Update Cloudflare Worker​

Update wrangler.toml to use different Supabase projects:

# Staging environment
[env.staging.vars]
SUPABASE_URL = "https://[NEW_STAGING_PROJECT_ID].supabase.co"
ENVIRONMENT = "staging"

# Production environment
[env.production.vars]
SUPABASE_URL = "https://fldiayolmgphysdwgsuk.supabase.co"
ENVIRONMENT = "production"

Migration Checklist​

  • Create new Supabase project for staging
  • Export current schema
  • Apply schema to staging project
  • Update environment variables
  • Update webhook URLs in database functions
  • Update application configuration
  • Update GitHub secrets
  • Update Cloudflare Worker configuration
  • Test staging webhook flow
  • Test production webhook flow

Benefits​

  1. Data Isolation: Test data doesn't mix with production
  2. Safe Testing: Can test migrations and changes without affecting production
  3. Separate Auth: Different user pools for testing
  4. Independent Scaling: Scale staging and production differently
  5. Better Security: Staging compromises don't affect production

Testing​

After setup, test both environments:

# Test staging
curl https://staging.ocean.goldfish.io/api/webhooks/stripe/health

# Test production
curl https://ocean.goldfish.io/api/webhooks/stripe/health