Dockerize a React-Django project where the frontend is served from Django-CodePudding

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

CodePudding user response：

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"]

CodePudding user response：

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 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.