I try to dockerise an old angularJS app but I hang at a problem. I have the impression that when docker dials up my volume it overwrites all that has been done previously.
My image is built successfully but when I run it I have this error:Fatal error: Unable to find local grunt.
My goal is to be able to build my app while keeping the hot reload.
Dockerfile :
FROM mhart/alpine-node:6 as builder
# Confirm versions
RUN node -v
RUN npm -v
# Add
COPY package.json /usr/src/app/package.json
COPY bower.json /usr/src/app/bower.json
COPY Gruntfile.js /usr/src/app/Gruntfile.js
COPY .bowerrc /usr/src/app/.bowerrc
# Define app as root dir
WORKDIR /usr/src/app
# add app
#COPY . /usr/src/app
# Install sass & compass
RUN apk update && \
apk upgrade
RUN apk add --update \
ruby \
ruby-irb \
ruby-dev \
ruby-rdoc \
libffi-dev \
build-base
RUN gem install \
sass \
compass
# Install Perl
RUN apk add perl
# Install Git (rquired for angular dep)
RUN apk add git
# Install Yarn
RUN npm install -g yarn
RUN yarn -v
# Install dependencies
RUN npm install bower -g\
&& npm install -g grunt-cli \
&& yarn add grunt-contrib-imagemin \
&& yarn
# Build
RUN bower install --allow-root
EXPOSE 9000 35729
CMD [ "grunt", "--force" ,"server" ]
**docker-compose : **
version: '3.7'
services:
app-dev:
container_name: app-dev
build:
context: .
dockerfile: Dockerfile-dev
volumes:
- .:/usr/src/app/
ports:
- '9000:9000'
- '35729:35729'
restart: always
Doesn't look like you're running npm install on the docker image, which means that none of your packages from your package.json are going to present.
You should, in general, exclude node_modules from the docker build context with a .dockerignore, as you're going to want to rebuild your dependencies inside the container. A dependent module can, for instance, need to compile a native module for something. For instance, node-sass has a compiled component.
Related
i have UAT and production setup on same server with identical code only the backend service is exposed on different ports.
i use the docker-compose up --build to start the application
but i am unable to start the uat and production application at same time.
first i go to the uat folder and run docker-compose up --build the application starts and same is visible in docker ps as well
but then i go to prod folder and issue docker-compose up --build it starts the service but the uat service goes down automatically
ideally when the code is in 2 different places it should behave as 2 different application and should be independent but its not happening.
docker-compose.yml
version: "2.2"
services:
webbackend:
build: .
network_mode: "host"
container_name: atms-webapp-backend-test
restart: always
volumes:
- .:/code
command:
"python3.7 app.py --port=5002"
# "gunicorn --workers=2 --bind=0.0.0.0:9000 utootuweb.wsgi:application"
Dockerfile
FROM ubuntu:18.04
WORKDIR /code
ADD . /code
RUN apt-get update && apt-get upgrade -y && apt-get clean
ENV NODE_VERSION=16.16.0
RUN apt-get install -y curl
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
ENV NVM_DIR=/root/.nvm
RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
RUN node --version
RUN npm --version
WORKDIR /code/frontend
RUN npm install
RUN npm run build
# RUN npm install -g serve
# RUN serve -s build
# RUN yarn
# RUN yarn build
# # Upgrade installed packages
# RUN apt-get update && apt-get upgrade -y && apt-get clean
# # Python package management and basic dependencies
#
# RUN apt-get install -y curl python3.7 python3.7-dev python3.7-distutils curl
# # node install
# RUN curl -sL https://deb.nodesource.com/setup_18.x | bash -
# RUN apt-get install -y nodejs
# # npm install
# RUN apt install -y npm
# RUN npm install -g npm#latest
#
# Python package management and basic dependencies
RUN apt-get install -y curl python3.7 python3.7-dev python3.7-distutils
# Register the version in alternatives
RUN update-alternatives --install /usr/bin/python python /usr/bin/python3.7 1
# Set python 3 as the default python
RUN update-alternatives --set python /usr/bin/python3.7
RUN apt-get install -y build-essential python3.7 python3.7-dev python3-pip python3.7-venv libgl1
RUN apt-get install -y git
# update pip
RUN python3.7 -m pip install pip --upgrade
RUN python3.7 -m pip install wheel
# build frontend
# WORKDIR /code/frontend
#
# RUN npm install
# RUN npm run build
# install backend code
WORKDIR /code
RUN python3.7 -m pip install -r requirements.txt
WORKDIR /code/backend
CMD ["python3" ,"app.py"]
i have the same code base in 2 folders uat and prod
only the port is different
docker --version
Docker version 20.10.10, build b485636
docker-compose --version
docker-compose version 1.29.2, build 5becea4c
I changed the container name in docker-compose.yml to unique name for uat and prod as well just to make sure that container name is not the issue
I am serving a react app from within Django, and I trying to deploy it using docker-compose up -d --build.
My project directory is as follows:
root
├──project (django)
| ├──frontend/ # react project is here
| ├──project/
| ├──static/
| ├──Dockerfile //Dockerfile for backend image
| ├──entrypoint.sh
| ├──manage.py
| ├──requirements.txt
└──docker-compose.yaml
Here is my current deploy script:
# pull the official base image
FROM python:3.8.12-bullseye
# set work directory
WORKDIR /usr/src/app
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
# install dependencies
RUN apt-get update
COPY /requirements.txt /usr/src/app
RUN pip install -r requirements.txt
# set work directory
WORKDIR ~/usr/src/app
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
RUN npm run dev
# set work directory
WORKDIR /usr/src/app
# copy project
COPY . /usr/src/app/
# run entrypoint.sh
ENTRYPOINT ["/usr/src/app/entrypoint.sh"]
The error I get
> => ERROR [12/18] COPY package.json ./
> 0.0s => ERROR [13/18] COPY package-lock.json ./ 0.0s ------
> > [12/18] COPY package.json ./:
> ------
> ------
> > [13/18] COPY package-lock.json ./:
> ------ failed to compute cache key: "/package-lock.json" not found: not found
I edited your Dockerfile, try if this works:
# pull the official base image
FROM python:3.8.12-bullseye
RUN apt-get update
COPY . ./usr/src/app
WORKDIR /usr/src/app
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
# install python dependencies
RUN pip install -r requirements.txt
WORKDIR /usr/src/app/frontend
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
RUN npm run dev
# run entrypoint.sh
ENTRYPOINT ["/usr/src/app/entrypoint.sh"]
The issue is that package.json and package-lock.json are not present in the directory where you run docker build, but (probably) in your frontend subdirectory.
Changing those two lines to:
COPY frontend/package.json ./
COPY frontend/package-lock.json ./
should work. But better yet, since you're copying everything anyway, you can move that to the top:
# pull the official base image
FROM python:3.8.12-bullseye
# set work directory
WORKDIR /usr/src/app
# copy project
COPY . .
# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
# install dependencies
RUN apt-get update
RUN apt-get update \
&& apt-get install -y curl \
&& curl --silent --location https://deb.nodesource.com/setup_12.x | bash - \
&& apt-get install -y nodejs \
&& npm install --silent\
&& npm install react-scripts#3.4.1 -g --silent
RUN pip install -r requirements.txt
# set work directory
WORKDIR /usr/src/app/frontend
RUN npm install --silent
RUN npm install react-scripts#3.4.1 -g --silent
RUN npm run dev
# set work directory
WORKDIR /usr/src/app
# run entrypoint.sh
ENTRYPOINT ["/usr/src/app/entrypoint.sh"]
I'm not sure what your needs are, but for a production environment I would suggest separating the frontend and Django application into different containers. Backend applications have very different scaling and hardware needs than frontend applications. You can still package it into one application using Docker-compose for example.
How do I configure this as a multi stage build
yarn start maps to
"start": "nodemon ./server-build/index.js",
Dockerfile
FROM node:14.17.3-alpine AS build
RUN apk add --no-cache build-base gcc autoconf automake libtool zlib-dev libpng-dev nasm
RUN npm i nodemon -g
WORKDIR /app/web-web
ENV PATH /app/web-web/node_modules/.bin:$PATH
COPY package.json /app/web-web/package.json
RUN yarn install --network-timeout 1000000000
COPY . /app/web-web
RUN yarn run build:staging
COPY . /app/web-web
EXPOSE 3006
CMD ["yarn", "start"]
Warning NOT Tested code.
The Dockerfile below is not tested and you must consider it as a starting point.
Missing some info, the apk packages are required only for build or else to run ?
I suggest you read about multi-stage build
###############################################################
# This stage do:
# 1. Install required software
# 2. Copy package.json and install deps
###############################################################
FROM node:14.17.3-alpine AS build
# This packet are required ONLY for build ??? Otherwise add on final stage
RUN apk add --no-cache build-base gcc autoconf automake libtool zlib-dev libpng-dev nasm
WORKDIR /app/web-web
ENV PATH /app/web-web/node_modules/.bin:$PATH
COPY package.json /app/web-web/package.json
RUN yarn install --network-timeout 1000000000
###############################################################
# This stage do:
# 1. copy node_modules from build stage to this image
# 2. build app and run
###############################################################
FROM node:14.17.3-alpine AS final
WORKDIR /app/web-web
# Magic append here: I copy from prev stage (build) to this one
COPY --from=build /app/web-web .
COPY . /app/web-web
RUN npm i nodemon -g
RUN yarn run build:staging
EXPOSE 3006
CMD ["yarn", "start"]
I am deploying a react app to Heroku via TravisCI. The fact that I'm using Heroku doesn't really affect what I'm about to ask, I'm pretty sure, it's just there for context. Travis successfully deploys the app until I add a testing step (the script section) in .travis.yml:
language: generic
sudo: required
services:
- docker
before_install:
- docker build -t myapp:prod -f Dockerfile.prod .
script:
- docker run -e CI=true myapp:prod npm run test
after_success:
- docker build -t myapp:prod -f Dockerfile.prod .
- echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_ID" --password-stdin
- docker push myapp:prod
deploy:
provider: heroku
app: myapp
skip_cleanup: true
api_key:
secure: <my_key>
However, my Dockerfile.prod is a multi-stage node + nginx where the nginx stage doesn't keep any node or npm stuff:
# build environment
FROM node:13.12.0-alpine as builder
# 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 ./
# some CI stuff I guess
RUN npm ci
RUN npm install react-scripts#3.4.1 -g --silent
COPY . ./
RUN npm run build
# production environment
FROM nginx:stable-alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
# If using React Router
COPY --from=builder /app/build /usr/share/nginx/html
# For Heroku
CMD sed -i -e 's/$PORT/'"$PORT"'/g' /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'
Therefore, it is my understanding that .travis.yml tries to run that npm run test command inside my nginx container and can't execute npm commands (no node installed, right?). So guided by SO answers such as this one I started adding commands into that nginx stage such as
COPY package.json ./
COPY package-lock.json ./
RUN apk add --update npm
but I realized I might be approaching this the wrong way. Should I perhaps be adding npm through Travis? That is, should I include in .travis.yml in the scripts section something like docker run -e CI=true myapp:prod apk add --update npm and whatever else is necessary? This would result in a smaller nginx image no? However, would I run into problems with package.json from the node stage in Dockerfile.prod or anything like that?
In summary, to use TravisCI to test a dockerized react app served with nginx, at what point should I install npm into my image? Does it happen as part of script in .travis.yml or does it happen in Dockerfile.prod? If it is recommened to npm run tests inside Dockerfile.prod, would I do that in the first stage (node) or the second (nginx)?
Thanks
EDIT: Not sure if this can be considered solved, but a user on Reddit recommended to simply RUN npm run test right before the RUN npm run build.
I followed the steps under https://mherman.org/blog/dockerizing-a-react-app/
My setup:
Windows 10 Home
docker commands are run in the Docker Quickstart Terminal https://docs.docker.com/toolbox/toolbox_install_windows/
How to reproduce: Follow the steps from the first link:
install create-react-app globally:
npm install -g create-react-app#3.4.1
Generate new app:
$ npm init react-app sample --use-npm
$ cd sample
Create Dockerfile in the root of directory:
# pull official base image
FROM node:13.12.0-alpine
# 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 --silent
RUN npm install react-scripts#3.4.1 -g --silent
# add app
COPY . ./
# start app
CMD ["npm", "start"]
Add .dockerignore:
node_modules
build
.dockerignore
Dockerfile
Dockerfile.prod
Build and tag the dockerimage:
$ docker build -t sample:dev .
Spin up the container:
$ docker run \
-it \
--rm \
-v ${PWD}:/app \
-v /app/node_modules \
-p 3001:3000 \
-e CHOKIDAR_USEPOLLING=true \
sample:dev
This is what I see in the Docker Quickstart Terminal:
And this is my project structure:
However, when I go to localhost:3001 as described in the post, I see
Any idea where I'm missing something?
When you run the container, specify the port like this: 3000:80 (use :80)
$ docker run -it --rm -p 3000:80 sample:prod
You can then navigate to http://localhost:3000/ to see the CRA app.