docker配置vue和django前后端分离项目

在本地电脑上开发完vue项目和django的项目应该如何配置呢声明我是先尝试进行单独进行配置两个项目分别建立其中的docker容器进行我先尝试本地进行跑一下发现vue项目不能访问到后端的接口发送请求会402或者502.最后还是尝试写docker-compose文件进行构建‘1首先我们进行创建目录myproject然后在里面创建如下目录2 backend放入后端项目文件后根目录有manage.py在里面创建dockerfile文件内容举例# 使用 Ubuntu Noble 作为基础镜像 FROM ubuntu:noble # 安装必要的工具和 Python RUN apt-get update apt-get install -y \ python3 \ python3-pip \ python3-venv \ python3-dev \ libmysqlclient-dev \ pkg-config \ git \ apt-get clean \ rm -rf /var/lib/apt/lists/* # 设置工作目录 WORKDIR /root # 创建虚拟环境 RUN python3 -m venv /opt/venv # 激活虚拟环境并更新 pip ENV PATH/opt/venv/bin:$PATH RUN pip install --upgrade pip # 复制 requirements.txt 并安装依赖 COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt # 复制项目文件 COPY . . # 收集静态文件 RUN python3 manage.py collectstatic # 暴露端口 EXPOSE 8215 # 运行 Django 开发服务器 CMD [python, manage.py, runserver, 0.0.0.0:8215]3 frontend放入前端文件后创建dockerfile内容举例# 使用官方Node.js镜像 FROM node:18 AS build-stage # 设置工作目录 WORKDIR /root # 复制package.json和package-lock.json COPY package*.json ./ # 安装依赖 RUN npm install # 复制项目文件 COPY . . # 构建Vue项目 RUN npm run build # 使用Nginx作为生产服务器 FROM nginx:stable-alpine AS production-stage # 复制自定义的 Nginx 配置文件 COPY nginx.conf /etc/nginx/conf.d/default.conf # 复制构建好的Vue项目到Nginx的HTML目录 COPY --frombuild-stage /root/dist /usr/share/nginx/html # 暴露端口 EXPOSE 8214 # 启动Nginx CMD [nginx, -g, daemon off;]然后创建nginx.conf文件内容举例server { listen 8214; # 监听 8214 端口 server_name localhost; # 前端静态文件 location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # 反向代理到后端服务 location /api/ { proxy_pass http://django-backend:8215/; # 修改为后端服务的名称 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 错误页面 error_page 500 502 503 504 /50x.html; location /50x.html { root /usr/share/nginx/html; } }4在写一下compose文件version: 3 services: backend: build: context: ./backend container_name: django-backend volumes: - ./backend:/root - ./backend/db.sqlite3:/root/db.sqlite3 # 持久化 SQLite 数据库文件 ports: - 8215:8215 networks: - mynetwork environment: - DEBUGTrue frontend: build: context: ./frontend container_name: vue-frontend volumes: - ./frontend:/root ports: - 8214:8214 networks: - mynetwork networks: mynetwork: driver: bridge目前我使用的db为sqlite的配置如果是其他数据库则需要其他配置最后在myproject含有使用终端运行命令docker-compose up --build进行构建加运行