前端快闪三:多环境灵活配置react
大前端快闪:package.json文件知多少?
大前端快闪二:react开发模式 一键启动多个服务
你已经使用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=true
REACT_APP_API_HOST=default-host.com
上面的环境变量打包后将会在development、test、production生效。
如果你要为不同环境设置变量,可放置.env.development、env.test、.env.production 文件。
再提醒一句:环境变量不仅可以用来配置后端基地址,还可以灵活的作为react app业务配置。
性感豹纹
鹅厂二面,Nginx回忆录
前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)
前端镜像打包这么慢,你该反省一下
谁说docker-compose不能水平扩展容器、服务多实例?
面试官:单点登录你搞过吗?
难缠的布隆过滤器,这次终于通透了
引用链接
[1]
Create React App: https://github.com/facebook/create-react-app
前端快闪三:多环境灵活配置react相关推荐
- 大前端快闪二:react开发模式 一键启动多个服务
最近全权负责了一个前后端分离的web项目,前端使用create-react-app[1], 后端使用golang做的api服务. npx create-react-app my-app cd my-a ...
- vue在生产环境、测试环境和开发环境,三种环境下配置不同的api地址
vue在生产环境.测试环境和开发环境,三种环境下配置不同的api地址 我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同 ...
- 大前端快闪:package.json文件知多少?
最近在公司某项目参与了一些前端工作,作为后端抠脚大汉,改点前端细节磕磕绊绊,改点大前端.工程化.HTTP交互倒也还能做到柳暗花明. 于是打算用后端程序猿的视角记录一些{大前端}的知识快闪,也算是帮助读 ...
- React系列---Webpack环境搭建(二)不同环境不同配置
React系列---Webpack环境搭建(一)手动搭建 React系列---Webpack环境搭建(二)不同环境不同配置 React系列---Webpack环境搭建(三)打包性能优化 实际项目中,往 ...
- Python 安装与环境变量配置
一.软件下载 Python安装包下载地址:https://www.python.org/ 二.安装过程(略) 三.环境变量配置: 方法一:使用cmd命令添加path环境变量 在cmd下输入: path ...
- JDK1.8下载与安装及环境变量配置
一.在Oracle官网下载及安装JDK1.8 1.输入Oracle官网地址 www.oracle.com 2.出现Oracle界面后点击 Downloads 3.点击 Java 4.点击 Java ( ...
- JDK软件安装+环境变量配置图文详解(Win10环境)
一.官网下载安装包:https://www.oracle.com/java/technologies/downloads/ (需要登录Oracle账号才能开始下载的,没有账号可用邮箱新注册一个) 二 ...
- JAVA JDK的环境变量配置(配有图片,超级详细)
一.环境准备 Windows10 jdk1.8.0_25 二.下载并安装JDK 选择一个适合自己的JDK版本下载并安装即可,具体流程不详述. 三.环境变量配置 1.右键桌面上"我的电脑&qu ...
- jdk8安装教程及环境变量配置
目录 一.JDK下载 二.安装JDK 三.环境变量配置 四.测试环境变量 一.JDK下载 1.JDK下载地址:Java Downloads | Oraclehttps://www.oracle.com ...
最新文章
- 计算机视觉在生物力学和运动康复中的应用和研究
- 内存的使用和优化的注意事项
- jpa 与非jpa 结合_EasyCriteria –使用JPA标准的简便方法
- EJB3.0学习笔记---理解远程调用服务端和本地调用服务端的区别
- java创建一个图形类getv_java建立类和对象分糖果
- leetcode python3 简单题205. Isomorphic Strings
- linux运维正则表达式技术分享
- Java语言程序设计(一)简答题和论述题
- 次小生成树的某些结论及其算法O(V^2)
- 1.2 控制器 view 的创建和加载
- python二级题库刷题训练
- matlab 离散求偏导,matlab怎么求离散曲面的偏导数
- ABAP 去重 delete adjacent duplicates
- 使用搜索引擎时如何去除广告推荐
- 高斯公式_证明_高数
- MATLAB colormap函数详解
- 图片转字符画(python)
- 英国名校TOP10对Alevel成绩要求汇总
- OpenGL入门:窗口开启、改变窗口背景颜色
- Resistors in Parallel(找规律+大数)