docker 部署 django + mysql + vue 项目

项目目录结构,在 Vue 和 Django 项目 根目录下 创建 Dockerfile文件,在父级目录下 创建 docker-compose.yml 文件
Project # 父级目录
├─client # vue3 项目目录
│  ├─public
│  └─src
│      ├─* files
│  ├─* files
│  ├─Dockerfile
└─server # Django 项目目录
│    ├─server
│    └─service
│    ├─Dockefile
│    └─manage.py
└─docker-compose.yml

client 下的 Dockerfile这么写

FROM node:latest

LABEL name="client-vue" auth="your name"

RUN mkdir -p /app/client

WORKDIR /app/client

RUN npm config set -g registry https://registry.npmmirror.com/

COPY dist/ /app/client

COPY package.json /app/client/

RUN npm install

RUN echo "client build finished ..."

server 下的 Dockerfile 这么写

FROM python:3.8

LABEL name="server-django" auth="your name"

RUN mkdir -p /app/server

WORKDIR /app/server

COPY . /app/server

RUN apt-get update && apt-get install -y libgl1

RUN pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt

RUN echo "server-django build finished ..."

然后 Project 下的 docker-compose.yml 这么写

version: '3.3'
services:
  ess-client:
    build: ./client
    command: node ./server.js
    ports:
      - "5173:5173"
    restart: always
    volumes:
      - ./client:/app/client
    container_name: ess_client_vue
  ess-server:
    build: ./server
    command: python manage.py runserver 0.0.0.0:8088
    volumes:
      - ./server:/app/server
    ports:
      - "8088:8088"
    restart: always
    container_name: ess_server_django
    depends_on:
      - ess-db
  ess-db:
    image: mysql:latest
    container_name: ess_db_mysql
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=myess
    ports:
      - "3307:3306"
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/conf:/etc/mysql/conf.d
    restart: always

完成最后的配置修改就可以开始部署啦

  1. 在 vue 项目中 要修改 axios 请求后端的 api url地址
  2. 修改 server 下 mysql 配置
    1. mysql_host 为本机真实ip
    2. mysql 其他配置为 docker-compose.yml 中的配置
  3. 进入到 vue项目中 先build 一下,生成 dist 文件
  4. 在父级目录下,即 Project 目录下 运行 docker-compose up -d,等待流程结束
  5. 进入到 server 的 容器中,进行数据库迁移等操作
    1. python manage.py makemigrations
    2. python manage.py migrate
    3. python manage.py createsuperuser
  6. 然后 就可以通过 IP:5173 访问你部署好的项目啦
posted @ 2024-03-08 15:35  卫龙吖  阅读(59)  评论(0编辑  收藏  举报