Docker build: Not showing dist folder after ng build - node.js

I'm trying to containerize an angular-9 application.
dockerfile
FROM node:14.17.0-alpine as build-step
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app
COPY . /app
# Install & build packages
RUN npm install
# Listing 1
RUN ls -la
RUN npm run build:docker
# Listing 2
Run ls -la
# Setup nginx
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build-step /app/dist/ /usr/share/nginx/html/
# Expose port 80
EXPOSE 80
Package.json
script: {
"build:docker": "node --max-old-space-size=10240 ./node_modules/#angular/cli/bin/ng build --prod --output-path=dist"
}
#Listing 1(in dokerfile) shows node-modules folder but Listing 2(in dokerfile) doesn't.
Also in the end, it throws error
COPY failed: stat app/dist/: file does not exist
I'm unable to understand why it is not fetching files which were build in docker.
I'm adding the screenshot of logs below.

What about this Dockerfile
FROM node:14.17.0-alpine as build-step
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm ci
# node_modules installed
COPY . .
RUN npm run build:docker
# dist filled with your build app
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build-step /app/dist/ /usr/share/nginx/html
you should have a .dockerignore file in the same directory containing
dist
node_modules
This should install exactly the versions of package-lock.json via npm ci. It doesn't copy dist or node_module directories through the .dockerignore and speeds up your build.
If this all doesn't help, please provide the output of RUN npm run build:docker.

Related

Create environment file on docker build

Environments files are in git ignore just because of confidential info so I need create those angular environments file while building docker image.
I am getting the below error while running the docker build.
an unhandled exception occurred: The /usr/src/app/ng/src/environments/environment.prod.ts path in file replacements does not exist.
Docker file
FROM node:16 AS ng-build
WORKDIR /usr/src/app
COPY frontend/ ./frontend/
RUN cd frontend && npm install --legacy-peer-deps && npm run build --aot --output-hashing=none
FROM node:16 AS node
WORKDIR /usr/src/app
COPY backend/ ./backend/
COPY --from=ng-build /usr/src/app/frontend/dist/ ./backend/public
RUN cd backend && npm ci --only=production --omit=dev && npm cache clean --force
COPY backend/server.js ./backend/
EXPOSE 3000
CMD ["node", "./backend/server.js"]
Please suggest to me the right way to achieve it.

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

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)

How to write Dockerfile to serve Angular app and Node server

