无法读取 Docker 化的 React 应用程序中的环境变量

Question

我使用创建了一个演示反应应用程序

npm create vite

我将

App.tsx

更改如下：

function App() {

  console.log('!!!!!!!!!!!!!!!!!!')
  console.log(JSON.stringify(import.meta.env))
  console.log('!!!!!!!!!!!!!!!!!!')

  return (
    <h1>MY APP</h1>
  )
}

export default App

我想传递几个环境变量，特别是后端 URL。 我尝试过多种方式来通过。

我的

Dockerfile

：

FROM nginx:latest AS BASE

# trying setting variable in dockerfile
ENV REACT_APP_BACKEND_URL5=http://www.five.com

# trying to take varibles from environment or args, as I have seen in different posts
ARG REACT_APP_BACKEND_URL1
ARG REACT_APP_BACKEND_URL3
ENV REACT_APP_BACKEND_URL1 $REACT_APP_BACKEND_URL1
ENV REACT_APP_BACKEND_URL3 $REACT_APP_BACKEND_URL3

#delete default welcome page
RUN rm -rf /user/share/nginx/html/*

# copying the built app
COPY ./dist /usr/share/nginx/html

# exposing the port where nginx is listening to the outside
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

我的

docker-compose.yml

：

version: '3.7'

services:
  myapp:
    container_name: app_front
    build:
      context: .
      args:
        - REACT_APP_BACKEND_URL3=http://www.three.com
        - REACT_APP_BACKEND_URL4=http://www.four.com
    ports:
      - 8080:80
    environment:
      - REACT_APP_BACKEND_URL1=http://www.one.com
      - REACT_APP_BACKEND_URL2=http://www.two.com

我如何运行应用程序：

npm run build
docker-compose up

在新创建的容器中打开终端时，

echo $REACT_APP_BACKEND_URL<NUMBER>

返回除 #4 之外的所有变量的预期值。 所以变量确实是在容器中设置的。 但是，当打开

localhost:8080

并查看控制台时，我只能看到

{"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false}

我的问题是什么？ 谢谢

Answer 1

Vite 和其他构建工具读取您的环境变量，并用其值替换代码中的引用。含义：构建时间的值已经硬编码到您的 JavaScript 构建中，并且只能通过大量努力才能更改。这是因为 JavaScript 在用户的浏览器中运行，并且用户无权访问 docker 容器中的环境变量。

你现在做什么？ 您需要以某种方式从其他地方获取后端网址。 有多种方法可以实现它。 我不知道这是否可以称为最佳实践，但这是我通常如何实现可以在运行时配置的反应构建：

1. 我在后端创建了一个中间件，当我打开以 /config.json 结尾的 URL 时，它会返回适用于前端的配置。里面是一个计算/配置的后端 url
2. 每次打开 React 页面时，浏览器都会向 /config.json 发出请求（必须将 nginx 配置为将 /config.json 重定向到后端；在开发中使用硬编码的 url）
3. 浏览器（反应代码）保存收到的 url 并将其用于将来的每个请求