docker build 不考虑更改 .env

Question

我一直在尝试为一个项目制作一个 CI-CD pipline，我有 2 个后端，一个部署在其上http://141.9*.*****:8800/，另一个部署在其上vps-a******.*******:8800（出于安全原因，某些服务器链接被隐藏）

不管怎样，.env我 REACT_APP_SERVER_URL='http://vps-a******.*******:8800'只有这一行

这就是我的文档文件中的内容

#you have to build the app manually first
# production environment

# pull official base image
FROM node:16-alpine AS node-build

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH


# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm i --force
#RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

RUN npm run build --force

# production environment
FROM nginx:stable-alpine
COPY /build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 6100
CMD ["nginx", "-g", "daemon off;"]

我在 .env 中所做的事情并不重要，比如将其更改为localhost或141.****它始终连接到vps-a******.*******:8800

好吧，如果我手动构建应用程序并npm run build在终端中运行，然后构建它连接到我在 .env 中放入的任何链接的图像

我不能继续这样做（在构建图像之前在本地构建应用程序），因为我在 ci-cd pipline 上工作，我希望它通过 docker 文件完成，那么在使用 docker 文件构建应用程序时如何考虑 .env ？

Answer 1

请注意，我通常不使用 React，如果我说错了什么，请原谅。

您提到react-scripts的属性的外观让我认为您正在尝试向 React 应用程序提供自定义环境变量。

如果您使用生成器创建了应用程序，如文档create-react-app中所述，为了使此功能正常工作，您需要使用适当的版本并在应用程序根目录中创建一个文件，并在该文件中定义适当的变量。React 将识别以前缀开头的所有环境变量。正如你所做的那样。react-scripts.envREACT_APP_

这些变量将为 on 定义process.env。例如，在您的用例中，环境变量REACT_APP_SERVER_URL将在 JS 中公开为process.env.REACT_APP_SERVER_URL.

请注意，这create-react-app提供了 所公开功能的简化dotenv。请考虑阅读此相关的 SO 问题以获得更一般的用例解释。

如上述文档所示，重要的是要了解以下一般情况：

环境变量是在构建时嵌入的。

即，当编译应用程序、生成 HTML、JS 和 CSS 资源时，它将替换环境变量的占位符。

您首先使用docker 多阶段构建创建应用程序包，然后将其部署到nginx.

我假设您正在使用标准create-react-app目录结构：

my-app/
  README.md
  .env
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

注意我包含了所需的.env文件。

尽管我尝试提供简化版本，但您Dockerfile对我来说看起来不错，如下所示：

# pull official base image
FROM node:16-alpine AS node-build

# set working directory
WORKDIR /app

# install app dependencies, I normally do not use package-lock.json here
COPY package.json ./
# just, install the required stuff
RUN npm install

# now, build the app
# in this process is where the placeholders for your environment variables
# should be replaced by the information you defined inn your .env file
COPY ./src ./src
COPY ./public ./public
# explicitly copy your .env file
COPY .env ./
# perform the actual build. this will generate a /build folder
RUN npm run build

# production environment
FROM nginx:stable-alpine
# document where your app listen
EXPOSE 6100
# copy your nginx site configuration
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
# I always prefer to clean the nginx default web directory before 
# copying the SPA output
RUN rm -rf /usr/share/nginx/html/*
# copy the contents of your /build folder from your node-build image
# to the nginx web root dir. note in the code snippet you provided in your
# question you are not doing this
COPY --from=node-build /app/build/ /usr/share/nginx/html
# instruct your server to run in the foreground
CMD ["nginx", "-g", "daemon off;"]