座右铭:怎么简单怎么来,以实现功能为主。
欢迎大家关注公众号与我交流
项目目录结构,在 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
完成最后的配置修改就可以开始部署啦
- 在 vue 项目中 要修改 axios 请求后端的 api url地址
- 修改 server 下 mysql 配置
- mysql_host 为本机真实ip
- mysql 其他配置为 docker-compose.yml 中的配置
- 进入到 vue项目中 先build 一下,生成 dist 文件
- 在父级目录下,即 Project 目录下 运行 docker-compose up -d,等待流程结束
- 进入到 server 的 容器中,进行数据库迁移等操作
- python manage.py makemigrations
- python manage.py migrate
- python manage.py createsuperuser
- 然后 就可以通过 IP:5173 访问你部署好的项目啦