如何通过在 docker-compose.yaml 中传递 env_file 从 docker 文件容器重建 create-react-app

Question

我会尽量描述性强，但我有一个用 creat-react-app 从这个应用程序构建的 React 应用程序，我构建了一个 docker 图像。

dockerfile

FROM node:17-alpine

# set working directory
WORKDIR /app

# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./

RUN apk add --no-cache --virtual .gyp python3 make g++ \
    && yarn install \
    && apk del .gyp

# Copies everything over to Docker environment
COPY . ./
RUN yarn build-docker

#install serve package
RUN yarn global add serve

EXPOSE 3000 5000
ENTRYPOINT ["serve", "-s", "build"]

使用项目中包含的 .env 文件在本地运行良好。对于我们的生产和开发，我们使用 docker-compose 并在我们的 docker-compose.yaml

中包含 env_file

docker-compse.yaml样本

app:
    container_name: app
    image: {image_source}
    restart: always
    env_file:
      - env/app.env

api:
    container_name: api
    image: {image_source}
    restart: always
    env_file:
      - env/global.env
      - env/db.env

api 工作正常，因为它使用 ENTRYPOINT ["npm", "start"] 并在每次启动时重新加载 .env 文件，但由于 app 是在 [=23] 之前构建的=],

他们是一种使用 yarn build-docker 和 docker-compose 进行重建的方法吗，这样我的新版本就可以获得正确的 .env 文件？

Answer 1

我终于找到了解决问题的方法。

我没有在容器内构建应用程序，而是在 package.json 中链接了两个操作，并简单地运行在服务之前构建。

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build-docker": "react-scripts --openssl-legacy-provider build",
    "build-start": "react-scripts --openssl-legacy-provider build && serve -s build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

"build-start": "react-scripts --openssl-legacy-provider build && serve -s build"

并且在 docker 文件中我删除了 yarn build-docker 并将入口点更改为 ENTRYPOINT ["npm", "run", "build-start"]

docker文件

FROM node:17-alpine

# set working directory
WORKDIR /app

# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./

RUN apk add --no-cache --virtual .gyp python3 make g++ \
    && yarn install \
    && apk del .gyp

# Copies everything over to Docker environment
COPY . ./

##### REMOVED THE FIRST BUILD 
#RUN yarn build-docker 

#install serve package
RUN yarn global add serve

EXPOSE 3000 5000
##### CHANGED THE ENTRYPOINT WITH THE NEW SCRIPT
ENTRYPOINT ["npm", "run", "build-start"]

所以每次它上升到 docker-compose 时都会在构建过程中使用 .env。

希望这对某人有所帮助！

如何通过在 docker-compose.yaml 中传递 env_file 从 docker 文件容器重建 create-react-app

How to rebuild create-react-app from a dockerfile container by passing env_file in docker-compose.yaml

environment-variables

docker

docker-compose

create-react-app

docker-compse.yaml样本

package.json

docker文件