我面临着一个奇怪的问题,我有这个.env

REACT_APP_URL=http://localhost:8080
REACT_APP_API_URL=http://localhost:4500/api
REACT_APP_VEHICLE_IMAGE_URL='URL'
REACT_APP_NAME=NAME
REACT_APP_GA_TRACKING_ID=

如果我使用npm start运行应用程序,变量将被正确识别.

如果我还try 在本地运行docker构建,而不从docker集线器拉出映像,则变量可以正常工作.以下是命令:

docker build . -t container
docker run -p 8080:8080 --env-file .env -d --name container--restart always container

它们被识别,应用程序使用这些变量运行.

This is the dockerfile:

FROM node:16-alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

RUN npm run build

EXPOSE 8080

CMD [ "npm", "run", "preview" ]

与此同时,每次我按下Master时,我都会在dockerHub中推送应用程序. 在这种情况下,变量无法识别:

docker pull user/repository_test
docker run -p 8080:8080 --env-file .env -d --name repo --restart always user/repository_test

变量没有被识别,这怎么可能呢?然而,我可以看到在判断中的docker中,变量在容器中传递,但在Reaction上未被识别.

The inspect from docker container, where env variables are not recognized

在顶部的图像上,是来自 docker 的判断容器,其中环境变量不被识别,但它们存储在容器上.

推荐答案

previous question相比,你现在使用的是React Vite application(而不是之前的Create React App).您现在更关心的是本地Docker版本和Docker Hub版本之间的差异,在本地版本中,环境变量被识别,而在Docker Hub版本中,环境变量不被识别.

如Imentioned before所示,React中的环境变量是在构建过程中嵌入的,而不是在运行时.这意味着,如果变量在构建Docker镜像时不可用,则在应用程序运行时它们也不会出现.

从Docker文件和您共享的工作流中,GitHub操作的构建过程没有使用任何环境变量.因此,在构建应用程序时,环境变量不会嵌入到构建中.

要解决这个问题,您需要确保在您的CI/CD管道中构建Docker映像时,环境变量在构建时可用.您可以使用build arguments在您的GitHub操作工作流中的Docker构建过程中传递环境变量.

# previous steps

- name: Build and push Docker image
  uses: docker/build-push-action@v2
  with:
    context: .
    push: true
    tags: user/repository_test:latest
    build-args: |
      REACT_APP_URL=${{ secrets.REACT_APP_URL }}
      REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }}
      REACT_APP_VEHICLE_IMAGE_URL=${{ secrets.REACT_APP_VEHICLE_IMAGE_URL }}
      REACT_APP_NAME=${{ secrets.REACT_APP_NAME }}

在您的Docker文件中,您应该在构建步骤之前声明这些参数:

在您的Docker文件中,您应该在构建步骤之前声明这些参数:

# previous content

ARG REACT_APP_URL
ARG REACT_APP_API_URL
ARG REACT_APP_VEHICLE_IMAGE_URL
ARG REACT_APP_NAME

# Use the ARGs as environment variables
ENV REACT_APP_URL=$REACT_APP_URL
ENV REACT_APP_API_URL=$REACT_APP_API_URL
ENV REACT_APP_VEHICLE_IMAGE_URL=$REACT_APP_VEHICLE_IMAGE_URL
ENV REACT_APP_NAME=$REACT_APP_NAME

RUN npm run build

# remaining content

您可以在GitHub存储库的秘密中设置实际的环境变量.

这样,您的环境变量将被包括在构建过程中,并且当您的Reaction应用程序在Docker容器中运行时,它将能够访问它们.

Reactjs相关问答推荐

在下一个js中使用ESTAccountWithEmailAndPassword函数时循环

React Context未正确更新

如何在REACTIVE js中动态添加或删除输入字段?

我如何在不被 destruct 的情况下将导航栏固定在顶部?

svg每条路径上的波浪动画

PWA:注册事件侦听器不会被触发

如果我使用 formik,如何在嵌套对象中写入正确的值?

如何在react 中过滤数组的数组?

Mui 在 TextField 标签上添加工具提示显示两个工具提示框

在React Router 6中,在路由渲染后更新路由数据

在按钮单击中将动态参数传递给 React Query

ReactJS 动态禁用按钮

React Native Realm 应用程序在发布构建后崩溃

如何保留我的下一个授权用户会话?所以我可以使用提供的 ID 在其他路由中获取数据

为什么接受 useState 返回的函数的 setter 在使用 React 的单个调用中执行两次?

如何避免在 react useEffect 上滚动时出现小的延迟?

如何将我的 ID 值传递给下一个组件?

从 API 中提取映射数组后出现重复元素

网格项不缩小以适应包含的可滚动列表

我在使用 Elements of stripe 时使用 React router v6