ShopCall.ai Deployment Guide

This guide explains how to deploy ShopCall.ai after the migration from Vercel to Supabase Edge Functions with static hosting.

Architecture Overview

New Architecture

Frontend: Static React build (Vite) - Can be hosted on any static hosting provider (Apache, Nginx, Cloudflare Pages, etc.)
Backend: Supabase Edge Functions (Deno runtime)
Database: Supabase PostgreSQL
Authentication: Supabase Auth

Key Changes from Previous Architecture

✅ Replaced Vercel serverless functions with Supabase Edge Functions
✅ Replaced in-memory stores with database tables (pending_signups, oauth_nonces)
✅ Migrated from Nodemailer to Resend API for email sending
✅ Environment variable-based configuration for easy deployment
✅ Static hosting compatible frontend

Prerequisites

Supabase account and project
Web hosting with Apache or Nginx (for static files)
Resend API key for email sending (or alternative email service)
Shopify API credentials (if using Shopify integration)
Node.js and npm installed locally for building

Database Setup

The database migrations have already been applied. The following tables were created:

1. pending_signups

Stores temporary signup data with OTP for email verification (15-minute expiration).

2. oauth_nonces

Stores OAuth state/nonce values for secure OAuth flows (10-minute expiration).

Edge Functions Deployment

Deployed Edge Functions

