70889421ea
- Created `.env.production` file to define relative paths for production deployment. - Updated frontend API and WebSocket client to use environment variables for dynamic URL handling. - Enhanced deployment scripts (`deploy-ubuntu.sh`, `start.sh`, `start.bat`) to generate `.env.production` automatically. - Added `PRODUCTION_URLS.md` for documentation on production URL configuration and troubleshooting.
251 lines
5.5 KiB
Markdown
251 lines
5.5 KiB
Markdown
# 🌐 Настройка URL для Production
|
||
|
||
## Проблема
|
||
|
||
После развертывания на сервере frontend пытается обращаться к `localhost` вместо реального IP/домена сервера.
|
||
|
||
## ✅ Решение
|
||
|
||
Frontend теперь использует **относительные пути** и динамические URL.
|
||
|
||
---
|
||
|
||
## 🔧 Как это работает
|
||
|
||
### 1. API запросы
|
||
|
||
**До:**
|
||
```typescript
|
||
const API_BASE_URL = 'http://localhost:8000/api';
|
||
```
|
||
|
||
**После:**
|
||
```typescript
|
||
const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
|
||
```
|
||
|
||
### 2. WebSocket
|
||
|
||
**До:**
|
||
```typescript
|
||
const wsUrl = 'ws://localhost:8000/ws/reviews';
|
||
```
|
||
|
||
**После:**
|
||
```typescript
|
||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
const host = import.meta.env.VITE_WS_URL || `${protocol}//${window.location.host}`;
|
||
const wsUrl = `${host}/ws/reviews`;
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Режимы работы
|
||
|
||
### Development (npm run dev)
|
||
|
||
Frontend работает на `localhost:5173`, proxy перенаправляет запросы:
|
||
|
||
```typescript
|
||
// vite.config.ts
|
||
server: {
|
||
proxy: {
|
||
'/api': 'http://localhost:8000',
|
||
'/ws': 'ws://localhost:8000',
|
||
}
|
||
}
|
||
```
|
||
|
||
**Запросы:**
|
||
- `http://localhost:5173/api/...` → `http://localhost:8000/api/...`
|
||
- `ws://localhost:5173/ws/...` → `ws://localhost:8000/ws/...`
|
||
|
||
### Production (npm run build)
|
||
|
||
Frontend собран в `backend/public/`, backend раздает статику.
|
||
|
||
**Относительные пути:**
|
||
- `/api/...` → `http://your-server-ip:8000/api/...`
|
||
- `/ws/...` → `ws://your-server-ip:8000/ws/...`
|
||
|
||
Browser автоматически использует текущий host!
|
||
|
||
---
|
||
|
||
## 🎯 Примеры
|
||
|
||
### На локальной машине:
|
||
|
||
```
|
||
URL браузера: http://localhost:8000
|
||
API запрос: http://localhost:8000/api/repositories
|
||
WebSocket: ws://localhost:8000/ws/reviews
|
||
```
|
||
|
||
### На сервере (IP):
|
||
|
||
```
|
||
URL браузера: http://185.152.81.243:8000
|
||
API запрос: http://185.152.81.243:8000/api/repositories
|
||
WebSocket: ws://185.152.81.243:8000/ws/reviews
|
||
```
|
||
|
||
### На сервере (домен):
|
||
|
||
```
|
||
URL браузера: https://ai-review.example.com
|
||
API запрос: https://ai-review.example.com/api/repositories
|
||
WebSocket: wss://ai-review.example.com/ws/reviews
|
||
```
|
||
|
||
---
|
||
|
||
## ⚙️ Переменные окружения
|
||
|
||
### .env.production (создается автоматически)
|
||
|
||
```bash
|
||
# Относительные пути (по умолчанию)
|
||
VITE_API_URL=/api
|
||
VITE_WS_URL=
|
||
```
|
||
|
||
### .env.development (для разработки)
|
||
|
||
```bash
|
||
# Явные URL для development
|
||
VITE_API_URL=http://localhost:8000/api
|
||
VITE_WS_URL=ws://localhost:8000
|
||
```
|
||
|
||
### Кастомная настройка:
|
||
|
||
Если нужен специфичный URL (например, разные домены):
|
||
|
||
```bash
|
||
# frontend/.env.production
|
||
VITE_API_URL=https://api.example.com/api
|
||
VITE_WS_URL=wss://api.example.com
|
||
```
|
||
|
||
---
|
||
|
||
## 🔄 Пересборка после изменений
|
||
|
||
### Локально:
|
||
|
||
```bash
|
||
cd frontend
|
||
npm run build
|
||
```
|
||
|
||
### На сервере:
|
||
|
||
```bash
|
||
cd /opt/ai-review/frontend
|
||
npm run build
|
||
sudo systemctl restart ai-review
|
||
```
|
||
|
||
---
|
||
|
||
## 🐛 Troubleshooting
|
||
|
||
### Проблема: API запросы идут на localhost
|
||
|
||
**Причина:** Frontend собран со старым кодом
|
||
|
||
**Решение:**
|
||
```bash
|
||
cd frontend
|
||
rm -rf dist/ ../backend/public/
|
||
npm run build
|
||
```
|
||
|
||
### Проблема: WebSocket не подключается
|
||
|
||
**Проверьте:**
|
||
1. Открыть DevTools → Network → WS
|
||
2. Проверить URL WebSocket подключения
|
||
3. Убедиться что backend доступен
|
||
|
||
**Для HTTPS:**
|
||
```bash
|
||
# WebSocket должен использовать wss://
|
||
# Убедитесь что nginx прокси настроен:
|
||
|
||
location /ws {
|
||
proxy_pass http://localhost:8000;
|
||
proxy_http_version 1.1;
|
||
proxy_set_header Upgrade $http_upgrade;
|
||
proxy_set_header Connection "upgrade";
|
||
}
|
||
```
|
||
|
||
### Проблема: CORS ошибки
|
||
|
||
**Если используете разные домены:**
|
||
|
||
Обновите `backend/.env`:
|
||
```bash
|
||
CORS_ORIGINS=https://yourdomain.com,https://api.yourdomain.com
|
||
```
|
||
|
||
Перезапустите backend:
|
||
```bash
|
||
sudo systemctl restart ai-review
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Проверка
|
||
|
||
### 1. Откройте DevTools (F12)
|
||
|
||
### 2. Network tab
|
||
|
||
Проверьте запросы:
|
||
- ✅ URL должны использовать текущий host
|
||
- ✅ Не должно быть `localhost` в production
|
||
|
||
### 3. Console
|
||
|
||
Не должно быть ошибок типа:
|
||
- ❌ `Failed to fetch`
|
||
- ❌ `ERR_CONNECTION_REFUSED`
|
||
- ❌ `Mixed Content` (http на https странице)
|
||
|
||
---
|
||
|
||
## 📝 Пример логов
|
||
|
||
### ✅ Правильно (на сервере 185.152.81.243):
|
||
|
||
```
|
||
GET http://185.152.81.243:8000/api/repositories 200 OK
|
||
WS ws://185.152.81.243:8000/ws/reviews [connected]
|
||
```
|
||
|
||
### ❌ Неправильно:
|
||
|
||
```
|
||
GET http://localhost:8000/api/repositories [failed]
|
||
WS ws://localhost:8000/ws/reviews [failed]
|
||
```
|
||
|
||
---
|
||
|
||
## 🎉 Готово!
|
||
|
||
Теперь приложение работает на любом домене/IP без изменений кода!
|
||
|
||
**Автоматически подстраивается под:**
|
||
- ✅ localhost
|
||
- ✅ IP адрес
|
||
- ✅ Домен
|
||
- ✅ HTTP/HTTPS
|
||
- ✅ WS/WSS
|
||
|
||
**Больше не нужно менять код при деплое!** 🚀
|
||
|