I've create a react application with create-react-app and have build a docker image with the following docker file.
FROM node:alpine AS builder
WORKDIR /app
RUN npm install
COPY . .
RUN npm run build
FROM node:alpine
WORKDIR /app
COPY --from=builder /app/build .
RUN npm install -g serve
EXPOSE 80
CMD serve -p 80 -s build
When running the container and accessing port 80 on localhost I'm met with "404 the requested path could not be found". The container is run with the command `docker run -p 80:80 "image name" and the output is "Accepting connections at http://localhost:80" What could be the reasons for the 404 and what can i do to fix it?
Looking at the documentation of serve... You are copying /app/build from the builder container in to /app on the new container and then calling serve with a folder name of build, which does not exist. (-s doesn't take a parameter`)
Related
My Docker file
# FROM node:16.14.2
FROM node:alpine
ENV NODE_ENV=production
WORKDIR /app
COPY ["package.json", "package-lock.json", "./"]
RUN npm install
COPY . .
CMD [ "npm", "start"]
Command to run image: docker run -it -d -p 4001:4001 react-app:test2
Project structure
project structure
Output after docker run
result after docker run
Based on this context, a possible mistake for me is basically that you do not copy the rest of the source code correctly.
Try to be more consistent in the Dockerfile, also have a look at the multistage Docker build (within the same file) to optimise the image.
Anyway, your file should be something like:
FROM node:16-alpine
ENV NODE_ENV=production
WORKDIR /app
COPY ["package.json", "package-lock.json", "./"]
RUN npm install
COPY . ./
CMD [ "npm", "start"]
Based on the code in the repo, I managed to spot the following problem.It's neither the Dockerfile, nor the code itslef. It throws some warnings though.
Implicitly, the application is supposed to be running on port 3000, if it is not chnaged manually at some point (in this project there are only default settings). Thus the application starts correclty on port 3000, However you expose 4001:4001. On this port nothing is running according to this Dockerfile.
Try using port 3000 instead and it should work just fine:
docker run -it -d -p 3000:3000 <image-name>:<image-tag>
i have an angular app that i am trying to make it dockerize so with the below Dockerfile it is building an image , how do i run this app now locally for the port that i exposed 4200 i am new to docker stuff any help will be appreciated this will be without nginx.
Dockerfile
# --------------------------------------------------------------------------
FROM node:14 as builder
COPY package.json package.json
COPY package-lock.json package-lock.json
RUN npm install --production
# --------------------------------------------------------------------------
FROM gcr.io/distroless/nodejs:14
USER 9000:9000
# create the base directory
WORKDIR /apps/nodejs/gcp/
ENV HOME=/apps/nodejs/gcp/
# set the home directory
COPY --from=builder node_modules ./node_modules
COPY package.json ./
# copy readme.md
COPY README.md ./
# copy the dist to the home dir
COPY dist ./dist
# DO NOT COPY THE CERTS AND CONFIG FOLDER IN THIS IMAGE. THESE WILL BE INJECTED BY KUBERNETES.
# IN ORDER TO RUN THIS IMAGE IN LOCAL MOUNT THE HOST NODECERT AND CONFIG FOLDER TO THE DOCKER
# docker run -p 9082:9082 --rm \
#--env "NO_UPDATE_NOTIFIER=true NODE_ENV=production PORT=9082 \
#LOGCONSOLE=true CONFIGBASEPATH=/apps/nodejs/gcp/config/ CERTSBASEPATH=/apps/nodejs/gcp/nodecerts" \
#-v /apps/nodejs/gcp/nodecerts:/apps/nodejs/gcp/nodecerts -v /apps/nodejs/gcp/config/:/apps/nodejs/gcp/config/ <image name>
# TO GO INSIDE THE RUNNING CONTAINER
# docker container exec -it <container id> sh
#BUILDING Docker
# docker build -t <image name> .
# <image name>: all lowercase and if needed separated by hypen(-). eg redis-service
# port the server will be listening to.
EXPOSE 4200
CMD ng serve --host 0.0.0.0 --port 4200
Generate the build of the application
Use this command:
npm run build
Create a Dockerfile inside the build output folder and add this code in Dockerfile:
FROM nginx:latest
MAINTAINER yournick#winter.com
COPY ./ /usr/share/nginx/html/
EXPOSE 80
Finally build the docker image using this command:
docker build -t angular-dist-project:v1 .
Now run the image using this command:
docker run -d --name angular-app-container -p 2021:80 angular-dist-project:v1
Now go to browser and navigate http://your-ip:2021:
http://localhost:2021
Result: angular app is successfully dockerized
NOTE: Do not forget and
remember that this only is an alternative, exist anothers many ways!
I hope you understand.
All the best 🌟
Currently I have the docker file, which runs a non-optimized react app (it says 'Note that the development build is not optimized. To create a production build, use npm run build.'). The docker file is:
FROM node:16
# A directory within the virtualized Docker environment
# Becomes more relevant when using Docker Compose later
WORKDIR /usr/src/app
# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./
# Installs all node packages
RUN npm install
# Copies everything over to Docker environment
COPY . .
# Uses port which is used by the actual application
EXPOSE 3000
# Finally runs the application
CMD [ "npm", "start" ]
With the above I can hit my service at http://localhost:3000/ .
I tried the following (from https://medium.com/geekculture/dockerizing-a-react-application-with-multi-stage-docker-build-4a5c6ca68166) but I could not access my service:
The docker file I tried is
# pull official base image
FROM node:16 AS builder
# set working directory
WORKDIR /app
# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./
# Installs all node packages
EXPOSE 3000
RUN npm install
# Copies everything over to Docker environment
COPY . ./
RUN npm run build
#Stage 2
#######################################
#pull the official nginx:1.19.0 base image
FROM nginx:1.19.0
#copies React to the container directory
# Set working directory to nginx resources directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static resources
RUN rm -rf ./*
# Copies static resources from builder stage
COPY --from=builder /app/build .
EXPOSE 3000
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]
Does anyone know what to do to fix this (or how to create an optimized build)?
The root issue was that I was not aware that nginx was serving on port 80. The following docker file works and is run in the following way: docker run -p 80:80 my-ui-app
# pull official base image
FROM node:16 AS builder
# set working directory
WORKDIR /app
# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./
# Installs all node packages
RUN npm install
# Copies everything over to Docker environment
COPY . ./
RUN npm run build
#Stage 2
#######################################
#pull the official nginx:1.19.0 base image
FROM nginx:1.19.0
#copies React to the container directory
# Set working directory to nginx resources directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static resources
RUN rm -rf ./*
# Copies static resources from builder stage
COPY --from=builder /app/build .
EXPOSE 80
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]
I would like to put my Nodejs app into a docker. When deploying it via npm run build and start I can send requests to it.
But when creating a docker image I getting problems:
First I have an EXPOSE 8080 in my Dockerfile. Then I am running docker run -p=3000:8080 --env-file .env my-docker-file. After that I am getting the info that the server is running on http://localhost:3000.
I know localhost:3000 ist just in the docker file. But at least the docker is running.
When I use the command http localhost:3000 (or the browser) I am getting http: error: ConnectionError: ('Connection aborted.', RemoteDisconnected('Remote end closed connection without response')) while doing a GET request to URL: http://localhost:3000/.
Does someone have an idea what's going wrong??? I have no clue.
tanks to all hints that directs me into the right direction.
My Dockerfile:
## this is the stage one , also know as the build step
FROM node:12.17.0-alpine as builder
WORKDIR /app
COPY package*.json ./
COPY prisma ./prisma/
COPY tsconfig.json .
COPY src ./src/
COPY tests ./tests/
RUN npm install
RUN npx prisma generate
COPY . .
RUN npm run build
## this is stage two , where the app actually runs
FROM node:12.17.0-alpine
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/dist ./dist
EXPOSE 8080
CMD npm start
If you use a Dockerfile, first you better to build your image.
FROM node:12.17.0-alpine as builder
WORKDIR /app
COPY . .
RUN npm install
RUN npx prisma generate
RUN npm run build
## this is stage two , where the app actually runs
FROM node:12.17.0-alpine
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/dist ./dist
EXPOSE 8080
CMD ["npm","start"]
From the location where your Dockerfile located:
docker build -t your-image-name .
docker run -p 3000:8080 --env-file .env your-image-name
Did you check the IP address?
When i first deploy my Node project to Docker, i couldn't access it too, because my Node project was listening for localhost requests. But if you don't specify your network as host, your Docker container will have some other IP address in your subnet.
I've changed my Node projects listening IP address to 0.0.0.0 and after that i could connect to my Node project running in a Docker container.
COPY failed: stat /var/lib/docker/overlay2/1e9a0e53a11b406c13d4fc790336f37285927a1b87d1bac4d0e889c6d3cfed9b/merged/app/dist/comp-lib: no such file or directory
I tried running docker system prune, and restarted Docker a bunch of times. I also gave a shot at rm -rf /var/lib/docker in the docker VM, somehow that doesn't remove the directory.
Node version: v10.15.1
Docker version: 18.09.2, build 6247962
Dockerfile:
# stage-1
FROM node as builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
# stage -2
FROM nginx:alpine
COPY --from=node /app/dist/comp-lib /usr/share/nginx/html
I expect the build to be successful but the above mentioned is the error I'm experiencing.
In your stage 2
COPY --from=node /app/dist/comp-lib /usr/share/nginx/html
should be
COPY --from=builder /app/dist/comp-lib /usr/share/nginx/html
since stage 1 is called builder and not node.
This is the dockerfile that I use for my Angular apps:
FROM johnpapa/angular-cli as angular-built
WORKDIR /usr/src/app
COPY package.json package.json
RUN npm install --silent
COPY . .
RUN ng build --prod
FROM nginx:alpine
LABEL author="Preston Lamb"
COPY --from=angular-built /usr/src/app/dist /usr/share/nginx/html
EXPOSE 80 443
CMD [ "nginx", "-g", "daemon off;" ]
I've never had any issues with this configuration. There's more information as well in this article.