auth - /functions/v1/auth/*
- /auth/signup - Create new user account with OTP
- /auth/signup/verify - Verify OTP and complete registration
- /auth/signup/resend-otp - Resend OTP email
- /auth/login - Email/password login
- /auth/logout - Sign out
- /auth/check - Validate session token
shopify-oauth - /functions/v1/shopify-oauth/*
- /shopify-oauth/init - Initialize Shopify OAuth flow
- /shopify-oauth/callback - Handle Shopify OAuth callback
woocommerce-oauth - /functions/v1/woocommerce-oauth/*
- /woocommerce-oauth/init - Initialize WooCommerce OAuth flow
- /woocommerce-oauth/callback - Handle WooCommerce callback
gdpr-webhooks - /functions/v1/gdpr-webhooks/*
- /gdpr-webhooks/customers-data-request - Handle customer data requests
- /gdpr-webhooks/customers-redact - Handle customer data redaction
- /gdpr-webhooks/shop-redact - Handle shop data redaction

Environment Variables for Edge Functions

Configure these in your Supabase project settings under Edge Functions:

# Supabase (automatically available)
SUPABASE_URL=https://YOUR_PROJECT.supabase.co
SUPABASE_ANON_KEY=your_anon_key

# Email Service (Resend)
RESEND_API_KEY=re_YOUR_API_KEY

# Shopify Integration
SHOPIFY_API_KEY=your_shopify_api_key
SHOPIFY_API_SECRET=your_shopify_api_secret
SHOPIFY_REDIRECT_URI=https://YOUR_PROJECT.supabase.co/functions/v1/shopify-oauth/callback

# Frontend URL (for OAuth redirects)
FRONTEND_URL=https://yourdomain.com

# Edge Function Base URL
EDGE_FUNCTION_BASE_URL=https://YOUR_PROJECT.supabase.co/functions/v1

Frontend Deployment

Step 1: Configure Environment Variables

Create or update .env file in shopcall.ai-main/:

# Backend API Base URL (Supabase Edge Functions)
VITE_API_URL=https://YOUR_PROJECT.supabase.co/functions/v1

# Frontend URL (for OAuth callbacks)
VITE_FRONTEND_URL=https://yourdomain.com

Step 2: Build the Frontend

cd shopcall.ai-main
npm install
npm run build

This creates a dist/ directory with your static files.

Step 3: Deploy Static Files

Option A: Apache Hosting

Upload the contents of dist/ to your web server (e.g., /var/www/html/)
Ensure .htaccess file is in the root directory (already created in public/)

Make sure mod_rewrite is enabled:

sudo a2enmod rewrite
sudo systemctl restart apache2

Option B: Nginx Hosting

Upload the contents of dist/ to your web server (e.g., /var/www/shopcall.ai/dist/)

Copy nginx.conf.example to your nginx sites-available directory:

sudo cp nginx.conf.example /etc/nginx/sites-available/shopcall.ai
sudo ln -s /etc/nginx/sites-available/shopcall.ai /etc/nginx/sites-enabled/

Update the configuration with your domain and SSL certificates

Test and reload nginx:

sudo nginx -t
sudo systemctl reload nginx

Option C: Cloudflare Pages / Netlify / Similar

Connect your Git repository
Set build command: npm run build
Set publish directory: dist
Configure environment variables in the platform's dashboard

Email Service Setup (Resend)

Sign up for Resend
Create an API key
Add the API key to your Supabase Edge Function secrets:
```
supabase secrets set RESEND_API_KEY=your_api_key
```
Verify your sending domain in Resend (optional but recommended for production)

OAuth Configuration

Shopify

In your Shopify Partner dashboard, update the app settings:
- App URL: https://yourdomain.com
- Allowed redirection URL(s):
  - https://YOUR_PROJECT.supabase.co/functions/v1/shopify-oauth/callback
- GDPR webhooks:
  - Customer data request: https://YOUR_PROJECT.supabase.co/functions/v1/gdpr-webhooks/customers-data-request
  - Customer data erasure: https://YOUR_PROJECT.supabase.co/functions/v1/gdpr-webhooks/customers-redact
  - Shop data erasure: https://YOUR_PROJECT.supabase.co/functions/v1/gdpr-webhooks/shop-redact

WooCommerce

No special configuration needed. The OAuth flow is initiated from the dashboard.

Testing the Deployment

1. Test Authentication

# Test signup
curl -X POST https://YOUR_PROJECT.supabase.co/functions/v1/auth/signup \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "password": "testpass123",
    "full_name": "Test User",
    "company_name": "Test Company",
    "user_name": "testuser"
  }'

# Test login
curl -X POST https://YOUR_PROJECT.supabase.co/functions/v1/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "password": "testpass123"
  }'

2. Test OAuth Flow

Navigate to your frontend URL
Try connecting a Shopify or WooCommerce store
Verify the OAuth callback works correctly

3. Test Frontend Routing

Navigate to various routes (e.g., /dashboard, /call-logs)
Refresh the page to ensure routing works with static hosting
Check browser console for any errors

Troubleshooting

Common Issues

Issue: 404 errors on routes when refreshing

Solution: Ensure .htaccess (Apache) or nginx configuration is properly set up for client-side routing

Issue: CORS errors when calling Edge Functions

Solution: Verify CORS headers are set in Edge Functions (corsHeaders in each function)

Issue: Email not sending

Solution: Check Resend API key is properly configured and verify the email service is active

Issue: OAuth callback fails

Solution: Verify redirect URIs match exactly in your OAuth provider settings

Monitoring and Maintenance

Edge Functions Logs: Monitor in Supabase Dashboard > Edge Functions > Logs
Database: Check Supabase Dashboard > Database for any issues
Cleanup: The database has automatic cleanup for expired records via the functions:
- delete_expired_pending_signups()
- delete_expired_oauth_nonces()

Vercel Backend Deployment (Alternative)

If using the Vercel backend (shopcall.ai-backend-main/), configure these environment variables:

# Supabase Configuration
SUPABASE_URL=https://YOUR_PROJECT.supabase.co
SUPABASE_ANON_KEY=your_anon_key

# URL Configuration
BACKEND_URL=https://shopcall-ai-backend.vercel.app  # Your backend deployment URL
FRONTEND_URL=https://shopcall.ai                     # Your frontend URL

# OAuth Configuration
SHOPIFY_API_KEY=your_shopify_api_key
SHOPIFY_API_SECRET=your_shopify_api_secret
SHOPRENTER_CLIENT_ID=your_shoprenter_client_id
SHOPRENTER_CLIENT_SECRET=your_shoprenter_client_secret

# Email Configuration
EMAIL_USER=your_gmail_address@gmail.com
EMAIL_PASSWORD=your_gmail_app_password

# Environment
NODE_ENV=production

Important: Set BACKEND_URL and FRONTEND_URL environment variables to match your actual deployment URLs. This allows for flexible deployment across different environments.

Rollback Plan

If you need to rollback to the old Vercel deployment:

Update frontend .env to point back to Vercel backend:

VITE_API_URL=https://shopcall-ai-backend.vercel.app

Rebuild and redeploy frontend
The old backend code is still available in shopcall.ai-backend-main/

Security Considerations

Environment Variables: Never commit .env files to version control
API Keys: Rotate API keys regularly
HTTPS: Always use HTTPS in production
Rate Limiting: Consider adding rate limiting to Edge Functions for production
CORS: Restrict CORS origins to your actual frontend domain in production

Support

For issues or questions:

Check Supabase logs for Edge Function errors
Review browser console for frontend errors
Verify environment variables are correctly set

DEPLOYMENT_GUIDE.md 9.1 KB 永久链接 文件历史 原始文件