前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端快闪三:多环境灵活配置react

前端快闪三:多环境灵活配置react

作者头像
有态度的马甲
发布2021-10-14 12:17:43
9050
发布2021-10-14 12:17:43
举报
文章被收录于专栏:精益码农精益码农

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

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

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


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

api-config.js

代码语言:javascript
复制
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, 导入这个配置

代码语言:javascript
复制
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.

代码语言:javascript
复制
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文件,内容如下;

代码语言:javascript
复制
REACT_APP_SPECIAL_FEATURE=true
REACT_APP_API_HOST=default-host.com

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

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


本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-09-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 精益码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 构建时变量织入
  • Case1. 通过环境变量配置后端基地址
  • Case2 .env文件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档