当我 运行 我的构建过程时,如何配置我的产品环境变量?
How can I configure my prod env vars when I run my build process?
我正在构建 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 自动解析环境变量,而是从生产环境中获取它?也许我需要调整我的构建脚本?以下是我的 package.json 文件中定义的内容 ...
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"
]
}
}
您正在使用反应脚本来构建您的应用程序。您可以在 .env 文件中定义环境变量。
对于节点环境中通用的变量,您可以在 .env 文件中定义它们
对于 development
和 production
的特定变量,您可以在 .env.development
和 .env.production
文件中定义它们
另外请在您的变量前加上REACT_APP
完成后,您可以在 package.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
并且它将使用生产环境变量
在 create react app 上阅读更多相关信息 documentation
以下步骤可能会有所帮助。试一试:
You can also refer to the original documents for more information:
第一步:
在项目的根目录中创建 .env
文件
创建 .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/
第二步:
package.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
is a global Object provided by your environment through
NodeJs. Because we don't have NodeJS in browser. But you can access to NODE_ENV
by init your app using create-react-app
with webpack
included by default and perform the above steps. More details below:
有一个名为 NODE_ENV
的内置环境变量。您可以从 process.env.NODE_ENV
访问它。此变量根据您当前所处的模式而变化。当您 运行 npm start
时,它等于 development
,当您 运行 npm test
时它等于到 test
,当你 运行 npm run build
它等于 production
。这个变量是特殊的,因为它可以用于根据您的模式访问不同的环境配置。
我正在构建 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 自动解析环境变量,而是从生产环境中获取它?也许我需要调整我的构建脚本?以下是我的 package.json 文件中定义的内容 ...
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"
]
}
}
您正在使用反应脚本来构建您的应用程序。您可以在 .env 文件中定义环境变量。
对于节点环境中通用的变量,您可以在 .env 文件中定义它们
对于 development
和 production
的特定变量,您可以在 .env.development
和 .env.production
文件中定义它们
另外请在您的变量前加上REACT_APP
完成后,您可以在 package.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
并且它将使用生产环境变量
在 create react app 上阅读更多相关信息 documentation
以下步骤可能会有所帮助。试一试:
You can also refer to the original documents for more information:
第一步:
在项目的根目录中创建 .env
文件
创建 .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/
第二步:
package.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
is a global Object provided by your environment through NodeJs. Because we don't have NodeJS in browser. But you can access toNODE_ENV
by init your app usingcreate-react-app
withwebpack
included by default and perform the above steps. More details below:
有一个名为 NODE_ENV
的内置环境变量。您可以从 process.env.NODE_ENV
访问它。此变量根据您当前所处的模式而变化。当您 运行 npm start
时,它等于 development
,当您 运行 npm test
时它等于到 test
,当你 运行 npm run build
它等于 production
。这个变量是特殊的,因为它可以用于根据您的模式访问不同的环境配置。