阿里云ubuntu宝塔面板部署uni-app-flask-websocket前后端项目

1.下载宝塔面板

wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

然后去安全组开放对应的端口

========================面板账户登录信息==========================

【云服务器】请在安全组放行 29725 端口

进入控制面板后修改默认用户名和密码

2. 打包uni-app文件并部署到服务器

将上面的前端打包文件放到 /www/wwwroot路径下

然后建站的时候选择前端项目即可

部署成功后，在浏览器输入你的ip即可访问，我们可以看一下宝塔面板的nginx设置

server

{

listen 80;

server_name 8.130.*******;

index index.php index.html index.htm default.php default.htm default.html;

root /www/wwwroot/circle-meeting-qian;

#CERT-APPLY-CHECK--START

用于SSL证书申请时的文件验证相关配置 -- 请勿删除

include /www/server/panel/vhost/nginx/well-known/8.130.*****.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

#PHP-INFO-START PHP引用配置，可以注释或修改

include enable-php-00.conf;

#PHP-INFO-END

#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效

include /www/server/panel/vhost/rewrite/8.130.********.conf;

#REWRITE-END

#禁止访问的文件或目录

location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)

{

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.130.*****.log;

error_log /www/wwwlogs/8.130.*******.error.log;

}

但是令我惊奇的是，我发现，打开ip，不仅仅前端有了，后端也有了，好吧，打包的时候忘记改前端对应的后端ip了，一会再打包一下吧

3.后端部署

我的后端用的是flask

它这里有三个运行方式，我选择gunicorn

复制代码

开发阶段：使用 Python 内置服务器，简单快速。
生产环境：
简单需求：选择 Gunicorn，易于配置和使用，性能优异。
复杂需求：选择 uWSGI，功能强大，性能卓越，但需要更多的配置和调优。

还有两个网络协议

复制代码

WSGI：

优点：设计简单，广泛支持，适合大多数传统 Web 应用。
缺点：不支持异步处理，无法有效处理高并发和长连接。
典型框架：Django（在同步模式下）、Flask。
ASGI：

优点：支持异步处理，高性能，适合现代 Web 应用和高并发场景。
缺点：设计复杂，学习和实现成本较高。
典型框架：FastAPI、Starlette、Django（在异步模式下）。
选择使用 WSGI 还是 ASGI 主要取决于应用程序的需求。如果你的应用程序需要处理高并发、长连接或异步任务，ASGI 是更好的选择。如果你的应用程序是传统的同步 Web 应用，WSGI 可能更简单且足够用。

但这里后端启动之后报错，说flask和asgi不合适，所以修改如下以后，后端正式启动

4.善后

现在访问ip还是会报错，原因是打包的前端文件里访问的是本地的后端接口，改为我的ip才对

1）http方面

前端项目中localhost改为ip

2）websocket方面

this.socket = io('http://localhost:5000');改为this.socket = io('http://ip:5000');

完活

一切似乎都正常，前后端也都通了，但是我发现当进行websocket连接时，是不是的会断开，甚至根本就连接不上

报错

复制代码

pages-chat-chat.B6oNTNVC.js:1 WebSocket connection to 'ws://8.130.115.10:5000/socket.io/?EIO=4&transport=websocket&sid=h0nfXpwAa2V9_X-RAAAC' failed: 

pages-chat-chat.B6oNTNVC.js:1 
 GET http://8.130.115.10:5000/socket.io/?EIO=4&transport=polling&t=P3RB3mt&sid=h0nfXpwAa2V9_X-RAAAC 400 (BAD REQUEST)
pages-chat-chat.B6oNTNVC.js:1 WebSocket 连接关闭
pages-chat-chat.B6oNTNVC.js:1 
 POST http://8.130.115.10:5000/socket.io/?EIO=4&transport=polling&t=P3RB3nO&sid=h0nfXpwAa2V9_X-RAAAC 400 (BAD REQUEST)
pages-chat-chat.B6oNTNVC.js:1 WebSocket connection to 'ws://8.130.115.10:5000/socket.io/?EIO=4&transport=websocket&sid=oqCU2SaUBDJdX0PpAAAE' failed: 
pages-chat-chat.B6oNTNVC.js:1 连接成功
pages-chat-chat.B6oNTNVC.js:1 WebSocket 连接成功
/#/pages/chat/chat?r...AE%25BA&tableId=2:1 The resource https://8.130.115.10:29725/static/vite/fonts/element-icons.woff was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
/#/pages/chat/chat?r...AE%25BA&tableId=2:1 The resource https://8.130.115.10:29725/static/vite/woff2/svgtofont.woff2?t=1716970518429 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
pages-chat-chat.B6oNTNVC.js:1 WebSocket 连接关闭

"Invalid session"

经过搜索，我好像发现了问题

将进程改为1后
不再出现websocket连接失败问题，但是出现了新问题，新开一个页面后

如果第一个页面依旧存在websocket连接

第二个页面再次进行websocket连接，页面则会不显示

最后终于解决了问题，我修改了gunicorn.conf.py

复制代码

# 项目目录
chdir = '/www/wwwroot/circle-meeting-hou'

# 指定进程数
workers = 1  # 对于 eventlet，建议使用单个 worker

# 指定每个进程开启的线程数
threads = 2  # 如果使用 eventlet，这个参数通常会被忽略

# 启动用户
user = 'root'

# 启动模式
worker_class = 'eventlet'  # 更改为 eventlet 以支持实时通信

# 绑定的 ip 与端口
bind = '0.0.0.0:5000' 

# 设置进程文件目录（用于停止服务和重启服务，请勿删除）
pidfile = '/www/wwwroot/circle-meeting-hou/gunicorn.pid'

# 设置访问日志和错误信息日志路径
accesslog = '/www/wwwlogs/python/circle-meeting-hou/gunicorn_access.log'
errorlog = '/www/wwwlogs/python/circle-meeting-hou/gunicorn_error.log'

# 日志级别，这个日志级别指的是错误日志的级别，而访问日志的级别无法设置
# debug:调试级别，记录的信息最多；
# info:普通级别；
# warning:警告消息；
# error:错误消息；
# critical:严重错误消息；
loglevel = 'info' 

# 自定义设置项请写到该处
# 最好以上面相同的格式 <注释 + 换行 + key = value> 进行书写， 
# PS: gunicorn 的配置文件是 python 扩展形式，即".py"文件，需要注意遵从 python 语法，
# 如：loglevel的等级是字符串作为配置的，需要用引号包裹起来