Dockerize проекта React-Django, в котором фронтенд обслуживается из Django

Я обслуживаю приложение react из Django и пытаюсь развернуть его, используя docker-compose up -d --build.

Мой каталог проекта выглядит следующим образом:

root
├──project (django)
| ├──frontend/ # react project is here
| ├──project/
| ├──static/
| ├──Dockerfile         //Dockerfile for backend image
| ├──entrypoint.sh
| ├──manage.py
| ├──requirements.txt
└──docker-compose.yaml

Вот мой текущий сценарий развертывания:

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

Ошибка, которую я получаю

>  => 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
<<<0

Я отредактировал ваш Dockerfile, попробуйте, если это работает:

# 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 ./
RUN pip install -r requirements.txt

# set work directory
WORKDIR /usr/src/app/frontend
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"]

Проблема в том, что package.json и package-lock.json присутствуют не в директории, где вы запускаете docker build, а (вероятно) в поддиректории вашего фронтенда.

Заменив эти две строки на:

COPY frontend/package.json ./
COPY frontend/package-lock.json ./

должно сработать. Но еще лучше, поскольку вы все равно все копируете, вы можете переместить это в начало:

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

Я не уверен в ваших потребностях, но для производственной среды я бы предложил разделить фронтенд и Django-приложение в разные контейнеры. Бэкенд-приложения имеют совсем другие потребности в масштабировании и аппаратном обеспечении, чем фронтенд-приложения. Вы все еще можете упаковать их в одно приложение, используя, например, Docker-compose.

Вернуться на верх