I have a project developed by .NET 6 and React which when I publish it locally works successfully but when I use Dockerfile it gives this error:
=> => transferring context: 250.02kB 0.7s
=> CANCELED [base 2/4] RUN apt-get update -yq && apt-get upgrade -yq && apt-get install -yq curl git nano 7.0s
=> CACHED [build 2/7] WORKDIR /src 0.0s
=> CACHED [build 3/7] COPY [psreactnet.csproj, .] 0.0s
=> CACHED [build 4/7] RUN dotnet restore "./psreactnet.csproj" 0.0s
=> CACHED [build 5/7] COPY . . 0.0s
=> CACHED [build 6/7] WORKDIR /src/. 0.0s
=> CACHED [build 7/7] RUN dotnet build "psreactnet.csproj" -c Release -o /app/build 0.0s
=> ERROR [publish 1/1] RUN dotnet publish "psreactnet.csproj" -c Release -o /app/publish 6.1s
------
> [publish 1/1] RUN dotnet publish "psreactnet.csproj" -c Release -o /app/publish:
#0 0.855 MSBuild version 17.3.0+92e077650 for .NET
#0 2.347 Determining projects to restore...
#0 2.891 All projects are up-to-date for restore.
#0 5.390 psreactnet -> /src/bin/Release/net6.0/psreactnet.dll
#0 5.428 Copying translation files: psreactnet
#0 5.872 Publishing translation files: psreactnet
#0 6.036 /bin/sh: 2: /tmp/tmpaf69a88ac28a417e9845fecde42c74b6.exec.cmd: npm: not found
#0 6.049 /src/psreactnet.csproj(50,5): error MSB3073: The command "npm install --force" exited with code 127.
------
failed to solve: executor failed running [/bin/sh -c dotnet publish "psreactnet.csproj" -c Release -o /app/publish]: exit code: 1
I think node is not installed in the container. However, I added installation code to docker file:
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
RUN apt-get update -yq && apt-get upgrade -yq && apt-get install -yq curl git nano
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -yq nodejs build-essential
WORKDIR /app
EXPOSE 80
EXPOSE 443
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["psreactnet.csproj", "."]
RUN dotnet restore "./psreactnet.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "psreactnet.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "psreactnet.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "psreactnet.dll"]
How can I install node in the container?
publish stage doesn't have base stage. Try install node in build stage
try adding RUN apt-get... and RUN curl -sL de... after "as build" stage
#base stage
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
...
#build stage
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update -yq && apt-get upgrade -yq && apt-get install -yq curl git nano
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -yq nodejs build-essential
WORKDIR /src
...
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
First, I created a dotnet react application.
dotnet new react -n ReactApp
Next, I opened the project in visual studio and right-clicked the project Add/Container Orchastrator Support. This created some docker configuration and a dockerfile file.
The file system looks like the following picture.
And the docker file is as follows:
# See https://aka.ms/containerfastmode to understand how Visual Studio uses this
# Dockerfile to build your images for faster debugging.
FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
WORKDIR /src
COPY ["PBS.Hypercomb.React.csproj", "."]
RUN dotnet restore "PBS.Hypercomb.React.csproj"
COPY . .
WORKDIR "/src/"
RUN dotnet build "PBS.Hypercomb.React.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "PBS.Hypercomb.React.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "PBS.Hypercomb.React.dll"]
Then in the debug menu I clicked on Debug/Docker Compose and the application ran up until it started to complain about missing npm.
// ERROR AS FOLLOWS
[1] Ensure that 'npm' is installed and can be found in one of the PATH directories.
Current PATH environment variable is: /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
Make sure the executable is in one of those directories, or update your PATH.
I found someone showing to add the following code after the FROM ... base command so I tried.
#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.
FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
#ADDED this code to supposedly install npm on the linux container
RUN apt-get update && \
apt-get install -y wget && \
apt-get install -y gnupg2 && \
wget -qO- https://deb.nodesource.com/setup_6.x | bash - && \
apt-get install -y build-essential nodejs
#ADDED this code to supposedly install npm on the linux container
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
WORKDIR /src
COPY ["PBS.Hypercomb.React.csproj", "."]
RUN dotnet restore "PBS.Hypercomb.React.csproj"
COPY . .
WORKDIR "/src/"
RUN dotnet build "PBS.Hypercomb.React.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "PBS.Hypercomb.React.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "PBS.Hypercomb.React.dll"]
Unfortunately, I am still receiving the same errors.
You've installed node/npm in the 'base' section of your dockerfile. It needs to be in the 'build' section, like this
FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
#ADDED this code to supposedly install npm on the linux container
RUN apt-get update && \
apt-get install -y wget && \
apt-get install -y gnupg2 && \
wget -qO- https://deb.nodesource.com/setup_6.x | bash - && \
apt-get install -y build-essential nodejs
#ADDED this code to supposedly install npm on the linux container
WORKDIR /src
COPY ["PBS.Hypercomb.React.csproj", "."]
RUN dotnet restore "PBS.Hypercomb.React.csproj"
COPY . .
WORKDIR "/src/"
RUN dotnet build "PBS.Hypercomb.React.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "PBS.Hypercomb.React.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "PBS.Hypercomb.React.dll"]
To Begin I have created .net core 6 project with react.js from visual studio 2022.
I have added docker to my project as well.
I have been following this tutorial.
"Quickstart: Use Docker with a React Single-page App in Visual Studio"
https://learn.microsoft.com/en-us/visualstudio/containers/container-tools-react?view=vs-2022
I came to the point where I'm able to build my image however when I'm starting my docker container it is running only my backend api, react app/client is not loading at all.
Any Ideas?
here is how my docker file looks like
#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["admin_tool_api_ui/admin_tool_api_ui.csproj", "admin_tool_api_ui/"]
RUN dotnet restore "admin_tool_api_ui/admin_tool_api_ui.csproj"
COPY . .
WORKDIR "/src/admin_tool_api_ui"
RUN dotnet build "admin_tool_api_ui.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "admin_tool_api_ui.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "admin_tool_api_ui.dll"]
First of all, I feel your pain. Thanks to Microsoft documentation I'm now a person with high level of patiency, I learned to accept things as they are in life.
Second, I think you are missing the front-end build, which is this piece:
FROM node:16 AS build-web
COPY ./admin_tool_api_ui/ClientApp/package.json /admin_tool_api_ui/ClientApp/package.json
COPY ./admin_tool_api_ui/ClientApp/package-lock.json /admin_tool_api_ui/ClientApp/package-lock.json
WORKDIR /admin_tool_api_ui/ClientApp
RUN npm ci
COPY ./admin_tool_api_ui/ClientApp/ /admin_tool_api_ui/ClientApp
RUN npm run build
So your final Dockerfile can be something like this:
#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["admin_tool_api_ui/admin_tool_api_ui.csproj", "admin_tool_api_ui/"]
RUN dotnet restore "admin_tool_api_ui/admin_tool_api_ui.csproj"
COPY . .
WORKDIR "/src/admin_tool_api_ui"
RUN dotnet build "admin_tool_api_ui.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "admin_tool_api_ui.csproj" -c Release -o /app/publish
FROM node:16 AS build-web
COPY ./admin_tool_api_ui/ClientApp/package.json /admin_tool_api_ui/ClientApp/package.json
COPY ./admin_tool_api_ui/ClientApp/package-lock.json /admin_tool_api_ui/ClientApp/package-lock.json
WORKDIR /admin_tool_api_ui/ClientApp
RUN npm ci
COPY ./admin_tool_api_ui/ClientApp/ /admin_tool_api_ui/ClientApp
RUN npm run build
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
COPY --from=build-web /admin_tool_api_ui/ClientApp/build ./ClientApp/build
ENTRYPOINT ["dotnet", "admin_tool_api_ui.dll"]
I just set property "Copy to Output directory" = "Copy always" for all React related files ClientApp directory hierarchy via "Properties" dialog.
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"]