Настройка локальных доменов для разработки с использованием Docker и Nginx — это распространенная практика, и есть несколько способов сделать это правильно. Вот пошаговая инструкция и некоторые рекомендации:
### 1. Настройка файла `/etc/hosts`
Вы правильно сделали, что добавили записи в файл `/etc/hosts` для ваших локальных доменов. Например, добавьте следующие строки:
```
127.0.0.1 api.mysite.dev
127.0.0.1 frontend.mysite.dev
```
### 2. Настройка Nginx
Теперь необходимо настроить Nginx, чтобы он обрабатывал запросы к вашим доменам. Пример конфигурации для Nginx может выглядеть так:
```nginx
server {
listen 80;
server_name api.mysite.dev;
location / {
proxy_pass http://localhost:3001; # Ваша API служба
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name frontend.mysite.dev;
location / {
proxy_pass http://localhost:3000; # Ваша фронтенд служба
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
```
Сохраните файл конфигурации и перезапустите Nginx.
### 3. Использование HTTPS
Браузеры действительно могут перенаправлять на HTTPS, особенно если вы уже посещали эти домены ранее. Для разработки HTTPS вам нужно сгенерировать самоподписанный сертификат или использовать такие инструменты, как [mkcert](https://github.com/FiloSottile/mkcert), которые создают сертификаты из-за специфических доменов.
#### Установка mkcert:
1. Установите `mkcert`:
```bash
brew install mkcert # для macOS
mkcert -install
```
2. Создайте сертификаты для ваших доменов:
```bash
mkcert api.mysite.dev frontend.mysite.dev
```
Это создаст файлы `api.mysite.dev.pem` и `api.mysite.dev-key.pem` (также для фронтенда). Теперь обновите вашу конфигурацию Nginx:
```nginx
server {
listen 443 ssl;
server_name api.mysite.dev;
ssl_certificate /path/to/api.mysite.dev.pem;
ssl_certificate_key /path/to/api.mysite.dev-key.pem;
location / {
proxy_pass http://localhost:3001;
...
}
}
server {
listen 443 ssl;
server_name frontend.mysite.dev;
ssl_certificate /path/to/frontend.mysite.dev.pem;
ssl_certificate_key /path/to/frontend.mysite.dev-key.pem;
location / {
proxy_pass http://localhost:3000;
...
}
}
```
### 4. Обновление кода фронтенда
Теперь, когда у вас настроены локальные домены и серверы, вам нужно будет обновить код вашего фронтенда, чтобы он обращался к API через новый локальный домен:
```javascript
const apiUrl = 'https://api.mysite.dev'; // Обращаться к API по этому адресу
```
### 5. CORS
Если ваши фронтенд и API работают на разных доменах, вам также нужно будет настроить CORS на стороне API. Это можно сделать, добавив соответствующие заголовки на сервере. Например, если ваше API написано на Express, вы можете использовать пакет `cors`:
```javascript
const cors = require('cors');
app.use(cors({ origin: 'https://frontend.mysite.dev' }));
```
### Заключение
Эти шаги должны помочь вам без проблем настроить локальные домены для вашей разработки. Если у вас возникнут дополнительные вопросы, не стесняйтесь уточнять!