linux宝塔面板部署 vue开发环境，django后端进行前后端分离部署

vue开发环境和配置文件准备

确保vue中转发配置文件config.js

我的后端接口是8000，所以前端配置的是实际运行端口在8001，然后转发到8001解决跨域问题，

/static转发用来获取静态文件

import { fileURLToPath, URL } from 'node:url'
import WindiCSS from 'vite-plugin-windicss'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
WindiCSS()
],
resolve: {
alias: {
"~":path.resolve(__dirname,"src")
}
},
server: {
port: 8001, // 自定义端口
proxy: {
// 方法1：代理所有 /api 请求
'/api': {
target: 'http://127.0.0.1:8000', // 用127.0.0.1代替localhost
changeOrigin: true,
rewrite: (path) => path.replace(/^\\/api/, ''),
configure: (proxy, options) => {
proxy.on('error', (err, req, res) => {
console.log('代理错误:', err);
});
proxy.on('proxyReq', (proxyReq, req, res) => {
console.log('代理请求:', req.method, req.url, '->', proxyReq.path);
});
}
},
'/static': {
target: 'http://localhost:8000/',
changeOrigin: true,
}
}
},
})

面板操作，选择安装node_module

域名管理写自己服务的访问地址，去掉http://，只保留数字

记得打开外网映射

进行保存之后，会自动安装node环境，自动生成nginx配置文件，

