你已经使用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来获取环境变量。

  1. process.env.NODE_ENV在构建时被设置为production

  2. 还可以使用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的更多相关文章

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

    最近全权负责了一个前后端分离的web项目,前端使用create-react-app, 后端使用golang做的api服务. npx create-react-app my-app cd my-app ...

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

    最近在公司某项目参与了一些前端工作,作为后端抠脚大汉,改点前端细节磕磕绊绊,改点大前端.工程化.HTTP交互倒也还能做到柳暗花明. 于是打算用后端程序猿的视角记录一些{大前端}的知识快闪,也算是帮助读 ...

  3. startup.bat闪退---tomcat环境变量配置中遇到的问题

    常用的方法: 1.在已解压的tomcat的bin文件夹下找到startup.bat,右击->编辑.在文件头加入下面两行: SET JAVA_HOME=D:\Java\jdk1.6.0_10   ...

  4. 快速学习C语言三: 开发环境, VIM配置, TCP基础,Linux开发基础,Socket开发基础

    上次学了一些C开发相关的工具,这次再配置一下VIM,让开发过程更爽一些. 另外再学一些linux下网络开发的基础,好多人学C也是为了做网络开发. 开发环境 首先得有个Linux环境,有时候家里机器是W ...

  5. 基于thinkphp5框架做一个可以区别开发、测试、生产三种环境的配置加载

    在日常的开发测试中我们经常会遇到本地开发和测试或者线上配置参数不同的场景,必要你要是使用一个三方的支付,它的本地测试和线上的key值或者账号存在不同.最基本的做法是本地用测试参数,提交到测试的时候再改 ...

  6. 前端快闪四: 拦截axios请求和响应

    马甲哥继续在同程艺龙写一点大前端: 今天我们来了解一下 如何拦截axios请求/响应? axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C ...

  7. JDK1.8下载与安装及环境变量配置

    一.在Oracle官网下载及安装JDK1.8 1.输入Oracle官网地址 www.oracle.com 2.出现Oracle界面后点击 Downloads 3.点击 Java 4.点击 Java ( ...

  8. spring boot profiles 实现多环境下配置切换 docker版

    1,前言 开发环境总需要调试,docker直接部署不需要调试,环境配置不一样,这里的目的只是,在docker文件环境与开发环境使用不同的配置文件,项目结构如下 2,设置项目配置文件 默认配置文件 ap ...

  9. Python 安装与环境变量配置

    一.软件下载 Python安装包下载地址:https://www.python.org/ 二.安装过程(略) 三.环境变量配置: 方法一:使用cmd命令添加path环境变量 在cmd下输入: path ...

随机推荐

  1. 判断宽度的js

    <script language="javascript" type="text/javascript">/*将获取的值存到变量里*/width_s ...

  2. Spring笔记(3)

    一.JDBC Template基本使用 1.开发步骤 1.1直接使用template 导入spring-jdbc和spring-tx坐标 <!-- JDBC--> <dependen ...

  3. eclipse建立c语言工程以及成功下载到FPGA芯片过程遇到的各种问题以及解决方法详解

    推荐大家预先建立好一个工程目录文件夹,确实挺好用,参考正点原子的pdf教程,如下图所示, 我们eclipse在software文件夹建立一个workspace即可 选择用helloworld模板建立工 ...

  4. Python中的私有属性私有方法、类属性类方法以及单例设计模式

    私有属性是对象不希望公开的属性,私有方法是对象不希望公开的方法.在定义私有属性和私有方法时,在属性或者方法前,加上__(两个下划线) 公有方法可以通过对象名直接调用,私有方法不能通过对象名直接调用,只 ...

  5. Mysql force index和ignore index 使用实例

    前几天统计一个sql,是一个人提交了多少工单,顺便做了相关sql优化.数据大概2000多w. select CustName,count(1) c from WorkOrder where Creat ...

  6. Docker编排工具Docker Compose的使用

    一.安装docker compose 官网推荐方式之一: sudo curl -L "https://github.com/docker/compose/releases/download/ ...

  7. 解决FTPClient下载网络文件线程挂起问题

    今天在windows上调试FTP下载文件时,出险线程假死,代码如下: if (inputStream != null) { byte[] data = null; ByteArrayOutputStr ...

  8. C# Dapper基本三层架构使用 (三、DAL)

    数据访问层(DAL),主要是存放对数据类的访问,即对数据库的添加.删除.修改.更新等基本操作 首先需要在UI层App.Config配置文件中增加连接字符串,如下所示 <connectionStr ...

  9. ES6:使用解构赋值仅用一行定义多个相同的数组,且指向堆不同(解构赋值)

    在开发过程中我们经常要用到一些临时变量对数据进行一些特殊处理,由于良好的编码习惯要在临时变量用完后释放内存,所以当临时变量数量较多时,整体代码会变得冗余. let a = [] let b = [] ...

  10. python3.x内置函数

    函数 返回值类型 函数详情 abs(x) int|float 求绝对值,若是复数则返回复数的模 all(iterable) bool 若所有元素为真则返回True(非0,非空,非None) any(i ...