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?

Html5 react.js javascript
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. 

  2.  the first code is easy to understand and the meaning is clear 
    3. 

  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. 
    4.

Previous: Questions about Android starting the service

Next: VUE request for uploading pictures did not respond to Provisional headers are shown

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu