前后端入门-django vue 项目使用docker compose部署（完整）

楚茂实

2023-12-01

根据不同网络环境可以使用不同的docker-compose写法。

写法一：docker-compose 可以根据基础镜像包创建并按参数启动容器。可以离线方式部署使用。比较快。

写法二：docker-compose 可以根据dockerfile文件拉取镜像创建并按参数启动容器。可以外网开发环境时使用，方便开发调试。比较慢。

基础镜像打包部分可以参考博主的以往博客内容。

1 环境

# 软件版本

npm 6.14.15

centos 7.6

docker 20.10.8

docker-compose v2.6.1

node 14.17.6

vue 2.9.6

nginx 1.23.4

django 3.2.5

2 项目结构介绍

路径没有硬要求，后续打包时填写目录正确即可。

project
├── docker-compose.yml			# docker-compose 配置文件
├── docker_env
│   ├── django
│   │   ├── DockerfileBuild		# server docker 基础镜像包配置
│   ├── nginx
│   │   └── my.conf			# nginx 配置
│   └── web
│       └── DockerfileBuild		# web docker 基础镜像包配置
├── hippo
│   ├── docker_start.sh
│   ├── hippo_api
│   │   ├── db.sqlite3
│   │   ├── hippo_api
│   │   ├── __init__.py
│   │   ├── logs
│   │   ├── manage.py
│   │   └── scripts
│   ├── pip.conf
│   └── requirements.txt
└── hippo_web
    ├── dist
        ├── index.html
        └── static

3 前期准备

3.1 前端部分

3.1.1 vue源码部分调整-为实现跨域请求

