how do a dockerfile for React JS, Next js , npm project - node.js

I'm making an app with React JS, Next Js, npm and also I would have to change the .npmrc for it to run.
I don't know how I could make a DockerFile for these technologies and at the same time this dockerfile has to change the .npmrc
my docker file
FROM node:lts as dependencies
WORKDIR /emercore-arg-manager
COPY package.json yarn.lock ./
RUN echo "#lala-lalal:registry=https://npm.pkg.github.com/" >> ~/.npmrc
RUN echo "//npm.pkg.github.com/:_authToken=asdasdasdasdasdsad" >> ~/.npmrc
RUN echo "//registry.npmjs.org/:_authToken=assdasdasdasdsaasd" >> ~/.npmrc
RUN yarn install --frozen-lockfile
FROM node:lts as builder
WORKDIR /emercore-arg-manager
COPY . .
COPY --from=dependencies /emercore-arg-manager/node_modules ./node_modules
RUN yarn build
FROM node:lts as runner
WORKDIR /emercore-arg-manager
ENV NODE_ENV production
# If you are using a custom next.config.js file, uncomment this line.
# COPY --from=builder /my-project/next.config.js ./
COPY --from=builder /emercore-arg-manager/public ./public
COPY --from=builder /emercore-arg-manager/.next ./.next
COPY --from=builder /emercore-arg-manager/node_modules ./node_modules
COPY --from=builder /emercore-arg-manager/package.json ./package.json
EXPOSE 3000
CMD ["yarn", "start:dev"]
It does not work for me, and I think it is a lot of content for a dockerfile with these technologies, could someone help me to put together a shorter one and make it work?
The command that i use in my deskpot is yarn install and yarn start:dev (and its working)

Related

RUN yarn doesn't create node_modules inside docker image

I have a dockerfile that should build an image of a node. In the build phase, it builds right, however, in the production phase, the node_modules folder does not appear inside the image.
I'm not mapping any volumes, just trying to build the image. Could anyone help me with this? I don't understand why this is happening.
FROM node:16.14-alpine3.15 as builder
ENV NODE_ENV=development
WORKDIR /home/node/app
COPY package*.json .
COPY tsconfig.json .
RUN yarn install
COPY . .
RUN yarn build
FROM node:16.14-alpine3.15 as production
ENV NODE_ENV=production
RUN mkdir -p /usr/src/app
VOLUME /usr/src/app
WORKDIR /usr/src/app
RUN mkdir logs
COPY package*.json .
COPY yarn.lock .
RUN yarn install --production
RUN ls -la
RUN ls -la node_modules
COPY --from=builder /home/node/app/dist /usr/src/app/dist
EXPOSE 3333
CMD ["yarn", "start"]

How to correctly build optimized (faster builds) for Nextjs production image using Docker

I have struggled to find good examples of images in Nextjs for docker images. The images I have found have not suited my needs. Below is the current image that I am using currently. I am trying to speed it up, I think a way in where I dont have to install twice would be more ideal.
# Install dependencies only when needed
FROM node:14.8.0-alpine3.12 AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json ./
RUN apk add git
RUN npm install
RUN mkdir /app/.next
# Rebuild the source code only when needed
FROM node:14.8.0-alpine3.12 AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build && npm install --production --ignore-scripts --prefer-offline
# Production image, copy all the files and run next
FROM node:14.8.0-alpine3.12 AS runner
WORKDIR /app
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
# You only need to copy next.config.js if you are NOT using the default configuration
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/.env.production ./
USER nextjs
EXPOSE 3000
# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# ENV NEXT_TELEMETRY_DISABLED 1
CMD ["npm", "start"]

how to organize shared nodejs libraries with docker and monorepo using multi-stage build

My question is very similar to this on:
How to organize shared libraries with docker and monorepo
and
Git monorepo layout with shared library .
Neither of these threads has arrived at a solution. Then I found this:
https://medium.com/#xfor/yarn-workspaces-and-docker-39e30402b69b which advises that a multi-stage build be used like so:
FROM node:10-alpine as build
WORKDIR /usr/src/app
COPY package.json .
COPY yarn.lock .
COPY packages/shared ./packages/shared
COPY packages/api ./packages/api
RUN yarn install --pure-lockfile --non-interactive
WORKDIR /usr/src/app/packages/shared
RUN yarn build
WORKDIR /usr/src/app/packages/api
RUN yarn build
FROM node:10-alpine
WORKDIR /usr/src/app
COPY package.json .
COPY yarn.lock .
COPY --from=build /usr/src/app/packages/shared/package.json /usr/src/app/packages/shared/package.json
COPY --from=build /usr/src/app/packages/shared/dist /usr/src/app/packages/shared/dist
COPY --from=build /usr/src/app/packages/api/package.json /usr/src/app/packages/api/package.json
COPY --from=build /usr/src/app/packages/api/build /usr/src/app/packages/api/build
ENV NODE_ENV production
RUN yarn install --pure-lockfile --non-interactive --production
WORKDIR /usr/src/app/packages/api
CMD ["npm", "start"]
Unfortunately, I don't use yarn for managing my monorepo and my Dockerfile is located within the app level of the monorepo rather than at the root of the monorepo. I am using jazelle to manage my monorepo and was wondering if I would have to create a Dockerfile for each app at the root level.