# 新增：代理后端静态文件，需要访问后端的静态文件
    location /static/ {
        proxy_pass http://127.0.0.1:8000/static/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 缓存静态文件
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

静态文件的转发

是我自己需要进行添加的

server
{
listen 80;#服务器监听暴露出来的端口
server_name 服务器访问地址，只保留数字部分;
index index.html index.htm default.htm default.html;
include /www/server/panel/vhost/nginx/extension/xjau_label_vue/*.conf;
#root /www/wwwroot/xjau-label-vue;
#CERT-APPLY-CHECK–START
# 用于SSL证书申请时的文件验证相关配置 — 请勿删除
include /www/server/panel/vhost/nginx/well-known/xjau_label_vue.conf;
#CERT-APPLY-CHECK–END

#SSL-START SSL相关配置
#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 伪静态相关配置
include /www/server/panel/vhost/rewrite/node_xjau_label_vue.conf;
#REWRITE-END

#禁止访问的文件或目录
location ~ ^/(\\.user.ini|\\.htaccess|\\.git|\\.svn|\\.project|LICENSE|README.md|package.json|package-lock.json|\\.env) {
return 404;
}

#一键申请SSL证书验证目录相关设置
location /.well-known/ {
root /www/wwwroot/xjau-label-vue;
}

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

# HTTP反向代理相关配置开始 >>>
location ~ /purge(/.*) {
proxy_cache_purge cache_one $host$request_uri$is_args$args;
}

location / {
proxy_pass http://127.0.0.1:8001;#ipv4地址，前端实际端口
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
proxy_set_header X-Host $host:$server_port;
proxy_set_header X-Scheme $scheme;
proxy_connect_timeout 30s;
proxy_read_timeout 86400s;
proxy_send_timeout 30s;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# 新增：代理后端静态文件，需要访问后端的静态文件
location /static/ {
proxy_pass http://127.0.0.1:8000/static/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

# 缓存静态文件
expires 30d;
add_header Cache-Control "public, no-transform";
}
# HTTP反向代理相关配置结束 <<<

access_log /www/wwwlogs/xjau_label_vue.log;
error_log /www/wwwlogs/xjau_label_vue.error.log;
}

配置django后端（采用docker部署）

由于python环境安装失败需要glbic版本有要求，更新到最新还是没有达到要求，所以采用docker进行部署。

面板安装好docker

自己在本地配置好docker容器后进行拉取

然后右侧操作的创建容器，写容器的名称

容器配置

本地端口就是前端需要转发到的后端端口8000，容器端口就是实际后端在容器里面运行的口8125，我这边的容器配置是，请详细看dockerfile配置文件，

EXPOSE 8215

CMD ["gunicorn", "–bind", "0.0.0.0:8215", "–workers", "4", "–timeout", "300", "multisystem.wsgi:application"]

实际容器运行是8215端口

FROM python:3.11-slim

ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1
ENV DEBIAN_FRONTEND=noninteractive

# 设置国内镜像源
RUN rm -f /etc/apt/sources.list.d/debian.sources && \\
echo "Types: deb" > /etc/apt/sources.list.d/debian.sources && \\
echo "URIs: http://mirrors.aliyun.com/debian" >> /etc/apt/sources.list.d/debian.sources && \\
echo "Suites: trixie trixie-updates trixie-backports" >> /etc/apt/sources.list.d/debian.sources && \\
echo "Components: main contrib non-free non-free-firmware" >> /etc/apt/sources.list.d/debian.sources && \\
echo "Signed-By: /usr/share/keyrings/debian-archive-keyring.gpg" >> /etc/apt/sources.list.d/debian.sources && \\
echo "" >> /etc/apt/sources.list.d/debian.sources && \\
echo "Types: deb" >> /etc/apt/sources.list.d/debian.sources && \\
echo "URIs: http://mirrors.aliyun.com/debian-security" >> /etc/apt/sources.list.d/debian.sources && \\
echo "Suites: trixie-security" >> /etc/apt/sources.list.d/debian.sources && \\
echo "Components: main contrib non-free non-free-firmware" >> /etc/apt/sources.list.d/debian.sources && \\
echo "Signed-By: /usr/share/keyrings/debian-archive-keyring.gpg" >> /etc/apt/sources.list.d/debian.sources

# 安装系统依赖（包含MySQL开发库）
RUN apt-get update && apt-get install -y –no-install-recommends \\
gcc \\
g++ \\
libgdiplus \\
libc6-dev \\
libx11-dev \\
libxext-dev \\
libxrender-dev \\
libxtst-dev \\
libxi-dev \\
libgomp1 \\
libssl-dev \\
libffi-dev \\
libicu-dev \\
icu-devtools \\
pkg-config \\
default-libmysqlclient-dev \\
&& apt-get clean \\
&& rm -rf /var/lib/apt/lists/*

WORKDIR /app

COPY requirements.txt .

# 安装Python依赖
RUN pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ && \\
pip config set global.trusted-host mirrors.aliyun.com && \\
pip install –no-cache-dir –upgrade pip && \\
pip install –no-cache-dir wheel setuptools && \\
pip install –no-cache-dir -r requirements.txt

COPY . .

RUN python manage.py collectstatic –noinput
RUN mkdir -p /app/static/docxs /app/static/xlsxs

EXPOSE 8215

CMD ["gunicorn", "–bind", "0.0.0.0:8215", "–workers", "4", "–timeout", "300", "multisystem.wsgi:application"]

配置一下数据库的链接

1. 首先检查当前的数据库配置

bash

# 进入容器
docker exec -it docx-backend bash

# 查看Django设置中的数据库配置
python manage.py shell -c "
from django.conf import settings
print(settings.DATABASES)
"

# 查看当前目录权限
ls -la /app/
ls -la /app/db.sqlite3 2>/dev/null

exit

2. 检查数据库文件是否存在

bash

# 检查容器内是否有数据库文件
docker exec docx-backend ls -la /app/db.sqlite3

# 检查宿主机上的数据库文件
ls -la /www/wwwroot/multisystem/db.sqlite3

3. 确保数据库文件存在且权限正确

bash

# 如果宿主机上有数据库文件，复制到容器内
docker cp /www/wwwroot/multisystem/db.sqlite3 docx-backend:/app/db.sqlite3

# 设置正确的权限
docker exec docx-backend chmod 666 /app/db.sqlite3
docker exec docx-backend chown www-data:www-data /app/db.sqlite3 2>/dev/null || true

4. 创建新的数据库文件（如果没有）

bash

# 进入容器
docker exec -it docx-backend bash

# 创建数据库文件
touch /app/db.sqlite3
chmod 666 /app/db.sqlite3

# 执行迁移
python manage.py migrate

# 创建超级用户（如果需要）
python manage.py createsuperuser

exit

5. 修改Docker运行命令，挂载数据库文件

bash

# 停止并删除旧容器
docker stop docx-backend
docker rm docx-backend

# 确保宿主机数据库文件存在
mkdir -p /www/wwwroot/multisystem
touch /www/wwwroot/multisystem/db.sqlite3
chmod 666 /www/wwwroot/multisystem/db.sqlite3

# 重新运行容器，挂载数据库文件
docker run -d \\
–name docx-backend \\
-p 127.0.0.1:8000:8215 \\
-v /www/wwwroot/multisystem/db.sqlite3:/app/db.sqlite3 \\
-v /www/wwwroot/multisystem/static:/app/static \\
-v /www/wwwroot/multisystem/media:/app/media \\
xuanyuyu174/docx-backend:latest

# 执行迁移
docker exec docx-backend python manage.py migrate

现在就都配置好了。