The docker code is put below
FROM node:16.9.1-alpine as build
WORKDIR /app
# Copy required files/folders to docker directory
COPY package.json /app
COPY package-lock.json /app
COPY lerna.json /app
COPY yarn.lock /app
COPY babel.config.js /app
COPY shared /app/shared
COPY projects/tt-core /app/projects/tt-core
# Installing yarn dependicies and biuld the tt-core project
RUN yarn install --frozen-lockfile --non-interactive --production=false --ignore-scripts
RUN yarn build:tt-core
# run reactjs with nginx in production
FROM nginx:stable-alpine
COPY --from=build /app/projects/tt-core/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
COPY ssl /etc/ssl/certs
EXPOSE 80
EXPOSE 443
CMD ["nginx", "-g", "daemon off;"]
I have run through the azure DevOps pipeline build. Logs it shows for React Image Build is mentioned as below. There are warnings showing when build is running. I have tried put the logs which show the warning. There are almost hundred and thousand lines of warning showing in the build.
react-hooks/exhaustive-deps
2022-09-05T10:34:04.2510960Z Line 142:60: Expected '!==' and instead saw '!=' eqeqeq
2022-09-05T10:34:04.2629366Z Line 145:6: React Hook useEffect has a missing dependency: 'productList'. Either include it or remove the dependency array react-hooks/exhaustive-deps
2022-09-05T10:34:04.2632812Z Line 154:54: Expected to return a value in arrow function array-callback-return
2022-09-05T10:34:04.2637882Z Line 254:6: React Hook useEffect has missing dependencies: 'currentModalData.autoComplete', 'currentModalData.balance', 'currentModalData.bufferSize', 'currentModalData.cavity', 'currentModalData.cyclePerPack', 'currentModalData.description', 'currentModalData.erpWorkOrder', 'currentModalData.estimatedCompletion', 'currentModalData.fromTime', 'currentModalData.isPacking', 'currentModalData.jobProducts', 'currentModalData.operators', 'currentModalData.packingDeviceId', 'currentModalData.packingEquipmentId', 'currentModalData.plannedCompletion', 'currentModalData.plannedCycleTime', 'currentModalData.plannedStart', 'currentModalData.pulsesPerMeter', 'currentModalData.quantity', 'currentModalData.setupHours', 'currentModalData.state', 'currentModalData.tool', 'currentModalData.toolId', 'currentModalData.toolLocation', 'currentModalData.totalProduction', 'dispatch', 'form', 'isUpdate', and 'updatedProductList'. Either include them or remove the dependency array. You can also do a functional update 'setUpdatedProductList(u => ...)' if you only need 'updatedProductList' in the 'setUpdatedProductList' call react-hooks/exhaustive-deps
2022-09-05T10:34:04.2655472Z Line 257:57: Expected '!==' and instead saw '!=' eqeqeq
2022-09-05T10:34:04.2664779Z Line 261:6: React Hook useEffect has missing dependencies: 'CalculatedJobTiming', 'checkActiveMainenanceJob', and 'setJobTimingFields'. Either include them or remove the dependency array react-hooks/exhaustive-deps
2022-09-05T10:34:04.2672463Z Line 267:34: Expected '!==' and instead saw '!=' eqeqeq
2022-09-05T10:34:04.2684953Z Line 272:6: React Hook useEffect has a missing dependency: 'ActiveMaintenanceJobsList'. Either include it or remove the dependency array react-hooks/exhaustive-deps
2022-09-05T10:34:04.2688468Z Line 278:33: Expected '!==' and instead saw '!=' eqeqeq
2022-09-05T10:34:04.2691376Z Line 286:34: Expected to return a value at the end of arrow function array-callback-return
2022-09-05T10:34:04.2694805Z Line 293:6: React Hook useEffect has missing dependencies: 'ProductsToolDataList', 'currentModalData.cavity', 'form', and 'jobModalData.cavity'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setStoredCavity' needs the current value of 'jobModalData.cavity' react-hooks/exhaustive-deps
2022-09-05T10:34:04.2698664Z Line 304:6: React Hook useEffect has missing dependencies: 'calculatePlannedDate' and 'form'. Either include them or remove the dependency array react-hooks/exhaustive-deps
2022-09-05T10:34:04.2701901Z Line 318:6: React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps
2022-09-05T10:34:04.2704966Z Line 323:38: Expected to return a value in arrow function array-callback-return
2022-09-05T10:34:04.2708051Z Line 391:26: Expected to return a value in arrow function array-callback-return
2022-09-05T10:34:04.2711119Z Line 452:44: Expected to return a value in arrow function array-callback-return
2022-09-05T10:34:04.2714085Z Line 487:47: Expected to return a value in arrow function array-callback-return
2022-09-05T10:34:04.2719374Z Line 505:32: Expected to return a value in arrow function array-callback-return
2022-09-05T10:34:04.2722884Z Line 506:54: Expected to return a value in arrow function array-callback-return
2022-09-05T10:34:04.2726137Z Line 698:6: React Hook useEffect has missing dependencies: 'currentModalData.totalProduction', 'currentModalData.totalRejection', and 'isUpdate'. Either include them or remove the dependency array react-hooks/exhaustive-deps
2022-09-05T10:34:04.2729762Z Line 737:6: React Hook useEffect has missing dependencies: 'calculatePlannedDate', 'isFamilyMould', and 'storedCavity'. Either include them or remove the dependency array react-hooks/exhaustive-deps
2022-09-05T10:34:04.2733047Z Line 760:53: Expected to return a value at the end of arrow function array-callback-return
2022-09-05T10:34:04.2736135Z Line 763:11: Arrow function expected a return value array-callback-return
CodePudding user response：
One thing you can do is run your yarn install when you've copied package.json. That way, Docker can reuse a cached layer when you run the build again without any changes to package.json.
Like this
FROM node:16.9.1-alpine as build
WORKDIR /app
# Copy required files/folders to docker directory
COPY package.json /app
COPY package-lock.json /app
# Install yarn dependencies
RUN yarn install --frozen-lockfile --non-interactive --production=false --ignore-scripts
COPY lerna.json /app
COPY yarn.lock /app
COPY babel.config.js /app
COPY shared /app/shared
COPY projects/tt-core /app/projects/tt-core
# Build the tt-core project
RUN yarn build:tt-core
If you do this, then the first build will take the same time as it does now, but subsequent builds will be faster, as long as you don't make changes to package.json or package-lock.json.
CodePudding user response：
You could structure your Dockerfile like this:
FROM node:16.9.1-alpine as build
WORKDIR /app
# Copy required files/folders to docker directory
COPY package.json package-lock.json lerna.json yarn.lock babel.config.js /app
COPY shared /app/shared
COPY projects/tt-core /app/projects/tt-core
# Installing yarn dependicies and biuld the tt-core project
RUN yarn install --frozen-lockfile --non-interactive --production=false --ignore-scripts \
&& yarn build:tt-core
# run reactjs with nginx in production
FROM nginx:stable-alpine
COPY --from=build /app/projects/tt-core/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
COPY ssl /etc/ssl/certs
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]
This would save you a few steps in the Dockerfile and keep it more secure because there are fewer layers.
But i do not know if there is a major speed up.