Vue + Django 项目部署指南

Vue + Django 部署指南

系统准备

1. 系统更新

bash 复制代码

sudo apt update
sudo apt upgrade

2. 基础工具安装

bash 复制代码

# Git
sudo apt install git -y

# 网络工具
sudo apt install net-tools -y

# 编辑器
sudo apt install vim -y

# 压缩工具
sudo apt install unzip -y

# SSH服务
sudo apt install openssh-server -y

# 云工具
sudo apt install cloud-guest-utils -y

# Redis
sudo apt install redis -y

# Nginx
sudo apt install nginx -y
sudo nginx -t
nginx -v

# 桌面环境增强
sudo apt install open-vm-tools-desktop
sudo reboot

3. 防火墙配置

bash 复制代码

# 启用 UFW
sudo ufw enable
sudo ufw status

# 开放必要端口
sudo ufw allow ssh
sudo ufw allow 80

# 配置 sudo 权限（可选）
sudo visudo
# 添加以下行：
# youruser ALL=(ALL) NOPASSWD: /usr/sbin/ufw

4. MySQL 安装与配置

bash 复制代码

# 安装 MySQL
sudo apt install mysql-server mysql-client -y

# 检查状态
sudo systemctl status mysql
mysql --version

# 设置开机自启
sudo systemctl enable mysql
sudo systemctl start mysql

# 安全配置
sudo mysql_secure_installation

# 配置 root 密码
sudo mysql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'yourpassword';
FLUSH PRIVILEGES;
EXIT;

# 重启 MySQL
sudo systemctl restart mysql

# 创建软链接（如果需要）
sudo ln -s /var/run/mysqld/mysqld.sock /tmp/mysql.sock

5. 磁盘扩展（如果需要）

bash 复制代码

# 查看磁盘信息
sudo fdisk -l
df -h
lsblk

# 扩展分区
sudo growpart /dev/sda 2
sudo resize2fs /dev/sda2
df -h

6. Node.js 环境配置

bash 复制代码

# 安装 Node.js 和 npm
sudo apt install nodejs npm -y

# 检查版本
node -v
npm -v

# 安装 Vue CLI
sudo npm install -g @vue/cli
vue --version

7. Conda 环境配置

bash 复制代码

# 下载并安装 Anaconda
sudo wget https://repo.anaconda.com/archive/Anaconda3-2024.06-1-Linux-x86_64.sh
bash ./Anaconda3-2024.06-1-Linux-x86_64.sh -b
sudo rm Anaconda3-2024.06-1-Linux-x86_64.sh 

# 配置环境变量
sudo vim ~/.bashrc
source ~/.bashrc
export PATH=~/anaconda3/bin:$PATH
source ~/.bashrc

# 检查安装
conda --version

# 创建 Python 环境
conda create --name django_env python=3.10
conda init
source ~/.bashrc
conda activate django_env

# 或者
sudo apt install python3 python3-pip python3-venv
python3 -m venv .venv
source .venv/bin/activate

# 或者
pip install virtualenv
virtualenv venv

项目部署

1. 获取代码

bash 复制代码

cd /var/www
git clone xxxx
sudo chmod 777 -R backstage-admin

2. 后端部署

2.1 环境配置

bash 复制代码

cd 项目/django项目/
pip install -r requirements.txt

2.2 配置文件

创建并编辑 .env 文件：

bash 复制代码

sudo vim .env

配置内容：

ini 复制代码

# MySQL 配置
DB_NAME=数据库
DB_USER=root
DB_PASSWORD=你的密码
DB_HOST=127.0.0.1
DB_PORT=3306

# Django 配置
SECRET_KEY=your_secret_key
LANGUAGE_CODE=zh-hans
TIME_ZONE=Asia/Tokyo

# 静态文件配置
STATIC_URL=/static/
STATIC_ROOT=staticfiles
MEDIA_URL=/media/
MEDIA_ROOT=media

2.3 启动服务

bash 复制代码

cd scripts && bash start.sh

3. 前端部署

3.1 构建

bash 复制代码

cd your-vue-project
npm install
npm run build:prod

4. Nginx 配置

创建配置文件：

bash 复制代码

sudo vim /etc/nginx/conf.d/vue.conf

配置内容：

nginx 复制代码

