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

fc614b586234c549650ce0e4e377da7a.gif

大前端快闪:package.json文件知多少?

大前端快闪二:react开发模式 一键启动多个服务

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

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

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

c1c416e121278f49a366112a4322b43f.png


或者你会这样手写 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=true
REACT_APP_API_HOST=default-host.com

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

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


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

 性感豹纹

4c2330567483435e729a55f57f734aad.gif 鹅厂二面,Nginx回忆录

f4122894d8a06182ac1d0bb186dece10.gif 前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)

6900cb7c82fc277e9db913e3deb0f4ce.gif 前端镜像打包这么慢,你该反省一下

4074d28501632c644b0f8d5c2a89dcdd.gif

 谁说docker-compose不能水平扩展容器、服务多实例?

094cea1aa9c41aebcec01809e7518340.gif

 面试官:单点登录你搞过吗?

9f93e97c5791130cbbce1b0cc374b0b1.gif

 难缠的布隆过滤器,这次终于通透了

引用链接

[1] Create React App: https://github.com/facebook/create-react-app

f2d7c16d60c13bc1bdf94f5f8b2a4c8e.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/297250.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vSphere 4系列之六:Standard vSwitch

一、ESX网络基础 我们知道在物理环境中,主机是通过物理Switch连入到网络环境中的,与此类似,在vSphere虚拟环境中有vSwitch,虚拟机就是通过ESX主机上vSwitch来连入网络的;那vSwitch又是如何连入外部物理网络环境&…

学霸真的比学渣更讨女孩子欢心吗?

全世界只有3.14 % 的人关注了爆炸吧知识表白难,难于追女神理工男,难于上青天最近小天回过头去追一部剧剧里的物理学霸顾未易顶着一张撕漫脸用薛定谔方程写下浪漫情书 却被女方认为:炫技 难道理工男在情话这方面真就不能拥有姓名吗&#xff1f…

游戏运营杂谈之-----IB推荐算法

最近比较累,也比较忙,有些东西没来得及写给各位,这里抱歉了,无论是否对错,都只是鄙人一家之言,还请见谅,有错欢迎指出,并加以改之。 什么是IB推荐算法,说白了就是当玩家在…

Java Socket实战之四 传输压缩对象

2019独角兽企业重金招聘Python工程师标准>>> 本文地址:http://blog.csdn.net/kongxx/article/details/7259834 Java Socket实战之一 单线程通信 Java Socket实战之二 多线程通信 Java Socket实战之三 传输对象 上一篇文章说到了用Java Socket来传输对象&…

批量提取文件创建时间_不要眨眼!批量提取文件名,只需30秒

私信回复关键词【工具】~获取Excel高效小工具合集!让你的Excel效率开挂~众所周知,「复制粘贴」可以解决 Excel 中出现的大多数问题。那我们为什么还要学习 Excel 相关技巧???因为,「复制粘贴」费时费力呀&a…

“妈,你当年咋看上我爸的?”网友晒爸妈结婚照,笑抽了!

全世界只有3.14 % 的人关注了爆炸吧知识最近看到网上有人问什么事情让你开始怀疑人生一网友回答看到我爹妈的结婚照我开始怀疑人生我怀疑我妈当时被我爸绑架了▼妈,有啥想不开的好好说或者你告诉我我爸到底是有什么特殊才艺吸引了你▼爸!我知道你娶到我妈…

【转】卖场开设社区便利店,不仅卖货,还有家政服务、售后衔接等(图)

台海网(微博)6月1日讯 (海峡导报记者 孙春燕/文 吴晓平/图)家门口开天虹便利店了,不仅有食品、水果,还有家政服务。  昨天,导报记者走访市场发现,厦门天虹第一家社区便利店“微喔”已于两周前悄然开业&am…

巴巴运动网学习笔记(16-20)

