About the problem of create-react-app packing and launching

my problem is that the api prefixes requested by the development environment and the production environment are not the same

for example:
Development request address: 192.168.1.100:3000/login
production request address: 192.168.1.200:3000/login

then we need a way to distinguish between address prefixes used in different environments. I have seen two ways on the Internet

1. Set baseURL

to axios according to the process.env.NODE_ENV variable
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. Directly write the address of the online environment to the baseURL of axios, and then the development environment proxies to the test server

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

how do you deal with the project?

Oct.07,2021

create a config.js to write:

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

creating a http.js

where axios and config are introduced

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

the first method I use in actual projects is flexible enough to choose the second method if it is deployed to the static resource rendering service provided by the back end instead of deploying the front end separately.


that's how I handle it

all request prefixes on the page are relative paths /

in the test environment, all requests are proxied to http://192.168.1.100:3000

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

if it is a build environment, for example, the last background server is http://192.168.1.200:3000,

  • if the packaged page is placed under this server, all requests will also be requested to http://192.168.1.200:3000
  • if you don't put it in the backend server directory, you need to do a proxy forwarding separately. You can use nodejs or Nginx to match according to certain rules. For example, if your request may contain a api , you can use this field as a match
  • .

nodejs mode (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 mode

 

the first: Just Keep Simple is usually used in projects

the reasons are as follows:

  1. the first method has high front and rear separation
  2. the first code is easy to understand and the meaning is clear
  3. the second needs to modify the configuration file at the front end (if you use webpack ) for proxy forwarding, or start your own forwarding server. It's too much trouble.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2c64c-2bb17.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2c64c-2bb17.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?