关于create-react-app打包上线的问题

Question

我的问题是开发环境和生产环境请求的api前缀是不一样的

例如：
开发请求地址：192.168.1.100:3000/login
生产请求地址：192.168.1.200:3000/login

那么需要一种方式来区分不同环境使用的地址前缀，网上我看了两种方式

1。根据process.env.NODE_ENV变量，给axios设置baseURL

const getBaseUrl = () => {
    const ENV = process.env.NODE_ENV;
    if(ENV === 'development'){
        return 'http://192.168.1.100:3000';
    }else if(ENV === 'production'){
        return 'http://192.168.1.200:3000';
    }
}
const instance = axios.create({
    baseURL: getBaseUrl(),
    timeout: 10000
});

2。直接给axios的baseURL写死为上线环境的地址，然后开发环境代理到测试服务器

"proxy": "http://192.168.1.100:3000"

想问下大家在项目中是怎么处理的？

Answer 1

创建一个config.js 里面写入:

 baseUrl: {
        dev: 'http://xxxxxx/api/v1/',
        pro: 'https://xxxxx/api/v1/'
    },

在创建一个http.js

其中引入axios 和config

axios.baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro;

Answer 2

在实际项目中我都使用的第一种方法，足够灵活，如果是部署到后端提供的静态资源渲染服务里，而不是单独部署前端的话，可以选用第二种方式。

Answer 3

我是这么处理的

页面所有的请求前缀都是相对路径/

在测试环境中，所有的请求都会代理到http://192.168.1.100:3000

"proxy": "http://192.168.1.100:3000"

如果是生成环境，比如说最后的后台服务器是http://192.168.1.200:3000，

• 如果把打包后的页面放在该服务器下，所有的请求也会请求到http://192.168.1.200:3000
• 如果你没有放在后台服务器目录下面，那么你需要单独做一次代理转发，可以用nodejs或者Nginx，根据一定的规则来匹配，比如你的请求中可能都会包含一个api,就可以以该字段作为匹配

nodejs方式（koa）

const Koa = require('koa');
const proxy = require('koa-proxy');
const app = new Koa();
app.use(proxy({
    host: 'http://192.168.1.200:3000',
    match: /^\/api\// 
}));
http.createServer(app.callback()).listen(80);

nginx方式

server {
       listen       80;
       server_name  192.168.1.300:3000;
       location / {
            root   html;
            index  index.html index.htm;
       }
       location /api {
            proxy_pass 192.168.1.200:3000; #以/api开头的请求代理到192.168.1.200:3000
        }
    }

Answer 4

做前后端分离的的项目，通用的解决方案就是第一种，有的公司将功能模块分化，会提供很多api接口，每个人负责一个。结合git或svn版本管理，实现对项目的细粒度控制。

Answer 5

项目中通常使用第一种：Just Keep Simple

原因如下：

1. 第一种前后端分离度高
2. 第一种代码易懂，语意明确
3. 第二种需要在前端修改配置文件（如果你使用webpack）进行代理转发；或者自己启动一个转发服务器。太麻烦了。