server {
    listen 80;
    listen [::]:80;
    server_name 192.168.3.100;
    charset utf-8;

    root /var/www/前端目录/dist;
    index index.html;
    
    location ~* \.(html)$ {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
        try_files $uri $uri/ /index.html;
    }
    
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }
    
    location / {
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/ {
        proxy_pass http://127.0.0.1:8000/;
        proxy_set_header Host $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;
        proxy_cookie_flags ~ secure httponly samesite=strict;
    }

    location /static/ {
        alias /var/www/前端目录/dist/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }

    location /django-static/ {
        alias /var/www/后端目录/staticfiles/;
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }

    location /media/ {
        alias /var/www/后端目录/media/;
        expires 1y;
        add_header Cache-Control "public";
        try_files $uri =404;
    }

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
}

5. Gunicorn 配置

5.1 安装 Gunicorn

bash 复制代码

pip install gunicorn

5.2 创建服务文件

bash 复制代码

sudo vim /etc/systemd/system/gunicorn.service

配置内容：

ini 复制代码

[Unit]
Description=gunicorn daemon for Django
After=network.target

[Service]
User=your_user
Group=www-data
WorkingDirectory=/path/to/后端目录/django项目
ExecStart=/path/to/anaconda3/envs/django_env/bin/gunicorn \
          --access-logfile - \
          --workers 3 \
          --bind 127.0.0.1:8000 \
          fs_admin.wsgi:application

Environment="DJANGO_SETTINGS_MODULE=fs_admin.settings"
Environment="PYTHONUNBUFFERED=1"

Restart=always

[Install]
WantedBy=multi-user.target

5.3 启动服务

bash 复制代码

sudo systemctl daemon-reexec  # 避免中文路径出问题
sudo systemctl daemon-reload
sudo systemctl start gunicorn
sudo systemctl enable gunicorn
sudo systemctl status gunicorn

注意事项

请确保替换所有配置文件中的占位符（如密码、路径等）
确保所有必要的端口都已开放
检查文件权限是否正确
定期备份数据库
监控系统日志以排查问题

系统日志查看

1. Nginx 日志

bash 复制代码

# 访问日志
sudo tail -f /var/log/nginx/access.log

# 错误日志
sudo tail -f /var/log/nginx/error.log

# 查看最后100行
sudo tail -n 100 /var/log/nginx/error.log

2. Gunicorn 日志

bash 复制代码

# 查看 Gunicorn 服务状态和日志
sudo systemctl status gunicorn

# 查看详细日志
sudo journalctl -u gunicorn

# 实时查看日志
sudo journalctl -u gunicorn -f

# 查看最近的日志
sudo journalctl -u gunicorn --since "1 hour ago"

3. MySQL 日志

bash 复制代码

# 错误日志
sudo tail -f /var/log/mysql/error.log

# 慢查询日志
sudo tail -f /var/log/mysql/mysql-slow.log

4. 系统日志

bash 复制代码

# 系统日志
sudo tail -f /var/log/syslog

# 内核日志
sudo dmesg | tail

# 查看系统服务状态
sudo systemctl status

5. 日志分析技巧

使用 grep 过滤关键字：

bash 复制代码

# 在 Nginx 错误日志中查找 404 错误
sudo grep "404" /var/log/nginx/error.log

# 在系统日志中查找特定服务
sudo grep "gunicorn" /var/log/syslog

使用 less 查看大文件：

bash 复制代码

# 使用 less 查看日志文件
sudo less /var/log/nginx/error.log

# 在 less 中搜索（按 / 后输入关键字）
# 按 n 查找下一个
# 按 N 查找上一个
# 按 q 退出

日志轮转：

bash 复制代码

# 查看日志轮转配置
sudo cat /etc/logrotate.d/nginx
sudo cat /etc/logrotate.d/mysql

# 手动执行日志轮转
sudo logrotate -f /etc/logrotate.d/nginx

常见问题排查：

bash 复制代码

# 检查磁盘空间
df -h

# 检查内存使用
free -h

# 检查系统负载
top
htop  # 如果已安装

日志清理：

bash 复制代码

# 清理旧的日志文件
sudo find /var/log -type f -name "*.gz" -delete
sudo find /var/log -type f -name "*.old" -delete

# 清空日志文件（谨慎使用）
sudo truncate -s 0 /var/log/nginx/error.log

6. 日志监控建议

定期检查日志文件大小
设置日志轮转策略
配置日志告警（如使用 fail2ban）
保留重要日志的备份
使用日志分析工具（如 ELK Stack）