Why is docker image is too big? NodeJS app

I am building my app into docker image.
My docker file:
FROM node:12-alpine
WORKDIR /usr/app
COPY ./package.json ./package.json
RUN yarn
COPY ./src ./src
COPY ./gulpfile.js ./gulpfile.js
COPY ./tsconfig.json ./tsconfig.json
RUN yarn build
RUN rm -rf ./node_modules
RUN rm -rf ./src
RUN rm -rf ./gulpfile.js
RUN rm -rf ./yarn.lock
RUN rm -rf ./package.json
RUN rm ./tsconfig.json
RUN cd dist && yarn
CMD ["node", "./dist/boot.js"]
After build I opened docker image and found my app in /user/app/dist size is 264MB (including node_modules).
But docker image has 867MB.
Why?
is there anything wrong in my dockerfile script? I am using node alpine, it should be small.
Adding lines to a Dockerfile never makes an image smaller. Because of the way an image is constructed from layers, a RUN line generally results in everything from the previous layer, plus whatever changes result from that RUN command.
As a specific example in your Dockerfile:
# Build the contents of the dist/ directory
RUN yarn build
# Keep the entire contents of the previous layer
# PLUS add markers that the node_modules directory should be removed
RUN rm -rf ./node_modules
As #jonrsharpe points out in comments, you're probably looking for a multi-stage build. The basic concept here is that a second FROM line will cause docker build to completely start over from a new base image, but then you can COPY --from= a previous stage into the final stage.
You might rebuild your existing image like so:
# Add "AS build" for later use
FROM node:12-alpine AS build
# This is exactly what you had before
WORKDIR /usr/app
COPY ./package.json ./package.json
RUN yarn
COPY ./src ./src
COPY ./gulpfile.js ./gulpfile.js
COPY ./tsconfig.json ./tsconfig.json
RUN yarn build
# Now build the actual image, starting over.
FROM node:12-alpine
WORKDIR /usr/app
COPY --from=build /usr/src/app/dist .
# but not its node_modules tree or anything else
CMD ["node", "boot.js"]

How to fix "Directory not empty" on move during docker build?

I have a working Dockerfile for a node application:
FROM node:8.8
ENV TERM=xterm-color NPM_CONFIG_LOGLEVEL=warn PATH="$PATH:/usr/src/app/node_modules/.bin/"
VOLUME ["/logs"]
WORKDIR /tmp/node
ADD package.json yarn.lock .npmrc ./
RUN yarn install --frozen-lockfile --ignore-platform --ignore-engines --quiet
WORKDIR /usr/src/app
ADD . /usr/src/app
RUN mv /tmp/node/* ./ && tsc && webpack
CMD ["node", "/usr/src/app/server"]
I wanted to re-created the caching behavior for the node_modules during build, hence I have updated the Dockerfile for another project to look very similar.
FROM node:9-alpine
WORKDIR /tmp/node
ADD package.json yarn.lock ./
RUN yarn install --frozen-lockfile --ignore-platform --ignore-engines --quiet
WORKDIR /app
ADD . /app/
RUN mv /tmp/node/* ./
EXPOSE 1337
CMD ["yarn", "start"]
Yet for that Dockerfile I get an unexpected error during:
$ docker build .
...
Step 7/9 : RUN mv /tmp/node/* ./
---> Running in 51543827cd89
mv: can't rename '/tmp/node/node_modules': Directory not empty
The command '/bin/sh -c mv /tmp/node/* ./' returned a non-zero code: 1
Why doesn't the mv command work here?
When you run docker build ., the current directory gets passed as its context. It's most likely the case that you have either run the yarn install command on your host already which is why you alrady have a
/app/node_modules
This is why it cannot be moved, as it already exists.
To avoid passing the folder along within the context, you can add:
node_modules/
in your .dockerignore file.

Resources