# 主要修改vue axios请求后端url部分
# 所有请求后端的url前添加/api 字符串,方便同一个主机不同端口实现访问后端接口
# 如：
this.$axios.post(`/api/users/login/`,{}

3.1.2 vue项目打包

# 进入项目hippo目录
cd project/hippo_web
# npm打包vue项目
npm run build

# project/hippo_web下生成dist目录

3.1.3 编写nginx配置文件

# my.conf
server {
    listen       8080;
    server_name localhost;
    client_max_body_size 100M;
    location / {
        proxy_set_header Host $http_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 https;
        root /usr/share/nginx/html;
        index  index.html index.php index.htm;
        try_files $uri $uri/ /index.html; # 实现网页刷新时跳转原网页 一定要加
    }

    location /api/ { 	# 后端api部分跳转
        proxy_set_header Host $http_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;
        rewrite ^/api/(.*)$ /$1 break;  #重写
        proxy_pass http://192.168.192.10:8000/; # 设置代理服务器的协议和地址 本地宿主机192.168.192.10
   }
}

3.2 后端部分

3.2.1 配置文件准备

# 进入项目hippo目录
cd project/hippo
# 编辑文件 pip.conf文件
vi pip.conf

[global]
index-url = https://pypi.tuna.tsinghua.edu.cn/simple
[install]
trusted-host=mirrors.aliyun.com

# 生成 requirements.txt
pip freeze > requirements.txt

# 相对路径启动django项目，启动命令取决于manage.py的相对路径
vi docker_start.sh

#!/bin/bash
python hippo_api/manage.py runserver 0.0.0.0:8000

其余数据库配置文件可以自行修改django项目seting配置文件，本文重点docker打包。

3.2.2 权限配置(一定要配置)

# 服务启动脚本赋权
chmod +x project/hippo/docker_start.sh

4 Dockerfile编写

4.1 vue部分

# project/docker_env/web/DockerfileBuild
# 拉取基础镜像
FROM nginx:alpine

# 拷贝nginx配置文件
COPY ./docker_env/nginx/my.conf /etc/nginx/conf.d/my.conf

# 拷贝打包好的项目
COPY ./hippo_web/dist /usr/share/nginx/html

4.2 django部分

# project/docker_env/django/DockerfileBuild
# 建立 python3.8 环境
FROM python:3.8.16-alpine

# 镜像作者
MAINTAINER FEIFEI

# 设置 python 环境变量
ENV PYTHONUNBUFFERED 1

# apk 镜像源配置
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

# 设置pip源为国内源
COPY ./hippo/pip.conf /root/.pip/pip.conf

# 安装部分必要包
RUN apk update && apk add bash bash-doc bash-completion git freetds-dev jpeg-dev linux-headers mysql-client mariadb-dev build-base libffi-dev openssl-dev zlib-dev bzip2-dev pcre-dev ncurses-dev readline-dev tk-dev postgresql-dev

# 安装网络检查工具 ping telnet 
RUN apk add iputils busybox-extras

# 在容器内创建backend文件夹
RUN mkdir -p /backend

# 设置容器内工作目录
WORKDIR /backend

# 将当前目录文件加入到容器工作目录中（. 表示当前宿主机目录）
ADD ./hippo /backend

# pip安装依赖
# RUN python3 -m pip install -i https://mirrors.aliyun.com/pypi/simple/ -r ./requirements.txt
RUN pip install -r requirements.txt

# 启动服务命令
CMD ["chmod +x /backend/docker_start.sh"]
CMD ["/backend/docker_start.sh"]

4.3 docker-compose部分

4.3.1 基于基础镜像写法

该方式适合离线部署，即网络为内网，不能访问外网时。

# project/docker-compose.yml
version: '3'
services:
  django-server:
    container_name: django-server
    image: django_docker_img:v1
    restart: always
    build:
      context: ./
    ports:
      - '8000:8000'
    expose:
      - "8000"
    environment:
      TZ: Asia/Shanghai
    volumes:
      - ./hippo:/backend


  vue-web-nginx:
    image: vue_web_img:v1
    container_name: vue-web-nginx
    restart: always
    build:
      context: ./
    environment:
      TZ: Asia/Shanghai
    volumes:
      - ./docker_env/nginx/my.conf:/etc/nginx/conf.d/my.conf
      - ./hippo_web/dist:/usr/share/nginx/html
    ports:
      - '8080:8080'
    expose:
      - "8080"

4.3.2 基于dockerfile写法

该方式适合外网开发调试时使用。

# project/docker-compose.yml
version: '3'
services:
  django-server:
    container_name: django-server
    restart: always
    build:
      context: ./
      dockerfile: ./docker_env/web/DockerfileBuild
    ports:
      - '8000:8000'
    expose:
      - "8000"
    environment:
      TZ: Asia/Shanghai
    volumes:
      - ./hippo:/backend


  vue-web-nginx:
    image: vue_web_img:v1
    container_name: vue-web-nginx
    restart: always
    build:
      context: ./
      dockerfile: ./docker_env/web/DockerfileBuild
    environment:
      TZ: Asia/Shanghai
    volumes:
      - ./docker_env/nginx/my.conf:/etc/nginx/conf.d/my.conf
      - ./hippo_web/dist:/usr/share/nginx/html
    ports:
      - '8080:8080'
    expose:
      - "8080"

5 docker-compose部署

5.1 基于基础镜像方式

5.1.1 打包后端 django build包

# docker build
cd project/
docker build -f ./docker_env/django/DockerfileBuild -t django_docker_img:v1 .

# 镜像保存
docker save -o django_docker_img.tar django_docker_img:v1

5.1.2 打包前端 vue build包

# docker build
# 进项目目录
cd project/
docker build -f ./docker_env/web/DockerfileBuild -t vue_web_img:v1 .

# 镜像保存
docker save -o vue_web_img.tar vue_web_img:v1

5.1.3 docker-compose部署前后端

# 加载离线镜像
docker load -i django_docker_img.tar
docker load -i vue_web_img.tar

# 检查镜像build镜像是否存在
docker images

REPOSITORY                      TAG              IMAGE ID       CREATED         SIZE
vue_web_img                     v1               d6f6f145ebc7   5 hours ago     57.4MB
django_docker_img               v1               0d8e92b76d0b   2 weeks ago     885MB

# docker-compose 创建并启动相应服务
cd project
docker-compose up -d

5.2 基于dockerfile方式

docker-compose部署前后端

# docker-compose 创建并启动相应服务
cd project
docker-compose up -d

6 docker服务验证

# 查看容器运行状态
docker ps

CONTAINER ID   IMAGE                      COMMAND                  CREATED          STATUS          PORTS                                               NAMES
c9ad20366d2a   vue_web_img:v1         "/docker-entrypoint.…"   40 minutes ago   Up 40 minutes   80/tcp, 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp   vue-web-nginx
04cbc60ee062   django_docker_img:v1   "/backend/docker_sta…"   40 minutes ago   Up 40 minutes   0.0.0.0:8000->8000/tcp, :::8000->8000/tcp           django-server

# 端口检查
netstat -anp | grep 8000
netstat -anp | grep 8080

# 浏览器访问
http://192.168.192.10:8080
http://192.168.192.10:8000