1.ProductType的JPA映射 View Code 1 Entity 2 public class ProductType { 3 private int id; 4 private String name; 5 private String note; 6 private boolean visible true; 7 private Set<ProductType> child; 8 private ProductType p…

批量生成 Gitee 仓库克隆命令的方法

当我们在一个新的公司入职或者发现一个很有意思的开源项目作者时&#xff0c;我们可能需要或者很想将该公司或作者的所有开源项目都克隆到本地慢慢研究。于是&#xff0c;笔者制作出了一段脚本可以一波将页面上的所有仓库生成克隆命令&#xff1a;var tmp []; $(.repository).…

Heartbeat+httpd+NFS 实现高可用的Web服务器

一、环境系统:CentOS 6.4x64位最小化安装nfs:192.168.3.31node1:192.168.3.32node2:192.168.3.33vip:192.168.3.34二、拓扑图三、前提条件1.节点之间主机名互相解析node1,node2:[rootheatbeat-node1 ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost…

VS2005混合编译ARM汇编代码

2019独角兽企业重金招聘Python工程师标准>>> 在开发过程中&#xff0c;发现简单的在Storage Memory区域拷贝或粘贴文件不能达到硬件量测的要求&#xff0c;需要直接通过编写ARM汇编指令让CPU直接对Memory进行读写数据。 以前没有用VS2005编写过汇编代码&#xff0c;…

中国最险六大寺庙,最后一座至今无人登临

全世界只有3.14 % 的人关注了爆炸吧知识来源&#xff1a;「风景线」佛教远离尘世的特性使得很多寺庙修建于偏僻险要的山野&#xff0c;看似岌岌可危的建筑&#xff0c;却能屹立千百年而不倒&#xff0c;这不得不感叹古人智慧的伟大&#xff0c;这6大险要寺庙&#xff0c;绝对能…

c/c++ code JSON

cJSON 初体验 cJSON是一个超轻巧&#xff0c;携带方便&#xff0c;单文件&#xff0c;简单的可以作为ANSI-C标准的JSON解析器。官网地址 cJSON.c /*Copyright (c) 2009 Dave GamblePermission is hereby granted, free of charge, to any person obtaining a copyof this softw…

Dapr牵手.NET学习笔记:发布-订阅

queue&#xff0c;是很好的削峰填谷工具&#xff0c;在业内也是主流&#xff1b;发布订阅&#xff0c;可以有效的解耦两个应用&#xff0c;所以dapr把他们进行了有效的封装&#xff0c;我们使用起来更简单高效。本篇的案例是下完订单后&#xff0c;会把消息发布到redis&#xf…

sql年月日24小时制_Power Query 抓取气象台24小时降水量数据

我们借鉴之前抓取台风路径数据的例子&#xff0c;试一试抓取降水量数据&#xff1a;之前我们访问过这个网站&#xff0c;也试着抓取过数据&#xff0c;不过在谷歌浏览器中我们只能够找到两天的数据&#xff0c;但是通过台风路径数据抓取&#xff0c;我们猜想只要我们向服务器提…

薅羊毛丨5个平价好物,终于终于终于打折了!

▲ 点击查看大家好&#xff0c;超模全新的固定栏目「薅羊毛」上线了&#xff01;既然是薅羊毛&#xff0c;怎么能空着手来&#xff1f;别看今天是草单&#xff0c;但所有产品都是咱们商务部小哥谈了好久才拿下的团购&#xff0c;而且全都包邮。毕竟好用的好吃的&#xff0c;啥都…

Docker小白到实战之Docker Compose在手,一键足矣

前言Docker可以将应用程序及环境很方便的以容器的形式启动&#xff0c;但当应用程序依赖的服务比较多&#xff0c;或是遇到一个大系统拆分的服务很多时&#xff0c;如果还一个一个的根据镜像启动容器&#xff0c;那就有点累人了&#xff0c;到这有很多小伙伴会说&#xff1a;弄…

Hsiaoyang:Google搜索结果页面分析

Hsiaoyang:Google搜索结果页面分析首先请参看Google官方的“搜索结果页”用户在使用搜索引擎的时候&#xff0c;首先会在搜索框中输入关键词&#xff0c;随后SE会返回一个搜索结果呈现给用户。SEO的主要对象是搜索引擎&#xff0c;而了解搜索引擎对搜索结果的展现对于SEO人员的…

泰国小哥又双叒叕整活,奇怪的美少女出现了......

最近“文艺复兴”又流行起来了&#xff0c;这一次遭殃的是80和90后的童年偶像——水兵月。在推特“重绘水兵月”的标签下&#xff0c;民间的绘画高手甚至业内的大佬&#xff0c;都以自己的画风&#xff0c;对下面这张出自《美少女战士》的截图进行重绘。下面让我们来欣赏网络上…

和套套一样,一次性橡胶手套制作现场, 这鬼畜的画风

全世界只有3.14 % 的人关注了爆炸吧知识来源&#xff1a;普象工业设计小站ID&#xff1a;iamdesign如果说套套的制作过程很羞羞那同为乳胶制品的乳胶手套制作过程则可以用魔性甚至惊悚来说走进乳胶手套制作的工厂里迎面而来的是数不清的白色之手不停地在转啊转、甩啊甩这画面不…