Часто возникает такая ситуация, что вследствие неучтённого/изменившегося значения какого-либо атрибута сущности пользовательский интерфейс перестаёт работать. В лучшем случае пользователь будет оповещён об ошибке, а в худшем интерфейс перестанет отзываться или пропадёт совсем. Использование TypeScript и написание автоматических тестов помогают существенно снизить вероятность возникновения подобной проблемы, но не решают её полностью. Иногда, для гарантированного исправления проблемы, возникшей на проде, необходимо банально потыкать интерфейс в режиме разработки (со всеми его прелестями) с продовыми данными. Но как это можно сделать относительно быстро, не поднимая локально бэкенд и не накатывая дамп продовой базы?

Почему нельзя просто заменить имя хоста в вызове fetch

Допустим, вы запускаете фронт локально на 3000 порту. Для отображения его в браузере вы переходите на http://localhost:3000. Сам сайт живёт на https://my-domain.ru, а за данными ходит на https://backend.my-domain.ru.

Так почему нельзя просто изменить урл бэкенда в конфиге фронта?

Причины, как минимум, две:

• CORS: Браузеры блокируют запросы к внешним доменам без разрешающих заголовков. А условный localhost:3000 вряд ли находится в числе разрешённых. Иначе, у вас проблемы :)

• Отсутствие SSL в локальном окружении: Бразузер тупо не позволит сделать запрос с http://localhost:3000 на https://backend.my-domain.ru.

Открытие локального экземпляра фронта при вводе урла вашего сайта в браузерную строку решило бы обе эти проблемы. Но как именно это сделать?

1. Сгенерировать самоподписанные сертификаты
2. Настроить прокси-сервер (nginx) с использованием этих сертификатов
3. Настроить DNS

Генерация сертификатов с помощью mkcert

mkcert — инструмент для создания локальных доверенных SSL-сертификатов.

Инструкцию по установке можно найти в официальном репозитории.

После установки добавьте Certificate Authority в список доверенных:

mkcert -install

После этого можно сгенерировать сертификаты для нужного домена:

mkcert my-domain.ru

После выполнения команды в каталоге появятся файлы:

• my-domain.ru.pem — сертификат.

• my-domain.ru-key.pem — приватный ключ.

Настройка nginx как прокси

Создайте файл /etc/nginx/conf.d/proxy.conf (или в папке sites-available):

server {
    listen 443 ssl;
    server_name my-domain.ru;

    # Укажите пути к сертификатам из mkcert
    ssl_certificate /path/to/my-domain.ru.pem;
    ssl_certificate_key /path/to/my-domain.ru-key.pem;

    location / {
        proxy_pass http://localhost:3000;
    }
}

После этого необходимо проверить конфигурацию и перезапустить nginx:

sudo nginx -t  # Проверка конфигурации
sudo nginx -s reload  # Перезапуск 

Настройка DNS

Тут всё зависит от вашей системы. Для Linux/Macos всё тривиально: необходимо внести изменение в /etc/hosts:

127.0.0.1    my-domain.ru

После этого может потребоваться сброс кэша DNS в браузере, и, вероятно, закрыть открытые сокеты. В Chrome это делается на страницах chrome://net-internals/#dns и browser://net-internals/#sockets соответственно (просто введите эти урлы в адресную строку).

После этого, после введения https://my-domain.ru в адресную строку у вас в браузере должен начать открываться локальный фронт.

Заключение

С помощью mkcert и nginx вы легко поднимите HTTPS-прокси для локальной разработки. Это решает проблемы с CORS и SSL, позволяя фронтенду работать с реальными данными, не подвергая при этом риску продовый бэкенд и не запуская его локальную копию.