API URL 更改后 npm 构建反应

Question

My React App communicates with a backend service using an API endpoint as follows:

const API_URL = process.env.REACT_APP_API_URL;
const response = await fetch(`${API_URL}/data`);

The environment variable REACT_APP_API_URL is saved in a .env file which looks like this:

REACT_APP_API_URL="http://1.2.3.4:8000"

When I serve the app using npm start everything works fine and the developer console shows that the call was made to the right URL:

Request URL: http://1.2.3.4:8000/data

I received the data as expected as well. But when I run npm run build and then serve the app with serve -s build/ -l 3000 the app fails to fetch because the request goes to the following URL:

Request URL: http://localhost:3000/1.2.3.4:8000/

What am I missing for this to happen?

Answer 1

So the problem was not with my React App or the environment variables but with the way I was serving the app

The listening argument -l in the serve command is the culprit. It should be -p for the port to host on

So the right command is

serve -s build/ -p 3000