Dockerfile中基于构建参数通过If-Else条件设置环境变量失效问题的修复方案

我看了你的Dockerfile和构建命令，发现几个关键问题导致环境变量始终指向开发环境，咱们一步步来修复：

问题分析 #

1. .env文件被重复覆盖：你使用>写入.env时，每次都会清空文件重新写入，最后只有最后一条变量生效，前面的配置全部丢失。
2. Shell命令的引号错误：Dockerfile中的shell语句不需要转义引号，你写的[\"$app_stage\" = \"dev\"]会导致条件判断失效。
3. 生产环境条件不匹配：你生产构建时传入的是app_env=production，但原if语句只判断了dev，虽然else分支会触发，但逻辑不够严谨，容易出现意外情况。
4. 未定义的变量引用：你在脚本里引用了REACT_APP_WALLET_BASE_URL等变量，但这些变量并没有在ARG/ENV中声明，会导致.env里出现空值。

修改后的Dockerfile #

# pull the base image
FROM node:alpine as build
# set the working direction
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY yarn.lock ./
RUN yarn
# add app
COPY . ./
# define environment variables
# 补全缺失的Wallet和Transaction相关ARG
ARG REACT_APP_BASE_URL=https://service.dev.localhost.com
ARG REACT_APP_SERVICES_BASE_URL=https://services.dev.localhost.com
ARG REACT_APP_WALLET_BASE_URL=https://wallet.dev.localhost.com
ARG REACT_APP_TRANSACTION_BASE_URL=https://transaction.dev.localhost.com
ARG REACT_APP_BASE_URL_PROD=https://service.localhost.com
ARG REACT_APP_SERVICES_BASE_URL_PROD=https://services.localhost.com
ARG REACT_APP_WALLET_BASE_URL_PROD=https://wallet.localhost.com
ARG REACT_APP_TRANSACTION_BASE_URL_PROD=https://transaction.localhost.com
ARG app_env=dev # 设置默认值，避免未传参时出错

# 先清空.env文件，避免残留旧配置
RUN rm -f .env

# 根据app_env设置对应的环境变量到.env
RUN if [ "$app_env" = "dev" ]; then \
    echo "REACT_APP_BASE_URL=$REACT_APP_BASE_URL" >> .env; \
    echo "REACT_APP_WALLET_BASE_URL=$REACT_APP_WALLET_BASE_URL" >> .env; \
    echo "REACT_APP_TRANSACTION_BASE_URL=$REACT_APP_TRANSACTION_BASE_URL" >> .env; \
elif [ "$app_env" = "production" ]; then \
    echo "REACT_APP_BASE_URL=$REACT_APP_BASE_URL_PROD" >> .env; \
    echo "REACT_APP_WALLET_BASE_URL=$REACT_APP_WALLET_BASE_URL_PROD" >> .env; \
    echo "REACT_APP_TRANSACTION_BASE_URL=$REACT_APP_TRANSACTION_BASE_URL_PROD" >> .env; \
else \
    echo "Unknown app_env: $app_env, falling back to dev" >> .env; \
    echo "REACT_APP_BASE_URL=$REACT_APP_BASE_URL" >> .env; \
    echo "REACT_APP_WALLET_BASE_URL=$REACT_APP_WALLET_BASE_URL" >> .env; \
    echo "REACT_APP_TRANSACTION_BASE_URL=$REACT_APP_TRANSACTION_BASE_URL" >> .env; \
fi

CMD ["yarn", "start"]

关键修改说明 #

• 补全了REACT_APP_WALLET_BASE_URL和REACT_APP_TRANSACTION_BASE_URL的开发/生产ARG，避免变量未定义的问题。
• 把>改成>>来追加内容到.env，不会覆盖之前的变量。
• 修正了if语句的引号，去掉不必要的转义符。
• 增加了production的明确判断，同时添加默认值和错误分支，增强鲁棒性。
• 构建前先删除旧的.env文件，避免本地拷贝的.env影响构建结果。

验证构建与运行 #

开发环境构建 #

docker build --build-arg app_env=dev -t app-dev .

生产环境构建 #

docker build --build-arg app_env=production -t app-prod .

注意事项 #

你运行开发镜像时挂载了本地目录-v {$PWD}:/app，这会导致本地的.env文件覆盖容器内构建生成的.env。如果需要使用容器内的配置，建议去掉这个挂载，或者确保本地.env文件符合预期。

内容的提问来源于stack exchange，提问作者codebarz