объем для локальной стадии разработки

Question

Я пытаюсь добавить 2 тома для локального этапа разработки . Если я не нацеливаюсь на стадию разработки и просто оставляю ее по умолчанию на производстве, она работает нормально, даже копируя каталог сборки в контейнер Nginx, но это всего лишь CRA, поскольку он выходит из коробки

Появляется анонимный том для пустых узловых модулей , и я попытался удалить его, чтобы убедиться, что он продолжает воссоздавать его при каждом запуске ... но я никогда не вижу, чтобы он оставлял React Установка в локальный том. Если я прикрепляю оболочку к тому же изображению, она там. Но когда он пытается запустить сервер разработки, он сообщает, что не может найти пакет . json. Какой вид имеет смысл, если в текущем каталоге его нет и он сопоставлен с тем, что было бы в контейнере, он должен скрывать пакет. json вместе со всем остальным в этом же каталоге.

Я добавил скриншоты внизу из обоих контейнеров .. Один из docker -compose сообщает мне, что не может найти пакет. json Тот, что прямо из изображения показывает, что он там. Поэтому я считаю, что это должно быть отображение тома поверх него.

Чего я не понимаю, так это почему он не оставляет установку в локальном каталоге? Я знаю, что кое-что не переносится с одного этапа на другой, но он даже не начинает устанавливать CRA до второго этапа, и он не отображается в моем локальном каталоге. способ узловых модулей .

. В большинстве уроков рекомендуется сначала запускать CRA локально, поэтому в нем есть пакет. json для копирования, но я пытаюсь запустите все это в контейнере, чтобы не было узлов и модулей на моей локальной машине. Просто запустите установки в контейнере и храните артефакт установки локально.

https://github.com/TurtleWolf/DockerReact/issues/3

docker -compose.yml

version: "2.4"

services:
  client:
    # image: turtlewolfe/docker_react:nginxproduction
    image: turtlewolfe/docker_react:dev
    build:
      context: .
      target: dev
    container_name: client
    environment:
      NODE_ENV: development
    ports:
      - "80:80"
    volumes:
      - .:/client/this_app
      - /client/this_app/node_modules
    # - ./client:/client/app
    # - /client/app/node_modules
    # networks:
    #   - traefik-public
    labels:
      - org.opencontainers.image.authors=TurtleWolfe.com
      # - org.opencontainers.image.created=$CREATED_DATE
      # - org.opencontainers.image.revision=$SOURCE_COMMIT
      - org.opencontainers.image.title="DockerReact"
      - org.opencontainers.image.url=https://hub.docker.com/TurtleWolfe/DockerReact
      - org.opencontainers.image.source=https://github.com/TurtleWolf/DockerReact
      - org.opencontainers.image.licenses=MIT
      # - com.TurtleWolfe.nodeversion=$NODE_VERSION
    tty: true
    # stdin_open: true
    # command: dlv debug --accept-multiclient --continue --headless --listen=:2345 --api-version=2 --log ./cmd/api/

Dockerfile

####################################################################
########            Stage 1 (production base)         ##############
####################################################################

# 1. Use the node apline image as the base stage of a multi-stage routine
# FROM node:13.7.0-alpine as base
FROM node:12.16.1-stretch-slim as base
# This gets our prod dependencies installed and out of the way

# 7. Provide meta data about the port the container must expose
# set this with shell variables at build-time.
# If they aren't set, then not-set will be default.
ARG CREATED_DATE=April2020
ARG SOURCE_COMMIT=not-set
# labels from https://github.com/opencontainers/image-spec/blob/master/annotations.md
LABEL org.opencontainers.image.authors=TurtleWolfe.com
LABEL org.opencontainers.image.created=$CREATED_DATE
LABEL org.opencontainers.image.revision=$SOURCE_COMMIT
LABEL org.opencontainers.image.title="DockerReact"
LABEL org.opencontainers.image.url=https://hub.docker.com/TurtleWolfe/DockerReact
LABEL org.opencontainers.image.source=https://github.com/TurtleWolf/DockerReact
LABEL org.opencontainers.image.licenses=MIT
LABEL com.TurtleWolfe.nodeversion=$NODE_VERSION
EXPOSE 3000
COPY .bashrc /home/node

# 2. Set the working directory to /client
WORKDIR /client

# # 3. Copy both package.json and package-lock.json into /client in the image's filesystem
# COPY package*.json ./
# COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]

# # 4. Install only the production node_modules and clean up the cache
# RUN npm ci \
#     && npm cache clean --force

RUN apt-get update \
    && mkdir this_app \
    && chown -R node:node . \
    && apt-get install curl -y \
    && npm config list
# node comes with a default user
# USER node
# we use npm ci here so only the package-lock.json file is used
RUN npm config list \
    # && npm ci \
    && npx create-react-app this_app \
    && npm cache clean --force
WORKDIR /client/this_app


