Сегодня многие веб-приложения построены с использованием реагирования, угловых, Vue, Ember и других. Эти современные клиентские оказанные приложениями часто называют веб-API, которые размещаются на отдельных серверах. Это создает проблему: как вы настраиваете свое приложение, чтобы вызвать правый URL API в каждой среде?
Например, во время разработки вы можете провести API на местном уровне в Localhost: 3000. В производстве API может быть проведен на некоторых других серверах на API.mycompany.com. Таким образом, вам нужно ваше приложение, чтобы позвонить в Localhost: 3000 в разработке и API.MyCompany.com в производстве. Но как?
И базовый URL является лишь одним из примеров настроек, которые могут измениться на среду. Вы можете выбрать настроить другие настройки на окружающую среду для эффективности, безопасности или регистрации. Некоторые из подходов ниже применимы для этих общих конфигураций, специфичных для окружающей среды. Но для простоты , Этот пост ориентирован на методики для настройки базовых URL для окружающей среды.
Я опубликовал опрос в Twitter с парой вариантов:
«Опрос: Как вы настраиваете свои приложения, представленные на стороне клиента, чтобы вызвать различные URL-адреса API в каждой среде? Пример: DEV API работает на localhost: 3002 Prod API в https://t.co/8zspumqi4m.
Оказывается, есть много способов справиться с этим. Я получил много проницательных ответов в Tweet Thread. Я подвел восемь вариантов ниже. Я заказал эти варианты (свободно) в приказе, что их следует рассмотреть. Итак, если вы спешите, варианты рассмотрены первыми на вершине. ?
Вариант 1: хост API с приложением
Простой. Просто проводите приложение и API от одного и того же веб-сервера, поэтому относительные URL-адреса работают везде. Это позволяет избежать проблем базового URL, а также проблемы с перекрестными происхождениями.
Когда это рассмотреть:
- Ваш API потребляется одним приложением.
- Вам не нужно масштабировать вашу API и приложение отдельно, поэтому хостинг на том же сервере практичен.
Вариант 2: Специальная среда сборка
Этот подход начитает Maxim с компиляцией:
С помощью этого подхода вы обычно используете сервер непрерывной интеграции (CI) для генерации и развертывания пользовательских сборки для каждой среды. Это мощный, безопасный и универсальный подход, но он требует, каждому разработчику создают и поддерживают файл .env на их машине. Вот отличный пост с некоторыми трюками для создания этого довольно безболезненного Отказ
Когда это рассмотреть:
- Вам удобно настроить сервер CI для автоматизации процесса сборки и развертывания для обеспечения надежности.
- Вы хотите значительно изменить код, развернутый для производства, такому как удаление кода, который используется только в непроизводственных средах для производительности или соображений безопасности.
- Вам удобно с риском, который приходит вместе с развертыванием другого кода до производства, чем код, который вы управляете во время разработки и качества.
Вариант 3: Конфигурация времени выполнения
С помощью этого подхода вы настраиваете свое приложение для каждой среды, ссылаясь на соответствующие данные конфигурации при запуске (в отличие от построения, как обсуждено выше). Итак, В отличие от подхода выше, с этим подходом один и тот же код развернут для всех сред Отказ Данные конфигурации вы передаваете на Startup, настраивают поведение приложения.
Есть пара потенциальных способов передачи данных конфигурации окружающей среды в:
- Командная строка конфигурация – Передайте конфигурацию при запуске приложения.
- Окружающая среда Config файл – Заполните файл .env в каждой среде и прочитайте от него при запуске. Вот пример от Docks Create-React-App , но подход относится к любому приложению JavaScript.
Но как ваше приложение получит эту информацию? Есть пара способов сделать это тоже:
- Config файл – Напишите данные конфигурации в отдельный файл JavaScript в запуске приложения. Ваше приложение может импортировать и прочитать этот файл при запуске.
- Глобал в index.html – Напишите данные конфигурации в глобальную в Index.html с помощью инструмента сборки. Опять же, Вот пример от Docks Create-React-App , но подход относится к любому приложению JavaScript.
По общему признанию, эти подходы Слегка изменяют ваш код при запуске на основе предоставленной конфигурации выполнения. Но они отличаются от опции № 2 выше, потому что тот же код развернут для всех сред.
Когда это рассмотреть:
- Вы предпочитаете развертывать тот же код для всех сред.
Вариант 4: обратный прокси
С таким подходом вы называете тот же относительный URL во всех средах. Как это работает? Что ж, это ответственность на передний веб-сервер перед пересылающими вызовами к соответствующему API для каждой среды. Есть несколько преимуществ для этого подхода:
- Ваши URL-адреса во всех ваших вызовах API являются чистыми, относительными URL-адресами. Например/пользователь.
- Вы можете настроить свой интерфейсный веб-сервер в качестве кэширования слоя для дополнительной производительности.
- Этот подход поддерживает переключение задних систем, просто повторно настроив прокси.
Я всегда использую путь относительной/API. Затем позвольте веб-серверам обратный прокси, куда бы это ни нужно указывать. Кодовые изменения или не требуются условная логика.
Когда это рассмотреть:
- У вас есть возможность настроить веб-сервер во всех средах
- Вы заинтересованы в реализации кеширования слоя между вашим интерфейсом UI и вашим API.
- Ваш интерфейсный веб-сервер может надежно и быстро и быстро пересылать звонки на сервер API. Существует стоимость выполнения для этого подхода, поскольку ваш веб-сервер должен пройти запросы на другой сервер.
Примечание:
Хотя мы говорим о прокси, стоит упомянуть еще один прокси-подход, является прокси-промежуточная программа (это совершенно другой подход, чем обратный прокси, обсужденный выше).
С прокси-промежуточным программным обеспечением, работающим на вашей локальной машине, запросы пересылаются на указанный URL во время разработки. Например, если вы разработчик реагирования, Create-React-App имеет поддержку прокси, встроенной в Отказ Он использует прокси-программное обеспечение WebPack.
Вот a Сплошной обзор прокси-подхода Использование React и Express.
Однако : Прокси-промежуточное ПО решает только проблему Base URL в разработке. Итак, используйте одну из других методик в этом посте для обработки других условий, таких как QA и производство.
Вариант 5: Docker
С Docker вы можете развернуть пользовательский интерфейс и API в качестве раздельных контейнеров, но создайте «локальную локон», что позволяет контейнерам общаться как будто они в одной сети. Таким образом, базовые URL не изменяются в каждой среде. Контейнеры проходят одинаково во всех средах. И вы можете передавать соответствующие переменные среды в контейнеры в каждой среде. Посмотрите в Kubernetes или Docker Rame для этого подхода.
Когда это рассмотреть:
- Вы уже инвестированы в докеровскую экосистему.
Вариант 6: среда нюхает
С таким подходом вы используете код для «нюхает» ?? Текущая среда, как правило, глядя на URL. Например, если URL есть http://localhost, вы знаете, что вы в разработке.
Преимущество этого подхода – простота. Разработчики не нужно что-либо настроить на их машине, и вам не нужно обезьяна с сервером CI или конфигурациями веб-сервера.
Когда это рассмотреть:
- У вас есть простое приложение, которое называет небольшое количество API.
- У вас нет CI-сервера.
- Политика вашей компании делает это болезненным или непрактичным для реализации других вариантов выше.
- Вы не обеспокоены людьми потенциально находить URL-адреса к вашей непроизводственной среде. (Для безопасности ваша неработающая среда не должна быть доступна за пределами вашей корпоративной локальной сети/VPN в любом случае).
Вариант 7: пользовательский заголовок HTTP
Настройте передний веб-сервер, чтобы обеспечить пользовательский HTTP-заголовок, который содержит соответствующий клиентский URL для среды. Недостатком этого подхода является ваше приложение, чтобы сначала сделать вызов HTTP, чтобы определить, что соответствующие базовые URL для всех сред.
Когда это рассмотреть:
- Я не рекомендую этот подход, поскольку для вашего приложения требуется ваше приложение для вызова HTTP Wrund Wrund, прежде чем он сможет начать получать данные. Я предпочитаю один из других подходов выше.
Вариант 8: Конечная точка конфигурации приложения
С помощью этого подхода ваше приложение вызывает одинаковую API «Config App Config» в том же URL, для всех сред. Ваше приложение вызывает эту API первым. Вызов API возвращает соответствующий базовый URL в каждой среде (а также потенциально, включая другие настройки для окружающей среды). С помощью этого подхода вы можете потенциально пройти вместе с другими соответствующими данными конфигурации.
Когда это рассмотреть:
- Я тоже не рекомендую этот подход. Это влияет на время загрузки, потому что начальный HTTP вызов для получения данных Config Config должен выполнен до того, как приложение действительно может начать получать желаемые данные. Рассмотрим один из других вариантов выше.
Резюме
Создайте сборку на окружающую среду через CI Server, если вам нужна настоящая настройка для каждой среды (# 2 выше). Если вы предпочитаете развертывать один и тот же код для каждой среды, рассмотрите конфигурацию времени выполнения (# 3 выше) или обратный прокси (# 4 выше).
Счастливое кодирование! ⌨️.
Есть другие способы справиться с этим? Пожалуйста, звоните через комментарии.
Дом Кори автор Несколько курсов по JavaScript, React, Clear Code, .NET и многое другое на PluralSight Отказ Он главный консультант по адресу Reactjsconsulting.com , архитектор программного обеспечения, Microsoft MVP и поезда разработчиков программного обеспечения на международном уровне по практическим практикам развития. Твиты CORY о JavaScript и Front-End Development в Twitter, как @houseCor Отказ