宝塔部署Vue+Django网站的最快教程

一、准备工作

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;
}