如何使用宝塔和Docker部署Vue+Django网站

0310

一、准备工作

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

2.一台联网的电脑。

3.已准备好的Django5项目文件。常用命令如下：

# 生成依赖文件（需手动添加一个依赖“gunicorn”）
pip freeze > requirements.txt

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

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

4.已打包好的Vue3项目文件。常用命令如下：

# 运行本地项目
npm run dev

# 打包项目（会生成一个dist文件夹）
npm run build

5.常用mysql命令如下：

# 导出Mysql数据库（linux版，文件保存在命令执行目录）
docker exec -i ibrush_mysql mysqldump -uroot -p ibrush_db > ibrush_db.sql

# 导出Mysql数据库（windows版，文件保存在命令执行目录）
mysqldump -uroot -p ibrush_db > ibrush_db.sql

# 导入Mysql数据库（linux版，方法1，未配置过账号密码，需把文件放在当前目录）
docker exec -i ibrush_mysql mysql -uroot -p你的密码 ibrush_db < ibrush_db.sql

# 导入Mysql数据库（linux版，方法2，已经配置过账号密码）
docker exec -i ibrush_mysql mysql ibrush_db < ibrush_db.sql

# 创建数据库（可选，如果没有的话）
CREATE DATABASE ibrush_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
EXIT;

 

二、开始安装

下面是网站的架构图：

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_front/             # 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 -p666 ibrush_db < ibrush_db.sql

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

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

4.【可选】创建一个MySQL 配置文件，可避免root用户每次备份数据库都要输入密码。

（1）在“ibrush”目录下创建一个“conf”文件夹，再在里面创建一个“my.cnf”配置文件，里面写：

[client]
user=root
password=1234（密码以你的为准）

（2）设置权限600，终端执行“chmod 600 /www/dk_project/wwwroot/ibrush/mysql/conf/my.cnf”即可（或者用宝塔面板的文件管理手动设置也行）。

（3）导入数据库的命令为：“docker exec -i ibrush_mysql mysql ibrush_db < ibrush_db.sql”，这样导入数据库就不需要输入密码了。

 

（三）部署前端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.9"

services:

  db:
    image: mysql:8.0
    container_name: ibrush_mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: 666
      MYSQL_DATABASE: ibrush_db
      MYSQL_USER: ibrush
      MYSQL_PASSWORD: 666
    ports:
      - "3306:3306"
    volumes:
      - ./mysql/data:/var/lib/mysql
      - /www/mysql_backup/my.cnf:/root/.my.cnf:ro
    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_front/dist:/usr/share/nginx/html
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./ibrush_end/media:/app/media
      - ./ibrush_end/staticfiles:/app/staticfiles
    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等。

 

可选功能

1.使用Tabby终端登录服务器后，自动打开某个文件目录。可在Tabby软件的“配置文件”中的“auth: password”下面添加一个脚本命令（如下），保存后重启软件即可。

auth: password
      scripts:
        - expect: '#'
          send: cd /www/dk_project/wwwroot/ibrush\n
常见问题：
1.不会下载文件？答：请查看下载帮助。
2.我应该下载哪个文件/软件？ 答：通常“数字后缀”表示版本号（越大越新），下载数字最大的即可！
3.下载地址为什么隐藏了？ 答：防止爬虫索引，敏感内容登录即可免费下载！
THE END
后端开发
点赞0
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

站内搜索
开启精彩搜索