写点什么

前端开发之多环境下 react 的配置

  • 2021 年 12 月 23 日
  • 本文字数:1088 字

    阅读完需:约 4 分钟

你已经使用 Create React App[1] 脚手架搭建了 React 应用,现在该部署了。

一般会使用 npm run build 或者 yarn build 构建出静态资源, 由 web 服务器承载。

你会体验到:多环境:test、staging、prod,他们都是独立服务器、不同的主机名,需要打不同的包。



或者你会这样手写 if/else 来配置不同环境的后端 API 基地址:

api-config.js

let backendHost;

const apiVersion = 'v1';

const hostname = window && window.location && window.location.hostname;

if(hostname === 'realsite.com') {

backendHost = 'https://api.realsite.com';

} else if(hostname === 'staging.realsite.com') {

backendHost = 'https://staging.api.realsite.com';

} else if(/^qa/.test(hostname)) {

backendHost = `https://api.${hostname}`;

} else {

backendHost = process.env.REACT_APP_BACKEND_HOST || 'http://localhost:8080';

}

export const API_ROOT = `${backendHost}/api/${apiVersion}`;

然后在你的应用文件 api.js, 导入这个配置

import {API_ROOT} from './api-config'

function getUsers() {

return fetch('${API_ROOT}/users')

.then(res=> res.josn)

.then(json=> json.data.users)

}

终究不够优雅。

react 工程化:通过环境变量灵活配置 react

构建时变量织入

要提醒的概念是:

环境变量是在构建阶段被织入,一旦完前端培训成构建过程,构建的产出物中变量值就被固定了(不论产出物被放置到哪个服务进程、哪个环境)。

毕竟 React 应用是作为静态资源运行在浏览器上,而到了浏览器, 就 no sense with 环境变量。

Case1. 通过环境变量配置后端基地址

Create React APP 脚手架创建了 react 应用,可通过全局的 process.env 来获取环境变量。

1.process.env.NODE_ENV 在构建时被设置为 production。2. 还可以使用 REACT_APP_开头的环境变量来配置 proces.env.

REACT_APP_API_HOST= example.com yarn run build# 将产生如下效果:process.env.REACT_APP_API_HOST ="example.com"process.env.NODE_ENV ="production"

怎么设置环境变量?windows: set/setx 命令; linux: export 命令,这里不赘述。

Case2 .env 文件

临时环境变量可以影响全局 process.env 的下级变量值, 但是不够方便,Create React App 支持使用.env 文件来固定存储环境变量值。

创建.env 文件,内容如下;

REACT_APP_SPECIAL_FEATURE=trueREACT_APP_API_HOST=default-host.com

上面的环境变量打包后将会在 development、test、production 生效。

如果你要为不同环境设置变量,可放置.env.development、env.test、.env.production 文件。


再提醒一句:环境变量不仅可以用来配置后端基地址,还可以灵活的作为 react app 业务配置。

原创作者:有态度的马甲

用户头像

关注尚硅谷,轻松学IT 2021.11.23 加入

还未添加个人简介

评论

发布
暂无评论
前端开发之多环境下react的配置