####################################################################
########                  Development STAGE                 ########
####################################################################
## Stage 2 (development)
# we don't COPY in this stage because for dev you'll bind-mount anyway
# this saves time when building locally for dev via docker-compose
# 5. Extend the base stage and create a new stage named dev
FROM base as dev

# 6. Set the NODE_ENV and PATH Environment variables
ENV NODE_ENV=development
ENV PATH /client/this_app/node_modules/.bin:$PATH
# ENV PATH /client/this_app/node_modules/.bin:$PATH


# 8. Create a new /app directory in /client
# RUN mkdir /client/this_app

# 9. Install development dependencies
# RUN npm install --only=development --silent
RUN npm i --only=development \
    && npm cache clean --force

# 24. Patch create-react-app bug preventing self-signed certificate usage
# https://github.com/facebook/create-react-app/issues/8075
# COPY patch.js /client/node_modules/react-dev-utils/webpackHotDevClient.js

# 24. Print npm configuration for debugging purposes
RUN npm config list

# 12. Set the working directory to /client/app
WORKDIR /client/this_app

# ENTRYPOINT [ "/sbin/tini", "--"]
# 13. Provide the default command for the development container
CMD ["npm", "run", "start"]
# CMD ["npm", "run", "start", "--inspect=0.0.0.0:9229"]



####################################################################
########                  Source STAGE                  ############
####################################################################
## Stage 3 (copy in source)
# This gets our source code into builder for use in next two stages
# It gets its own stage so we don't have to copy twice
# this stage starts from the first one and skips the last two
FROM base as source
WORKDIR /client/this_app
# COPY . .
# RUN rm -r proxy

# 14. Extend the dev stage and create a new stage called test
FROM dev as test

# 15. Copy the remainder of the client folder source code into the image's filesystem
COPY . .

# 16. Run node_module vulnerability checks
# RUN npm audit

# 17. Run unit tests in CI
RUN CI=true npm test --env=jsdom


####################################################################
########                  Testing STAGE                  ###########
####################################################################
# ## Stage 4 (testing)
# # use this in automated CI
# # it has prod and dev npm dependencies
# # In 18.09 or older builder, this will always run
# # In BuildKit, this will be skipped by default 
# FROM source as test
# ENV NODE_ENV=development
# ENV PATH=/opt/node_modules/.bin:$PATH
# # this copies all dependencies (prod+dev)
# COPY --from=dev /opt/node_modules /opt/node_modules
# # run linters as part of build
# # be sure they are installed with devDependencies
# RUN eslint . 
# # run unit tests as part of build
# RUN npm test
# # run integration testing with docker-compose later
# WORKDIR /opt/this_app
# CMD ["npm", "run", "int-test"] 


####################################################################
########                  Security STAGE                  ##########
####################################################################
# ## Stage 5 (security scanning and audit)
# FROM test as audit
# RUN npm audit
# # aqua microscanner, which needs a token for API access
# # note this isn't super secret, so we'll use an ARG here
# # https://github.com/aquasecurity/microscanner
# ARG MICROSCANNER_TOKEN
# ADD https://get.aquasec.com/microscanner /
# RUN chmod +x /microscanner
# RUN apk add --no-cache ca-certificates && update-ca-certificates
# RUN /microscanner $MICROSCANNER_TOKEN --continue-on-failure


####################################################################
########                   BUILD STAGE                       #######
####################################################################
# 18. Extend the test stage and create a new stage named build-stage
FROM test as build-stage

# 19. Build the production static assets
RUN npm run build

# 20. Install aquasecurity's trivy for robust image scanning
FROM aquasec/trivy:0.4.3 as trivy

# 21. Scan the nginx alpine image before production use
RUN trivy nginx:1.17-alpine && \
    echo "No image vulnerabilities" > result

####################################################################
########                  PRODUCTION STAGE                  ########
####################################################################
# ## Stage 6 (default, production)
# # this will run by default if you don't include a target
# # it has prod-only dependencies
# # In BuildKit, this is skipped for dev and test stages

# 22. Extend the nginx apline image and create a new stage named prod
FROM nginx:1.17-alpine as prod

# 23. Copy only the files we want from a few stages into the prod stage
COPY --from=trivy result secure
COPY --from=build-stage /client/this_app/build /usr/share/nginx/html
# COPY .bashrc /home/node

# 24. Copy non-root user nginx configuration
# https://hub.docker.com/_/nginx
# COPY --from=build-stage /client/this_app/nginx /etc/nginx/

# 25. Provide meta data about the port the container must expose
EXPOSE 80

# 26. Define how Docker should test the container to check that it is still working
# HEALTHCHECK CMD [ "wget", "-q", "0.0.0.0:80" ]
CMD ["nginx", "-g", "daemon off;"]

вы можете увидеть его, добавив node_modules, , где находится пакет . json и остальные React App ?