Как ввести URL-адрес сервера API при развертывании реагирующего веб-интерфейса?

Question

Отказ от ответственности : Я новичок в React, поэтому, возможно, я пытаюсь сделать это не Путь React

Я пишу интерфейс React, которыйбудет развернут для статического обслуживания каким-либо облачным провайдером, например, S3, Google Storage или чем-то еще.Этот интерфейс взаимодействует с несколькими серверами API, которые находятся где-то в облаке, возможно, у одного и того же провайдера, а может и нет.Кроме того, при разработке пользовательского интерфейса или его части адреса этих серверов могут быть локальными или тестовыми.

Как мне гибко вводить URL-адреса серверов API в мое реагирующее приложение, чтобы я могразвернуть в dev, staging или prod, используя разные адреса?

РЕШЕНИЕ : я наконец-то выбрал комбинацию предложенных решений:

• use .env.production и.env.development файлов (точные имена) для хранения переменной REACT_APP_API_URI = 'host'
• , которые автоматически выбираются скаффолдом build-response-app и доступны в коде пользовательского интерфейса как process.env.REACT_APP_API_URI

Обратите внимание, что это несколько противоречит принципам 12 Factor Apps , например, хранение переменных env в файлах в системе управления версиями, но это делает работу ATM.

Answer 1

Используя этот пакет https://github.com/toddbluhm/env-cmd, вы можете создать файл env для вашей среды

, например, создать .env.staging и .env файл с этим кодом

// .env.staging file   
API_URL=https://staging.url.com/api/

// .env file
API_URL=https://url.com/api/

Как получить с помощью API_URL из переменной env:

fetch(process.env.API_URL)

Затем вы можете просто добавить несколько дополнительных скриптов в ваш пакет.json:

{
  "scripts": {
    "build:staging": "env-cmd .env.staging yarn build",
    "build:prod": "env-cmd .env yarn build"
  }
}

Answer 2

Вы можете сделать это, например, используя переменные окружения на этапе сборки.

Вы можете использовать что-то вроде .env , которое позволяет вам определять переменные среды и загружать их, например, в файл веб-пакета (при условии, что вы используете веб-пакет). Но вы действительно можете использовать его с любым пакетом.

.env file:

API=http://localhost:3000

В вашем веб-пакете вы можете использовать DefinePlugin

пример взят из документации: добавьте API env

    ...
    require('dotenv').config()
    ...

    new webpack.DefinePlugin({
      API_ENDPOINT: process.env.API,
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object')
    });

Во всяком случае, это только один из способов. Мне нравится этот способ, потому что он делает мой проект готовым для определения ключей API и других полезных вещей для различных сред.

ПРИМЕЧАНИЕ. Вы даже можете определить различные файлы .env для локальных, промежуточных и производственных файлов и загрузить соответствующий файл в веб-пакете в зависимости от типа сборки.

Answer 3

Вы можете использовать файл .env, если API постоянны для среды development или production.после build вы не можете изменить эти параметры.

Если вы хотите изменить URL после сборки, добавьте файл js, скажем, config.js

Включить conf.js в index.html

Добавить URL в conf.js как

var URL1 = 'https://www.google.com'

Вы можете получить доступ к параметру как:

export const {URL1} = window;

Answer 4

вы можете попробовать это

if(process.env.NODE_ENV === 'development') {
  url = 'https://google.com'
}

if(process.env.NODE_ENV === 'production') {
  url = 'https://stackoverflow.com/'
}