My Angular app runs fine locally but I haven't figured out how to do the same with a Docker image. Outside of Docker, the UI runs on port 4200 with ng serve and the API serves data from 8080 with node server.js.
My Dockerfile is set up so it can get the Node server running and available on 8080, but the Angular UI won't run. I've tried several options but right now I have:
FROM node:14.17.3
COPY package*.json ./
EXPOSE 4200 8080
RUN npm install -g #angular/cli
RUN npm install --only=production
COPY . ./
RUN ng serve
CMD ["node", "server.js"]
It fails on ng serve with the error: The serve command requires to be run in an Angular project, but a project definition could not be found. I do have an angular.json file in the root. I'm not sure what I am missing. I read that ng serve shouldn't be used in this situation but the alternatives I've seen haven't made a difference.
Workspace:
EDIT 8/10/21: Based on the answers here and a bunch of research, this will display the UI with nginx:
FROM node:12.16.1-alpine as build
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
# RUN npm install -g #angular/cli
# RUN npm run build --prod
FROM nginx:1.15.8-alpine
COPY --from=build /usr/src/app/dist /usr/share/nginx/html
# CMD ["node", "server.js"]
However, the npm run build step fails because ng is not found despite installing #angular/cli. I have to run this manually to build the dist folder. And I can't run node server.js alongside this. It seems I can only get the front end or back end, not both.
Use below command at the end to run ng serve with host 0.0.0.0 which means it listens to all interfaces.
CMD ["ng","serve","--host", "0.0.0.0"]
But I would suggest using ngInx.
Steps to follow:
Create a docker file under the root of your project, and add the below code. It takes care of: downloading dependencies, building angular project, and deploy it to ngInx server.
#Download Node Alpine image
FROM node:12.16.1-alpine As build
#Setup the working directory
WORKDIR /usr/src/ng-app
#Copy package.json
COPY package.json package-lock.json ./
#Install dependencies
RUN npm install
#Copy other files and folder to working directory
COPY . .
#Build Angular application in PROD mode
RUN npm run build
#Download NGINX Image
FROM nginx:1.15.8-alpine
#Copy built angular files to NGINX HTML folder
COPY --from=build /usr/src/ng-app/dist/pokemon-app/ /usr/share/nginx/html
Build docker image:
docker build -t my-ng-app .
Spinning the docker container with below command expose your app at port 80
docker run -dp 3000:80 my-ng-app
Check out my article on this - https://askudhay.com/how-to-dockerize-an-angular-application, and please let me know if you still have any questions.
I figured out a solution that will run the full application. Most answers here focus on running the front end (the nginx suggestion was helpful). It seemed a Docker container could enable the UI or server but not both. I came across Docker Compose, which will run the front and back ends in separate images. My solution:
Dockerfile.ui
# Define node version
FROM node:12.16.1-alpine as build
# Define container directory
WORKDIR /usr/src/app
# Copy package*.json for npm install
COPY package*.json ./
# Run npm clean install, including dev dependencies for #angular-devkit
RUN npm ci
# Run npm install #angular/cli
RUN npm install -g #angular/cli
# Copy all files
COPY . .
# Run ng build through npm to create dist folder
RUN npm run build --prod
# Define nginx for front-end server
FROM nginx:1.15.8-alpine
# Copy dist from ng build to nginx html folder
COPY --from=build /usr/src/app/dist /usr/share/nginx/html
Dockerfile.server
# Define node version
FROM node:12.16.1-alpine
# Define container directory
WORKDIR /usr/src/app
# Copy package*.json for npm install
COPY package*.json ./
# Run npm clean install, prod dependencies only
RUN npm ci --only=production
# Copy all files
COPY . .
# Expose port 8080 for server
EXPOSE 8080
# Run "node server/run.js"
CMD ["node", "server/run.js"]
docker-compose.yml
version: '3'
services:
server:
build:
context: ./
dockerfile: Dockerfile.server
container_name: server
ports:
- 8080:8080
ui:
build:
context: ./
dockerfile: Dockerfile.ui
container_name: ui
ports:
- 4200:80
links:
- server
docker-compose up will build out an image for server and UI and deploy concurrently. I also resolved the ng not found errors by installing dev dependencies, particularly #angular-devkit/build-angular.
This tutorial helped me figure out Docker Compose: https://wkrzywiec.medium.com/how-to-run-database-backend-and-frontend-in-a-single-click-with-docker-compose-4bcda66f6de
I think updating this line
COPY . ./
with
COPY . ./app
should solve that error. It appears that the node "volume" is in that folder.
Otherwise setting the workdir also seems like a solution:
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
...
Source: https://nodejs.org/en/docs/guides/nodejs-docker-webapp/

NPM install in docker container fails and returns "The command '/bin/sh -c npm install' returned a non-zero code: 1"

I'm trying to deploy my dockerized MERN stack web app to my vps with gitlab CI/CD. In my react app dockerfile, when I try to install npm packages, I get this error:
Service 'nowfront' failed to build: The command '/bin/sh -c npm install' returned a non-zero code: 1
This is my Dockerfile:
# pull official base image
FROM node as builder
# make directory
RUN mkdir -p /app
RUN chmod -R 777 /app
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json .
RUN npm install
# add app
COPY . .
COPY .env .
RUN ls -li
#RUN yarn build
#CMD ["npm","run","build"]
RUN ls
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
My Ubuntu version is 20.04.1 LTS.
Is there any solution to pass this?
I updated my Dockerfile and added line 14 and it works now.
# pull official base image
FROM node as builder
# make directory
RUN mkdir -p /app
RUN chmod -R 777 /app
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json .
COPY package-lock.json .
RUN npm install
# add app
COPY . .
COPY .env .
RUN ls -li
#RUN yarn build
#CMD ["npm","run","build"]
RUN ls
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Docker file for nodejs doesn't execute node ./bin/www

I used a docker file to execute package.json file but it stops at
GithubDatasetAPI#0.0.0 start /usr/src/app node ./bin/www
and doesn't go further or doesn't display error message.I updated to "\node ./bin/www" but doesn't work for me
Here is my DOCKERFILE
FROM node:8
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm#5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm install --only=production
# Bundle app source
COPY . .
EXPOSE 8082
CMD [ "npm", "start" ]
try to copy all the files not just package.json
COPY ./ ./
instead of
COPY package*.json ./

Resources