Fargate 上的 React App 忽略环境变量

Question

我使用带有负载均衡器的 Fargate 部署了我的 React 应用程序和后端，我注意到我的 React 应用程序使用了错误的端点来访问我的 API，它似乎正在使用它的负载均衡器的 DNS 名称，因为它是端点，即使此端点是使用环境变量配置的（在 React 应用程序上，所以这将是 REACT_APP_API_URL）。

在我的本地机器上，这个容器工作正常并且能够连接到我的后端。这里显示了正确的端点。

如果我要运行 Fargate 中的这个完全相同的图像，则会显示错误的端点，这实际上是 URL 访问我的网络应用程序。

并且我在我的任务定义中配置了正确的端点，它与图 1 中所示的正确端点相匹配。我还确保该服务正在使用该端点的最新任务定义。

如果需要，这是我的 docker 文件。

# The first image is for compiling the client files, the second is for serving.

# BUILD IMAGE
FROM node:14-alpine as build-stage

WORKDIR /app

# Install dependencies
COPY package*.json ./

RUN npm install
RUN npm install cross-env -g
RUN npm install npm install @craco/craco -g

# Build
COPY . .
RUN npm run build

# -----------------------------------------------------------------------------
# SERVING IMAGE
FROM fitiavana07/nginx-react

# Copy built files
COPY --from=build-stage /app/build /usr/share/nginx/html

# 80 for HTTP
EXPOSE 80

# Run nginx
CMD nginx -g 'daemon off;'

Answer 1

原来我是个白痴哈哈，你需要在项目的根目录下有一个 .env 文件，这意味着你不能将环境变量传递给 docker 图像。我设法通过在我的 docker 文件上创建 .env 来克服这个问题。

# The first image is for compiling the client files, the second is for serving.

# BUILD IMAGE
FROM node:14-alpine as build-stage

WORKDIR /app

# Install dependencies
COPY package*.json ./

RUN npm install
RUN npm install cross-env -g
RUN npm install npm install @craco/craco -g

# Build
COPY . .

# Create a .env for react app
# Define a required build arg
ARG api_url
# Create a .env file
RUN touch .env
# Write the api url into the env file
RUN echo REACT_APP_API_URL=${api_url} > .env

RUN cat .env

RUN npm run build

# -----------------------------------------------------------------------------
# SERVING IMAGE
FROM fitiavana07/nginx-react

# Copy built files
COPY --from=build-stage /app/build /usr/share/nginx/html

# 80 for HTTP
EXPOSE 80

# Run nginx
CMD nginx -g 'daemon off;'

在我的 GitHub 操作中，我使用此 action 来动态设置此构建参数

Fargate 上的 React App 忽略环境变量

React App on Fargate is ignoring env variable

reactjs

amazon-web-services

docker

nginx

aws-fargate