React process.env无法读取docker-compose.yml中的环境变量

Question

我的React项目使用环境变量，并且docker-compose.yml中存在这些变量。 但无法从项目中读取它们。

docker-compose.yml

version: '3.4'
services:
  frontend:
    build: 
      context: .
      target: app
    environment:
      - API_PROTOCOL=http
      - API_HOST=localhost
      - API_PORT=10000
    volumes:
      - app-volume:/share
    command: cp -R ./build /share
...
/* Ngnix Setting */
...
volumes:
  app-volume:

api.js

export const API_PROTOCOL = process.env.API_PROTOCOL || 'http';
export const API_HOST = process.env.API_HOST || 'localhost';
export const API_PORT = process.env.API_PORT || '8080';
export const getAPIUrl = () => {
  return `${API_PROTOCOL}://${API_HOST}:${API_PORT}`
};

然后我使用console.log(getAPIUrl());打印。

但是它显示如下的默认值。

输出

http://localhost:8080

Answer 1

您必须创建以REACT_APP_开头的自定义环境变量。除NODE_ENV以外的任何其他变量都将被忽略，以避免意外地在机器上公开可能具有相同名称的私钥。更改任何环境变量将需要您重新启动开发服务器（如果正在运行）。