[英]How Do I Build For A UAT Environment Using React?
According to the React docs you can have development
, test
and production
envs.根据React 文档,您可以拥有development
、 test
和production
环境。
The value of NODE_ENV
is set automatically to development (when using npm start
), test (when using npm test
) or production (when using npm build
). NODE_ENV
的值自动设置为开发(使用npm start
)、测试(使用npm test
时)或生产(使用npm build
时)。 Thus, from the point of view of create-react-app, there are only three environments.因此,从 create-react-app 的角度来看,只有三个环境。
I need to change root rest api urls based on how I am deployed.我需要根据我的部署方式更改 root rest api url。 eg例如
baseURL = 'http://localhost:3004';
开发: baseURL = 'http://localhost:3004';
baseURL = 'http://localhost:8080';
测试: baseURL = 'http://localhost:8080';
baseURL = 'http://uat.api.azure.com:8080';
uat: baseURL = 'http://uat.api.azure.com:8080';
baseURL = 'http://my.cool.api.com';
生产: baseURL = 'http://my.cool.api.com';
How do I configure a UAT environment for react if it only caters for dev, test and prod?如果 UAT 环境仅适用于开发、测试和生产,我该如何配置它?
What would my javascript, package.json and build commands look like to switch these values automatically?我的 javascript、package.json 和 build 命令会如何自动切换这些值?
Like John Ruddell wrote in the comments , we should still use NODE_ENV=production
in a staging environment to keep it as close as prod as possible.就像John Ruddell 在评论中所写的那样,我们仍然应该在暂存环境中使用NODE_ENV=production
以使其尽可能接近 prod。 But that doesn't help with our problem here.但这对我们这里的问题没有帮助。
The reason why NODE_ENV
can't be used reliably is that most Node modules use NODE_ENV
to adjust and optimize with sane defaults, like Express, React, Next, etc. Next even completely changes its features depending on the commonly used values development
, test
and production
. NODE_ENV
不能可靠使用的原因是大多数 Node 模块使用NODE_ENV
来调整和优化正常的默认值,如 Express、React、Next 等。 Next 甚至根据常用值development
、 test
和production
。
So the solution is to create our own variable, and how to do that depends on the project we're working on.所以解决方案是创建我们自己的变量,如何做到这一点取决于我们正在处理的项目。
The documentation says:文档说:
Note: You must create custom environment variables beginning with
REACT_APP_
.注意:您必须创建以REACT_APP_
开头的自定义环境变量。 Any other variables exceptNODE_ENV
will be ignored to avoid accidentally exposing a private key on the machine that could have the same name .除了NODE_ENV
之外的任何其他变量都将被忽略,以避免在机器上意外暴露可能具有相同名称的私钥。
It was discussed in an issue where Ian Schmitz says:在Ian Schmitz说的一个问题中对此进行了讨论:
Instead you can create your own variable like
REACT_APP_SERVER_URL
which can have default values in dev and prod through the.env
file if you'd like, then simply set that environment variable when building your app for staging likeREACT_APP_SERVER_URL=... npm run build
.相反,您可以创建自己的变量,例如REACT_APP_SERVER_URL
,如果您愿意,可以通过.env
文件在 dev 和 prod 中具有默认值,然后在构建应用程序时简单地设置该环境变量,例如REACT_APP_SERVER_URL=... npm run build
.
A common package that I use is cross-env
so that anyone can run our npm scripts on any platform.我使用的一个常用包是cross-env
,这样任何人都可以在任何平台上运行我们的 npm 脚本。
"scripts": {
"build:uat": "cross-env REACT_APP_SERVER_URL='http://uat.api.azure.com:8080' npm run build"
If we're not bound to CRA, or have ejected , we can easily configure any number of environment configurations we'd like in a similar fashion.如果我们没有绑定到 CRA,或者已经弹出,我们可以以类似的方式轻松配置我们想要的任意数量的环境配置。
Personally, I like dotenv-extended
which offers validation for required variables and default values.就个人而言,我喜欢dotenv-extended
,它提供对所需变量和默认值的验证。
Similarly, in the package.json
file:同样,在package.json
文件中:
"scripts": {
"build:uat": "cross-env APP_ENV=UAT npm run build"
Then, in an entry point node script (one of the first script loaded, eg required in a babel config):然后,在入口点节点脚本(加载的第一个脚本之一,例如在 babel 配置中需要):
const dotEnv = require('dotenv-extended');
// Import environment values from a .env.* file
const envFile = dotEnv.load({
path: `.env.${process.env.APP_ENV || 'local'}`,
defaults: 'build/env/.env.defaults',
schema: 'build/env/.env.schema',
errorOnMissing: true,
silent: false,
});
Then, as an example, a babel configuration file could use these like this:然后,作为一个例子,一个 babel 配置文件可以像这样使用这些:
const env = require('./build/env');
module.exports = {
plugins: [
['transform-define', env],
],
};
John Ruddell also mentioned that one can detect at runtime the domain the app is running off of. John Ruddell 还提到,可以在运行时检测应用程序正在运行的域。
function getApiUrl() {
const { href } = window.location;
// UAT
if (href.indexOf('https://my-uat-env.example.com') !== -1) {
return 'http://uat.api.azure.com:8080';
}
// PROD
if (href.indexOf('https://example.com') !== -1) {
return 'http://my.cool.api.com';
}
// Defaults to local
return 'http://localhost:3004';
}
This is quick and simple, works without changing the build/CI/CD pipeline at all.这既快速又简单,完全无需更改构建/CI/CD 管道即可工作。 Though it has some downsides:虽然它有一些缺点:
babel-plugin-transform-define
or Webpack's DefinePlugin
resulting in a slightly bigger file size.当使用诸如babel-plugin-transform-define
或Webpack 的DefinePlugin
之类的东西时,它不会从死代码删除中受益,从而导致文件大小稍大。To have multiple environments in a React.js application you can use this plugin env-cmd from NPM要在 React.js 应用程序中拥有多个环境,您可以使用 NPM 中的这个插件env-cmd
And after that Create the three files as per your need.然后根据您的需要创建三个文件。 For example if you want to setup dev, stag and prod environments you can write your commands like this.例如,如果您想设置 dev、stag 和 prod 环境,您可以像这样编写命令。
"start:dev": "env-cmd -f dev.env npm start", // dev env
"build:beta": "env-cmd -f stag.env npm run build", // beta env
"build": "react-scripts build", // prod env using .env file
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.