时间戳

首页 > 解决方案 > React process.env 无法读取 docker-compose.yml 中的环境变量

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

问题描述

我的 React 项目使用环境变量和 docker-compose.yml 中的变量。但无法从项目中读取它们。

码头工人-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

标签： reactjsdockerdocker-composeenvironment

解决方案

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

推荐阅读