SASS_PATH не распознается при запуске «сборки пряжи» в Dockerized create-реагировать-приложение

Question

В настоящее время я разрабатываю приложение CRA с использованием Docker. Все хорошо в разработке. Однако, когда я хочу создать производственную сборку (я использую отдельный файл 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

Ваша проблема в том, что вы ожидаете, что файлы среды будут переданы в вашу сборку 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

Или вам нужно использовать сборку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"

Answer 2

Ваш слой development содержит

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

, что означает, что экземпляр окончательного изображения будет запускать сценарий dev.Вы, вероятно, хотите иметь что-то вроде

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

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

. Основная проблема заключается в том, что вы пытаетесь встроить как образ разработки, так и рабочий образ в один и тот же Dockerfile.

Многоступенчатые файлы Docker обычно используются дляизбегайте сборочных утилит, занимающих пространство (и увеличивающее поверхность атаки) производственного образа.Кроме того, промежуточный уровень, на котором выполняются все модульные / приемочные тесты, может гарантировать, что изображение не будет создано, если тест не пройден.

Если вам требуется отдельный образ разработки, см. Раздел «Остановка на определенном этапе сборки» документация многоступенчатой ​​сборки .