如何将环境变量传递给 nginx 中的前端 Web 应用程序？

Question

我正在使用 docker-compose 和其他人制作的图像，我想使用环境变量来动态分配它

docker-compose.yml

version: "3.7"

services:
  appfronted2:
    image: trafex/alpine-nginx-php7
    container_name: fronted2
    ports:
      - "80:8080"
    volumes:
      - ./fronted2:/var/www/html
    environment:
      - HOST_BACKEND=172.99.0.11
      - PORT_BACKEND=4000
    networks:
      tesis:
        ipv4_address: 172.99.0.13

这是我的 javascript，我想在其中获取变量，但我无法获取这些变量

api.js

const HOST = process.env.HOST_BACKEND || "127.0.0.1"
const PORT = process.env.PORT_BACKEND || "4000"

const URL_API = `http://${HOST}:${PORT}/api`

Answer 1

您正在使用 nginx Web 服务器容器来提供您的 html 和 JS 文件。 Web 服务器按原样将这些文件提供给浏览器。这与使用 npm start 不同，其中 Node 引擎动态地提供 HTML 和 JS 文件。

当您的 JS 文件在客户端浏览器上运行时，没有名为 process.env 的变量。

在 Create React 应用程序中查看 cmets 以了解以下问题可能会帮助您了解更多：

https://github.com/facebook/create-react-app/issues/2353

如果您没有更多的环境变量，最简单的解决方案是使用 window.location.hostname 并相应地准备或选择 API url。

app-config.js

let backendHost;

const hostname = window && window.location && window.location.hostname;

if(hostname === 'whatsgoodonmenu.com') {
  backendHost = 'https://api.whatsgoodonmenu.com';
} else {
  backendHost = 'http://localhost:8080';
}

export const API_ROOT = `${backendHost}`;

在组件中使用

import React from "react"
import {API_ROOT} from './app-config'

export default class UserCount extends  React.Component {
    constructor(props) {
        super(props);

        this.state = {
          data: null,
        };
    }

    componentDidMount() {
        fetch(`${API_ROOT}/count`)
            .then(response => response.json())
            .then(data => this.setState({ data }));
    }

    render(){
        return(
            <label>Total visits: {this.state.data}</label>
        );
    }
}