前端快闪三:多环境灵活配置react
你已经使用Create React App脚手架搭建了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应用是作为静态资源运行在浏览器上,而浏览器并不知道有环境变量这个概念。
case1. 通过环境变量配置 react后端地址
Create React APP
脚手架创建了react应用,可通过全局的process.env
来获取环境变量。
process.env.NODE_ENV
在构建时被设置为production
。还可以使用
REACT_APP_
开头的环境变量来配置react构建时能用的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文件来固定存储环境变量值。
REACT_APP_SPECIAL_FEATURE=true
REACT_APP_API_HOST=default-host.com
上面的环境变量将会在development、test、production中加载,
如果你要为不同环境设置变量,可放置.env.development、env.test、.env.production 文件。
前端快闪三:多环境灵活配置react的更多相关文章
- 大前端快闪二:react开发模式 一键启动多个服务
最近全权负责了一个前后端分离的web项目,前端使用create-react-app, 后端使用golang做的api服务. npx create-react-app my-app cd my-app ...
- 大前端快闪:package.json文件知多少?
最近在公司某项目参与了一些前端工作,作为后端抠脚大汉,改点前端细节磕磕绊绊,改点大前端.工程化.HTTP交互倒也还能做到柳暗花明. 于是打算用后端程序猿的视角记录一些{大前端}的知识快闪,也算是帮助读 ...
- startup.bat闪退---tomcat环境变量配置中遇到的问题
常用的方法: 1.在已解压的tomcat的bin文件夹下找到startup.bat,右击->编辑.在文件头加入下面两行: SET JAVA_HOME=D:\Java\jdk1.6.0_10 ...
- 快速学习C语言三: 开发环境, VIM配置, TCP基础,Linux开发基础,Socket开发基础
上次学了一些C开发相关的工具,这次再配置一下VIM,让开发过程更爽一些. 另外再学一些linux下网络开发的基础,好多人学C也是为了做网络开发. 开发环境 首先得有个Linux环境,有时候家里机器是W ...
- 基于thinkphp5框架做一个可以区别开发、测试、生产三种环境的配置加载
在日常的开发测试中我们经常会遇到本地开发和测试或者线上配置参数不同的场景,必要你要是使用一个三方的支付,它的本地测试和线上的key值或者账号存在不同.最基本的做法是本地用测试参数,提交到测试的时候再改 ...
- 前端快闪四: 拦截axios请求和响应
马甲哥继续在同程艺龙写一点大前端: 今天我们来了解一下 如何拦截axios请求/响应? axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C ...
- JDK1.8下载与安装及环境变量配置
一.在Oracle官网下载及安装JDK1.8 1.输入Oracle官网地址 www.oracle.com 2.出现Oracle界面后点击 Downloads 3.点击 Java 4.点击 Java ( ...
- spring boot profiles 实现多环境下配置切换 docker版
1,前言 开发环境总需要调试,docker直接部署不需要调试,环境配置不一样,这里的目的只是,在docker文件环境与开发环境使用不同的配置文件,项目结构如下 2,设置项目配置文件 默认配置文件 ap ...
- Python 安装与环境变量配置
一.软件下载 Python安装包下载地址:https://www.python.org/ 二.安装过程(略) 三.环境变量配置: 方法一:使用cmd命令添加path环境变量 在cmd下输入: path ...
随机推荐
- springmvc学习日志四
一.回顾 1.文件上传 1.1引入fileupload的jar包 1.2在springmvc的配置文件中引入CommonsMutilpartResolver文件上传解析器 1.3在控制层在写入代码 2 ...
- mzy,struts学习(一)
大家都在讲struts已经过时了,现在都是前后台分离,没有必要去学一个淘汰的框架,但是怎么讲呢?我觉得,struts能够流行那么多年,肯定有它的原因,肯定有很多优秀和好的地方,有一个指导过我的人给我讲 ...
- JDK1.5新特性之注解
时间:2017-1-2 20:14 --注解的概述 注释是给人看的,而注解是给程序(框架)看的. 在Servlet3.0中可以使用注解来替代配置文件,开发者就不用再写配置文件了,而是写注解 ...
- 正整数a、b、c、d满足ab=cd,则a+b+c+d必定为合数。
正整数a.b.c.d满足ab=cd,则a+b+c+d必定为合数. 证法一:记s=a+b+c+d.如果四个数全为1,s=4,显然是合数.考虑四个数非全1的情形,由对称性,不妨令a>1. 设p是a的 ...
- Selenium4 IDE初体验
今天闲来无事,尝试了一番Selenium4的IDE,提供了录制和回放的功能.下面是对它的简单介绍. 安装 下载地址:https://www.selenium.dev/selenium-ide/ 在下载 ...
- MyBatis学习总结(四)——字段名与实体类属性名不相同的冲突的解决
表中的字段名和表对应实体类的属性名称不一定都是完全相同的,这种情况下的如何解决字段名与实体类属性名不相同的冲突.如下所示: 一.准备演示需要使用的表和数据 CREATE TABLE my_user( ...
- K8S——Pod
一.Pod概念 二.Pod存在的意义 三.Pod的实现机制 四.Pod镜像拉取策略 五.Pod资源限制 六.Pod重启机制 七.Pod的健康检查 八.Pod调度策略(创建Pod流程)
- ABP 极简入门教程(二 MVC方式显示数据)
增加显示菜单 Sample.Web.MVC项目中找到startup目录打开SampleNavigationProvider.cs,根据现有内容添加以下内容 .AddItem( new MenuItem ...
- Nginx:常用基本命令与异常处理
Nginx日志 - ./nginx-1.6.0-ems/logs/nginx.pid Nginx启动时应该使用cmd等命令行工具启动,双击启动同样会产生进程但会造成异常,判断条件是 ./nginx-1 ...
- JS004. 获取数组最后一个元素且不改变数组的四种方法
TAG: Array.length Array.prototype.reverse() Array.prototype.slice() Array.prototype.pop() Array对象 - ...