Question

我目前正在使用Docker开发CRA应用程序。一切都在发展中。但是，当我要创建生产版本时（我在生产版本中使用单独的docker-compose.yml文件），它总是告诉我找不到文件。

我不断得到Cannot find module: 'lorem.scss'. Make sure this package is installed.，它发生在建筑环境中yarn run build之后。

我的Dockerfile：

##############################
# Base Image
##############################
# Ger current Node Alpine Linux image.
FROM node:alpine AS base
# Set working directory.
WORKDIR /home/node/app/
# Copy project content.
COPY package.json ./

##############################
# Development Image
##############################
# Development environment.
FROM base AS development
# Run yarn to install.
RUN yarn
# Copy source code.
COPY ./src/ /home/node/app/src/
COPY ./public/ /home/node/app/public/
# Copy Storybook files.
COPY ./stories/ /home/node/app/stories/
COPY ./.storybook/ /home/node/app/.storybook/
# Run the app.
CMD [ "yarn", "run", "dev" ]

##############################
# Building Environment
##############################
# Building environment set.
FROM base AS builder
# Run yarn to install.
RUN yarn
# Copy source code.
COPY ./src/ /home/node/app/src/
COPY ./public/ /home/node/app/public/
# Run the build.
RUN yarn run build

##############################
# Production Image
##############################
FROM nginx:alpine AS production
# Copy source code.
COPY --from=builder /home/node/app/build /usr/share/nginx/html
# Copy nginx configuration template.
COPY ./nginx.template /etc/nginx/conf.d/
# Set permissions so nginx can serve it.
RUN chown nginx.nginx /usr/share/nginx/html/ -R

我的docker-compose.production.yml文件：

version: "3.7"
services:
##############################
# Front-End Container
##############################
  frontend:
    container_name: ${PROJECT_NAME}_frontend
    build:
      context: ./frontend/
      target: production
    restart: always
    environment:
      - PROJECT_NAME=${PROJECT_NAME}
      - NODE_PATH=${REACT_NODE_PATH}
      - NODE_PORT=${NODE_PORT}
      - SASS_PATH=${SASS_PATH}
      - NODE_ENV=production
      - DOCKER_BUILDKIT=1
    command: /bin/ash -c "envsubst < /etc/nginx/conf.d/nginx.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"
    expose:
      - "80"
    ports:
      - "80:80"

.env文件中的变量如下：

SASS_PATH=node_modules:src/components:src/assets/styles:src/assets/fonts
REACT_NODE_PATH=src/assets/styles/pages:src/assets/images

Answer 1

您的development图层包含

CMD [ "yarn", "run", "dev" ]

，这意味着最终图像的实例将运行dev脚本。您可能想要类似

FROM base AS development
...
ENTRYPOINT [ "yarn", "run" ]
CMD [ "dev" ]

FROM nginx:alpine AS production
...
CMD [ "prod" ]

潜在的问题是，您尝试将开发映像和生产映像同时填充到同一Dockerfile中。

多阶段Dockerfile通常用于避免构建实用程序占用生产映像的空间（并扩大攻击面）。另外，运行所有单元/验收测试的中间层可以确保如果测试失败，则不会产生图像。

如果需要单独的开发映像，请参见multistage build documentaiton的“在特定构建阶段停止”部分。

Answer 2

您的问题是您希望将环境文件传递到docker构建中。虽然没有发生这种情况。您定义的environment仅在运行时作为运行时环境传递到映像。

因此，您需要使用构建参数或在映像中设置这些环境

通过环境

##############################
# Building Environment
##############################
# Building environment set.
FROM base AS builder
# Run yarn to install.
RUN yarn
# Copy source code.
COPY ./src/ /home/node/app/src/
COPY ./public/ /home/node/app/public/
# Run the build.
ENV SASS_PATH=node_modules:src/components:src/assets/styles:src/assets/fonts REACT_NODE_PATH=src/assets/styles/pages:src/assets/images
RUN yarn run build

或者您需要使用build args

##############################
# Building Environment
##############################
# Building environment set.
FROM base AS builder
# Run yarn to install.
RUN yarn
# Copy source code.
COPY ./src/ /home/node/app/src/
COPY ./public/ /home/node/app/public/
# Run the build.
ARG SASS_PATH
ARG REACT_NODE_PATH
ENV SASS_PATH=${SASS_PATH}
ENV REACT_NODE_PATH=${REACT_NODE_PATH}
RUN yarn run build

并像这样更新您的撰写文件

version: "3.7"
services:
##############################
# Front-End Container
##############################
  frontend:
    container_name: ${PROJECT_NAME}_frontend
    build:
      context: ./frontend/
      target: production
      args:
        - REACT_NODE_PATH=${REACT_NODE_PATH}
        - SASS_PATH=${SASS_PATH}
    restart: always
    environment:
      - PROJECT_NAME=${PROJECT_NAME}
      - NODE_PATH=${REACT_NODE_PATH}
      - NODE_PORT=${NODE_PORT}
      - SASS_PATH=${SASS_PATH}
      - NODE_ENV=production
      - DOCKER_BUILDKIT=1
    command: /bin/ash -c "envsubst < /etc/nginx/conf.d/nginx.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"
    expose:
      - "80"
    ports:
      - "80:80"

在Dockerized create-react-app中运行“纱线构建”时无法识别SASS_PATH

2 个答案: