一、准备工作

1.一台有公网IP的云服务器；

2.一台联网的电脑；

3.已准备好的Django项目文件（配置文件DEBUG=FALSE）。常用命令如下：

# 生成依赖文件
pip freeze > requirements.txt

# 收集静态文件
python manage.py collectstatic

# 检查迁移文件
python manage.py makemigrations
python manage.py migrate

二、开始安装

下面是网站的架构图：

Nginx (80)
                    ↓
        ┌─────────────────────┐
        │     Vue Frontend    │
        │   (dist 静态文件)    │
        └─────────────────────┘
                    ↓
        ┌─────────────────────┐
        │    Django API       │
        │   (Gunicorn)        │
        └─────────────────────┘
                    ↓
        ┌─────────────────────┐
        │    MySQL 8.0        │
        └─────────────────────┘

下面是文件的目录结构 ：

/www/dk_project/ibrush/
│
├── ibrush_end/              # Django
│   ├── Dockerfile
│   ├── requirements.txt
│   ├── manage.py
│   └── ibrush_end/
│
├── ibrush_font/             # Vue build 后的 dist
│   └── dist/
│
├── mysql/
│   └── data/            # 数据持久化
│
├── nginx/
│   └── default.conf
│  
├── ibrush_db.sql      # 本地数据库
│
└── docker-compose.yml     # 完整配置文件

（一）部署后端Django及依赖

1.使用SSH连接服务器，登录后，输入以下命令安装宝塔面板（debian系统）：

wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh && bash install_panel.sh ed8484bec

2.前往云服务器官网，在安全组（防火墙）放行前端、后端和宝塔登录端口（你的可能不同，以终端显示为准），然后保存一下终端里面的宝塔登录信息。提示：如果不放行端口，会一直报502错误，我就遇到了这一个大坑（还以为是我网站配置文件有问题，浪费了大量时间）。

==================================================================
Congratulations! Installed successfully!

========================面板账户登录信息==========================

 【云服务器】请在安全组放行 36666 端口
 外网ipv4面板地址: https://44.66.16.91:36666/fg12bfg5
 内网面板地址:     https://172.22.23.2:36666/fg12bfg5
 username: w321p3uf
 password: feddddf2

3.通过外网地址，登录宝塔，首次登录会弹出以下窗口，选择Docker套件即可。

4.将django项目文件（ibrush）上传到“/www/dk_project/wwwroot/”目录，然后解压，再确保项目中有以下文件（没有则需手动创建）：

Dockerfile
docker-compose.yml
requirements.txt
manage.py

其中，Dockerfile文件内容如下（Python版本指定到3.10就可以了，不要细化到3.10.x，否则可能出错）：

FROM python:3.10

WORKDIR /app

COPY . /app

RUN pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
RUN pip install --upgrade pip
RUN pip install -r requirements.txt

EXPOSE 8000

CMD ["gunicorn", "ibrush_end.wsgi:application", "--bind", "0.0.0.0:8000"]

5.检查刚才上传到服务器上的django配置文件“settings.py”，以下关键内容是否设置好：

# 设置了密钥
from django.core.management.utils import get_random_secret_key
SECRET_KEY = get_random_secret_key()

# 关闭debug
DEBUG = False

# 允许指定的前端访问
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = ['http://8.163.117.91:8080', ]
CSRF_TRUSTED_ORIGINS = ['http://8.163.117.91:8080', ]

如果你修改了配置文件，需要重启django容器，命令如下：

docker compose restart backend

（二）部署MySQL数据库

1.在ibrush目录下，创建一个新目录“mysql”，再在“mysql”里面创建一个目录“data”。

2.将本地的sql文件上传到“ibrush”目录下，切换到当前目录，然后执行以下命令（-p后的密码需要替换成你的）将数据库导入：

docker exec -i ibrush_mysql mysql -u root -p12345678 ibrush_db < ibrush_db.sql

3.执行下面的命令（-p后的密码需要替换成你的），如果看到表，说明就导入成功了：

docker exec -it ibrush_mysql mysql -u root -p12345678 -e "show tables;" ibrush_db

（三）部署前端VUE项目

1.在ibrush目录下，创建一个新目录“ibrush_front”。

2.将打包好的前端项目（名字为dist）上传到此，然后解压。

（四）部署Nginx

1.在ibrush目录下，创建一个新目录“nginx”。

2.进入新目录，创建一个“default.conf”文件，内容如下：

server {
    listen 80;

    # 前端
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 后端API
    location /api/ {
        proxy_pass http://backend:8000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 静态文件
    location /static/ {
        alias /app/staticfiles/;
    }

    location /media/ {
        alias /app/media/;
    }
}

（五）构建容器

在网站目录（/www/dk_project/wwwroot/ibrush）内，创建一个“docker-compose.yml”文件。

内容如下（注意django配置文件的数据库信息改成'HOST': 'db'）：

version: "3.8"

services:

  db:
    image: mysql:8.0
    container_name: ibrush_mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: 1234
      MYSQL_DATABASE: ibrush_db
      MYSQL_USER: ibrush
      MYSQL_PASSWORD: 1234
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/data:/var/lib/mysql
    command: --default-authentication-plugin=mysql_native_password

  backend:
    build: ./ibrush_end
    container_name: ibrush_django
    restart: always
    ports:
      - "8000:8000"
    depends_on:
      - db
    volumes:
      - ./ibrush_end:/app
    working_dir: /app
    command: gunicorn ibrush_end.wsgi:application -b 0.0.0.0:8000

  nginx:
    image: nginx:latest
    container_name: ibrush_nginx
    ports:
      - "8080:80"
    volumes:
      - ./ibrush_font/dist:/usr/share/nginx/html
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - backend

5.创建Docker容器。首先，在宝塔的Docker设置中，添加一个加速url（https://docker.1ms.run），因为拉取国外镜像会被墙。然后用SSH连接服务器，依次输入以下命令：

# 切换到项目目录
cd /www/dk_project/wwwroot/ibrush

# 构建镜像
docker compose build

# 启动全部服务
docker compose up -d

# 初始化数据库
docker exec -it ibrush_django bash
python manage.py migrate
python manage.py createsuperuser

出现以下的类似内容，表示镜像构建完成：

提示：如果修改了“docker-compose.yml”文件，每次都需要先停止并删除旧容器，再重新创建容器并启动，可使用以下命令：

docker compose down
docker compose up -d

现在，通过“ip+端口”的方式，应该就可以正常访问前端和后端了。其实只需要记得前端的“ip+端口”分享给好友就行，后端是给我们自己开发看的。

当然，为了更加安全，你也可以将ip更换成域名，再套上CDN等。