在ubuntu20.04+体系部署VUE及Django项目标过程记录——以腾讯云为例
1. 需求近期做一些简单工程开发基本都采用的VUE-Django框架，需要部署在单元服务器或腾讯云服务器，步骤轻微有些杂，轻易忘，每次都得问LLM，故做此记录，以供参考。
2. 项目预备
怎样创建VUE及Django项目，此博客不做阐述。
3. VUE CLI项目部署
3.1 部署前的预备
将当地写的vue cli项目整个打包到服务器。
3.1.1 后端通信路由修改
我这里用的是VUE CLI。在.vue文件中，若有前后段数据传输或函数调用，肯定记得在script中把路由该一下，不能是当地的127.0.0.1，若服务器地址是43.***.**.63，则需要换成这个地址,最好直接用域名。
例如：
const response = await fetch('http://127.0.0.1:8000/api/journal/');
就需要改为：
const response = await fetch('https://i...s.cn/api/journal/');
8000 被移除，因为 Nginx 通常会设置为监听 80 (HTTP) 或 443 (HTTPS) 端口，并将请求署理到后端的 8000 端口。如果你的服务器设置了 HTTPS，应利用 https://。
可以导航到相应的目录下，实行以下代码查看哪些文件包含127.0.0.1
grep -rl '127.0.0.1' .
如果利用诸如const response = await axios.get('/api/email/history')就不会有这个问题。
3.1.2 导航修改
找到vue cli项目根目录下的vue.config.js文件，如下：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8080
},
// 新增：配置 htmlWebpackPlugin 的选项
chainWebpack: config => {
config.plugin('html').tap(args => {
args.title = '标题'; // 设置网页标题
return args;
});
},
publicPath: '/xb/' // 添加这一行
})
需要新增 publicPath: '/xb/'
找到文件/src/router/index.js，底部添加：
const router = createRouter({
history: createWebHistory('/xb/'),
routes
})
找到文件src/main.js
找到设置 Axios baseURL 的行:
查找类似 axios.defaults.baseURL = 'http://43.×××.××.63' 的代码。
修改为正确的 HTTPS 地址和域名:
// 推荐使用域名并确保协议是 https
axios.defaults.baseURL = 'https://i...s.cn'
实行npm run build.
3.2 构建项目
在VUE CLI目录下实行npm run build构建项目，会生成dist目录。
3.3 设置nginx署理
在路径/etc/nginx/sites-available下新建一个设置文件，如果不新建可以都写在default中，但太多轻易乱。更保举新建一个。
比如，我新建了一个i...s.cn（我的域名），然后写入设置：
# HTTP Redirect for i...s.cn
server {
listen 80;
listen [::]:80;
server_name i...s.cn www.i...s.cn;
return 301 https://$host$request_uri;
}
# HTTPS Configuration for i...s.cn
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name i...s.cn www.i...s.cn;
ssl_certificate /www/server/panel/vhost/cert/i...s.cn/fullchain.pem;
ssl_certificate_key /www/server/panel/vhost/cert/i...s.cn/privkey.pem;
# 1. i...s.cn 官方网站根目录
root /www/wwwroot/i...s.cn;
index index.html index.htm index.php;
# 2. pdf_download 配置(在该域名下的其他目录网站)
location /pdf_download/ {
alias /www/wwwroot/i...s.cn/pdf_download/;
index dashboard.html;
autoindex off;
}
# 3. vue 应用配置 (部署在 /xb/ 路径下)
location /xuebao/ {
alias /www/wwwroot/i...s.cn/xb/vue/dist/;
index index.html index.htm;
try_files $uri $uri/ /xb/index.html;
}
# 处理官方网站根路径和其他未匹配的路径
location / {
try_files $uri $uri/ /index.php?$args;
}
# 处理 PHP 文件请求 (如果官方网站需要)
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/tmp/php-cgi-80.sock; # 请确认此路径是否正确
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
# 访问和错误日志
access_log /var/log/nginx/i...s.cn.access.log;
error_log /var/log/nginx/i...s.cn.error.log;
}
}
因为是新建的设置文件，需要实行
sudo ln -s /etc/nginx/sites-available/i...s.cn /etc/nginx/sites-enabled/i...s.cn
以及重启nginx
sudo nginx -t、sudo systemctl reload nginx
重启之后，访问相应URL，前端页面显示正常。
若要关闭nginx服务，实行sudo systemctl stop nginx
4. 后端设置
这里后端采用的是django，django环境安装不再赘述。
这里需要注意，在正式设置后端之前，肯定要在django项目标settings.py中修改以下设置：
[*]DEBUG = False
[*]ALLOWED_HOSTS添加自己的域名
4.1 其他依赖项
这里的HTTP服务器我选择Gunicorn。
若没有实行pip install gunicorn
4.2 单次实行测试
可先单独实行django，确保没有因为环境问题造成的bug。
切换到django目录下，实行gunicorn --bind 127.0.0.1:8000 qk.wsgi:application
看到类似以下信息，则没有问题：
gunicorn --bind 127.0.0.1:8000 qk.wsgi:application
Starting gunicorn 23.0.0
Listening at: http://127.0.0.1:8000 (2812697)
Using worker: sync
Booting worker with pid: 2812698
ctrl+c克制手动运行的Gunicorn。
4.3 创建Systemd 服务文件
这是让 Django (通过 Gunicorn) 在配景运行、开机自启、并在失败时自动重启的关键。
sudo nano /etc/systemd/system/自定义命名.service
粘贴设置以下内容
Description=gunicorn daemon for qk Django project
After=network.target # 表示在网络可用后启动
# === 修改为你运行代码的用户和组 ===
User=ubuntu# 创建的专用用户
Group=ubuntu # 用户同名组
# === 修改为你的 Django 项目根目录 ===
WorkingDirectory=/www/wwwroot/....
# === 修改为你的 Python 环境中 gunicorn 和 python 的绝对路径 ===
ExecStart=/home/ubuntu/anaconda3/envs/ser/bin/gunicorn --workers 3 --bind 127.0.0.1:8000 qk.wsgi:application \
--access-logfile /var/log/gunicorn/gunicorn-qk-access.log \
--error-logfile /var/log/gunicorn/gunicorn-qk-error.log
Restart=always # 如果服务退出，总是尝试重启
RestartSec=10 # 重启前等待 10 秒
KillSignal=SIGQUIT # 使用 SIGQUIT 平滑关闭 Gunicorn
TimeoutStopSec=5 # 等待 5 秒后强制关闭
PrivateTmp=true # 使用私有临时目录
WantedBy=multi-user.target # 表示服务应该在多用户模式下启用
！！注意，不要有行末表明，我这里是为相识释，设置文件删掉#，不然后续会报错！！
User / Group: 运行 Gunicorn 进程的用户和组。非常重要！ 确保这个用户对项目目录 (WorkingDirectory) 和虚拟环境有读取权限，并且对日志目录 (如果利用) 有写入权限。ubuntu 和 www-data 是常见的选择，但最好利用权限受限的专用用户。
修改好设置文件之后，实行:
[*]重新加载 Systemd 设置: 让 Systemd 读取你新创建的服务文件。sudo systemctl daemon-reload
[*]启动Gunicorn服务：sudo systemctl start 自界说.service
[*]查抄服务状态：sudo systemctl status gunicorn-qk.service
若出现Active: active (running) since Wed 2025-04-16 22:16:16 CST; 28s ago即为成功
如果失败，可查抄日志错误信息。sudo journalctl -u gunicorn-qk.service -n 50 --no-pager
[*]设置开机自启动sudo systemctl enable gunicorn-qk.service
4.4 设置 Nginx 作为反向署理
Django 需要写进 Nginx 的设置文件。Gunicorn 服务正在监听 127.0.0.1:8000，这个地址只能从服务器内部访问。 VUE 前端通过公网 IP 发送请求。Nginx 需要知道：当收到指向 /api/ 的请求时，应该将这个请求转发给内部运行在 127.0.0.1:8000 的 Gunicorn 服务。
需要在/etc/nginx/sites-available/i...s.cn文件的 server { … } 块（监听 443 端口的那个）中添加或修改一个 location /api/ { … } 块。
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;
proxy_set_header X-Forwarded-Proto $scheme;
}
5. 其他注意事项
[*]关于嵌套/嵌入式前端应用部署
[*]问题：当一个预构建的前端应用（应用 B）被嵌入到另一个前端应用（应用 A）的子目录下时，应用 B 内部引用的静态资源（JS, CSS）路径可能因部署路径改变而失效 (404)。
[*]解决：必须为嵌入的应用（应用 B）在其构建设置中明确指定终极的、绝对的部署路径（例如，如果应用 A 在 /app-a/，应用 B 在其下，则路径为 /app-a/app-b/），然后重新构建应用 B。将新构建的产物替换应用 A 中的旧版本（public中），并（如果需要）重新构建应用 A。
[*]关于前端 API 请求 URL
[*]问题：在 HTTPS 页面中硬编码利用 HTTP 协议或 IP 地址的 API 请求 URL，会导致 “Mixed Content” 安全错误或请求失败。直接在组件中写死 URL 也轻易出错且倒霉于维护。
[*]解决：确保所有 API 请求均利用正确的协议 (通常是 HTTPS) 和主机名 (域名)。最佳实践是设置并统一利用一个全局 HTTP 请求库实例（如 Axios），为其设置正确的 baseURL (包含协议和域名)，然后在组件代码中仅利用相对路径（如 /api/data）发起请求。
[*]怎样更新服务（在修改代码后）：
[*]后端 (Django/Gunicorn): 修改 Python 代码 (如 views.py, models.py, settings.py) 后，重启 Gunicorn 服务：sudo systemctl restart gunicorn-qk.service,gunicorn-qk.service是自界说的名字。
[*]前端 (VUE): 修改前端源代码 (如 .vue, .js, .css) 后，需要重新构建项目，并将新生成的 dist 文件部署：npm run build
(Nginx 通常不需要重启或重新加载，因为它会自动提供 dist 目录下的新文件。只有在修改 Nginx 设置文件本身时才需要 sudo systemctl reload nginx)
[*]查看日志命令
[*] 后端 (Django/Gunicorn):查看 Gunicorn 错误日志 (主要看 Python/Django 错误):
sudo tail -n 50 /var/log/gunicorn/gunicorn-qk-error.log
# 实时查看: sudo tail -f /var/log/gunicorn/gunicorn-qk-error.log
[*] 查看 Gunicorn 访问日志 (看哪些请求到了后端):
sudo tail -n 50 /var/log/gunicorn/gunicorn-qk-access.log
# 实时查看: sudo tail -f /var/log/gunicorn/gunicorn-qk-access.log
[*] 查看 Systemd 服务日志 (看服务启动/克制状态):
sudo journalctl -u gunicorn-qk.service -n 50 --no-pager
# 实时查看: sudo journalctl -u gunicorn-qk.service -f
[*] 前端 (VUE / Nginx):查看 VUE 运行时错误 (JS 错误): 在欣赏器开发者工具 (F12) 的 “Console” (控制台) 查看。查看 Nginx 错误日志 (Nginx 设置、权限错误):
sudo tail -n 50 /var/log/nginx/i....s.cn.error.log
# 实时查看: sudo tail -f /var/log/nginx/i...s.cn.error.log
[*] 查看 Nginx 访问日志 (看欣赏器请求记录，包括静态文件和 API 署理):
sudo tail -n 50 /var/log/nginx/i....s.cn.access.log
# 实时查看: sudo tail -f /var/log/nginx/i....s.cn.access.log
[*]取消systemctl自启动：
关闭自启动：sudo systemctl disable gunicorn-qk.service
克制当前服务并防止它因被 kill 而重启:
不要直接用 kill 命令。应该利用 systemd 的命令来克制它：
sudo systemctl stop gunicorn-qk.service
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]