Как я могу настроить мои prod env vars при запуске процесса сборки? - PullRequest
Новая
       102

Как я могу настроить мои prod env vars при запуске процесса сборки?

1 голос
/ 27 апреля 2020

Я создаю приложение React 16.13.0. Я хочу настроить конечную точку по-разному для каждой среды, поэтому я настроил ее в компоненте src / Containers / FormContainer.jsx, ... 

class FormContainer extends Component {
  static DEFAULT_COUNTRY = 484
  static REACT_APP_PROXY = process.env.REACT_APP_PROXY
    ...

Я хочу построить свой проект для производства локально , Однако локально я определил эту переменную 

localhost:client davea$ echo $REACT_APP_PROXY
http://localhost:9090

и после запуска «npm run-script build» я заметил, что это скомпилировано в мои файлы сборки ... 

(function(e){return e.json()})).then((function(t){console.log(t),n=t.map((function(e){return e})),e.setState({provinces:n})}))}}]),t}(n.Component);S.DEFAULT_COUNTRY=484,S.REACT_APP_PROXY="http://localhost:9090"

Есть ли способ не заставить React автоматически разрешить env var и вместо этого извлечь его из производственной среды? Может быть, мне нужно настроить скрипт сборки? Ниже указано, что определено в моем пакете. json file ... 

localhost:client davea$ cat package.json 
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "jquery": "^1.9.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-dom": "^16.12.0",
    "react-native-flash-message": "^0.1.15",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:8000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Ответы [ 2 ]

4 голосов
/ 01 мая 2020

Следующие шаги могут помочь. Попробуйте:

Для получения дополнительной информации вы также можете обратиться к исходным документам:

Добавление пользовательских переменных среды

Первый шаг:

Создание .env файла в root проекта

Структура проекта после создания файла .env: 

...
- build
- public
- src
    |----- App.js
    |----- index.js
- package.json
- .env
...

Внутри .env файла: (например) Требуется префикс REACT_APP_! 

REACT_APP_URL_DEVELOPMENT=http://localhost:8000/api
REACT_APP_URL_PRODUCTION=https://productionDomain.com/api/

Второй шаг:

пакет. json файл:

Scripts Нет необходимости изменять package.json файл: 

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://myWebsite.com",
  "dependencies": {
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Третий шаг:

Наконец, вы можете условно использовать созданные вами переменные.

Пример: 

class Posts extends Component{
    ...

    componentDidMount(){

      // Finally, you can conditionally use the variables you created.
      const url = process.env.NODE_ENV === "development" ? process.env.REACT_APP_URL_DEVELOPMENT : process.env.REACT_APP_URL_PRODUCTION;

      axios.get(url)
        .then(res => { ... })
        .catch(err => { ... });

    }

    render(){
      return(
        ...
      )
    }
}

Раздел часто задаваемых вопросов:

process.env - это глобальный Объект, предоставляемый вашей средой через NodeJs. Потому что у нас нет NodeJS в браузере. Но вы можете получить доступ к NODE_ENV, запустив ваше приложение, используя create-react-app с webpack, включенным по умолчанию, и выполнить описанные выше шаги. Более подробная информация ниже:

Существует встроенная переменная среды, которая называется NODE_ENV. Вы можете получить к нему доступ process.env.NODE_ENV. Эта переменная изменяется в зависимости от того, в каком режиме вы находитесь в данный момент. Когда вы запускаете npm start, он равен development, когда вы запускаете npm test, он равен test, а когда вы запускаете npm run build, это равен production. Эта переменная является особенной, поскольку ее можно использовать для доступа к различным конфигурациям среды в зависимости от вашего режима.

0 голосов
/ 30 апреля 2020

Вы используете реагирующие скрипты для создания своего приложения. Вы можете определить переменные окружения в ваших .env файлах.

Для переменных, которые являются общими для среды вашего узла, вы можете определить их в файле .env

Для переменных, которые указываются от c до development и production, вы можете определить их в .env.development и .env.production файлах

Также, пожалуйста, добавьте к своим переменным префикс REACT_APP

После того, как вы это сделаете, вы можете добавить скрипты в свой пакет. json, чтобы указать сборку для определенного NODE_ENV

"scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

, а затем вы можете создать свое приложение для производства локально, например 

yarn run build:prod

, и оно будет использовать переменные производственной среды

Read Подробнее об этом в приложении create response Документация

...