Primakov Alexandr Alexandrovich
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
|
|
|
|
**Больше не нужно менять код при деплое!** 🚀
|
|
|