feat: Add environment variable support for API URL deployment

- Add VITE_API_BASE_URL environment variable support to api.ts
- Update WebSocket hook to use env variable for separate backend deployment
- Add frontend/.env.example with configuration documentation

This enables:
- Local development: uses /api (relative path)
- Production deployment: set VITE_API_BASE_URL to backend URL

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
egg
2025-12-04 18:38:43 +08:00
parent 3927441103
commit 1e44a63a8e
3 changed files with 26 additions and 3 deletions

11
frontend/.env.example Normal file
View File

@@ -0,0 +1,11 @@
# Frontend Environment Variables
# API Base URL (optional)
# - For local development: leave empty or don't set (will use /api)
# - For production with separate backend: set to full URL
# Example: https://api.yourdomain.com/api
VITE_API_BASE_URL=
# Note: When set, this URL is also used for WebSocket connections
# http:// will be converted to ws://
# https:// will be converted to wss://

View File

@@ -47,8 +47,19 @@ export function useWebSocket(roomId: string | null, options?: UseWebSocketOption
wsRef.current.close() wsRef.current.close()
} }
// Build WebSocket URL - use env variable or default to current host
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
let wsUrl: string
if (apiBaseUrl && apiBaseUrl.startsWith('http')) {
// Convert http(s) to ws(s)
const wsBase = apiBaseUrl.replace(/^http/, 'ws')
wsUrl = `${wsBase}/ws/${roomId}?token=${token}`
} else {
// Default: use current host
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:' const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
const wsUrl = `${protocol}//${window.location.host}/api/ws/${roomId}?token=${token}` wsUrl = `${protocol}//${window.location.host}/api/ws/${roomId}?token=${token}`
}
setConnectionStatus('connecting') setConnectionStatus('connecting')
const ws = new WebSocket(wsUrl) const ws = new WebSocket(wsUrl)

View File

@@ -1,6 +1,7 @@
import axios, { type AxiosError, type InternalAxiosRequestConfig } from 'axios' import axios, { type AxiosError, type InternalAxiosRequestConfig } from 'axios'
const API_BASE_URL = '/api' // API Base URL: use environment variable or default to relative path
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api'
// Create axios instance // Create axios instance
const api = axios.create({ const api = axios.create({