I’m trying to add 2 volumes for a local dev stage.
If I don’t target the dev stage and just let it default to production it runs fine all the way through even copying the build directory into an Nginx container, but this is just CRA as it comes out of the box
The anonymous volume for an empty node-modules shows up and I’ve tried deleting it just to make sure it keeps recreating it each run… but I never see it leaving the React Installation in the local volume. If I attach a shell to the same image it’s there. But when it tries to start the dev server it tells me it can’t find the package.json. Which kind of makes sense, if the current directory doesn’t have it and it’s mapped over what would have been in the container it must be hiding the package.json along with anything else in that same directory.
I’ve added screenshots at the bottom from both containers…
The one from docker-compose tells me it can’t find the package.json
The one directly from the image shows it’s there…
So I figure it has to be the volume mapping over it.
What I don’t understand is why is it not leaving the installation in the local directory? I know somethings don’t carry over from one stage to another but it doesn’t even start to install CRA until the second stage and it’s not showing up in my local directory the way the node modules is.
most tutorials suggest running CRA locally first so it has the package.json to copy in, but I’m trying to run all of that in the container to avoid having Node and the modules on my local machine. Just running the installations in the container and keeping the artifact of installation locally.
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: production
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;"]
you can see it adding the node_modules, so where’s the package.json and the rest of the React App?
