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

问题描述 投票:0回答:1

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

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}

我的问题是什么? 谢谢

docker docker-compose environment-variables vite
1个回答
0
投票

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

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

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