Dockerize一个React-Django项目，其中前端服务来自Django

Question

我正在Django内部服务react应用程序，我试图使用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

Answer 1

我编辑了你的Dockerfile

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

Answer 2

问题是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 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"]

我不确定您的需求是什么，但对于生产环境，我建议将前端和Django应用程序分离到不同的容器中。与前端应用程序相比，后端应用程序具有非常不同的可伸缩性和硬件需求。您仍然可以使用Docker-compose将其打包到一个应用程序中。