一、准备工作

1.一台云服务器和一台笔记本电脑。

2.已准备好的Django后端文件和Vue3前端文件。

二、安装宝塔面板

1.使用SSH软件（比如“tabby terminal”）连接服务器，输入以下命令安装宝塔面板（debian系统）：

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

2.前往云服务器官网，在防火墙放行前端、后端、宝塔登录的端口（以你需要的为准）。

3.首次进入宝塔面板，一般会给你推荐安装的应用，你只需要安装：Nginx（1.3） 和 Mysql（8.0）即可，安装方式可选“极速安装”。

三、上传前端项目

1.点击“网站”菜单，添加一个“HTML项目”（没有的话可选静态PHP项目），输入域名（或服务器ip地址），再创建一个根目录“/www/wwwroot/ibrush_front”（名字可随便取），确定即可。

2.将vue3的dist文件夹压缩成zip上传到上述目录，再解压。

3.点开配置文件（nginx）修改，参考如下：

server
{
    listen 80;
    # 你的服务器域名或ip
    server_name 8.163.117.91;
    index index.html index.htm;

    # 前端网站的根目录（要写到dist）
    root /www/wwwroot/ibrush_front/dist;
    
    # Vue3前端
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Django 后端
    location /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;
    }
    
    # 后端图片路径
    location ^~ /media/ {
        alias /www/wwwroot/beekao.com/ibrush_end/media/;
    }
    
    location ^~ /static/ {
        alias /www/wwwroot/beekao.com/ibrush_end/static/;
    }
    
    #CERT-APPLY-CHECK--START
    # 用于SSL证书申请时的文件验证相关配置 -- 请勿删除并保持这段设置在优先级高的位置
    include /www/server/panel/vhost/nginx/well-known/8.163.117.91.conf;
    #CERT-APPLY-CHECK--END

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/html_8.163.117.91.conf;
    #REWRITE-END

    # 禁止访问的敏感文件
    location ~* (\.user.ini|\.htaccess|\.htpasswd|\.env.*|\.project|\.bashrc|\.bash_profile|\.bash_logout|\.DS_Store|\.gitignore|\.gitattributes|LICENSE|README\.md|CLAUDE\.md|CHANGELOG\.md|CHANGELOG|CONTRIBUTING\.md|TODO\.md|FAQ\.md|composer\.json|composer\.lock|package(-lock)?\.json|yarn\.lock|pnpm-lock\.yaml|\.\w+~|\.swp|\.swo|\.bak(up)?|\.old|\.tmp|\.temp|\.log|\.sql(\.gz)?|docker-compose\.yml|docker\.env|Dockerfile|\.csproj|\.sln|Cargo\.toml|Cargo\.lock|go\.mod|go\.sum|phpunit\.xml|phpunit\.xml|pom\.xml|build\.gradl|pyproject\.toml|requirements\.txt|application(-\w+)?\.(ya?ml|properties))$
    {
        return 404;
    }

    # 禁止访问的敏感目录
    location ~* /(\.git|\.svn|\.bzr|\.vscode|\.claude|\.idea|\.ssh|\.github|\.npm|\.yarn|\.pnpm|\.cache|\.husky|\.turbo|\.next|\.nuxt|node_modules|runtime)/ {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }

    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }

    location ~ .*\\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    access_log  /www/wwwlogs/8.163.117.91.log;
    error_log  /www/wwwlogs/8.163.117.91.error.log;
}

四、上传后端项目

1.本地生成依赖文件后，需要手动打开依赖文件，在末尾那行添加“gunicorn”；将整个后端文件压缩成zip，上传到宝塔的“/www/wwwroot/beekao.com/ibrush_end”路径中（没有就自己创建，路径可自定义，怎么好记怎么来）。

2.点击“网站”菜单，添加“python项目”，项目路径可自定义（用于存放后端文件），“python环境”可点击“环境管理”自行创建一个虚拟环境（python版本最好用与你本地开发保持相同，没有就用最接近的），参考配置如下：

3.点开“配置文件”将其全选并删除即可（配置已经写在前端的nginx里了，防止冲突）；耐心等待一会，等所有依赖下载完成后（点击下图的终端可以看进度），就可以启动Python项目了。

五、配置数据库

1.点击“数据库”菜单，即可添加数据库，数据库名、用户名、密码要与django的settings.py中保持一致！

2.点击“导入”，可将本地的mysql数据库，一键导入，非常方便。

六、访问

这是一个前后端分享的项目，后端仅提供数据api和图片url，展示主要由前端完成。因此，在浏览器“地址栏”中，直接输入你的域名或ip，即可访问该网站。

需要注意，在中国大陆，使用域名访问必须要工信部备案（大约一周时间）；如果用ip只需要在线实名即可。

常见问题：

1.不会下载文件？答：请查看下载帮助。
2.我应该下载哪个文件/软件？ 答：通常“数字后缀”表示版本号（越大越新），下载数字最大的即可！
3.下载地址为什么隐藏了？ 答：防止爬虫索引，敏感内容登录即可免费下载！