当前位置： 首页 > news >正文

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

news 来源：原创 2024/9/20 16:54:33

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的等级是字符串作为配置的，需要用引号包裹起来

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • oracle使用backup as copy方式迁移数据文件
  • Java 中集合的练习
  • 跟李沐学AI：池化层
  • shell-awk文本处理工具
  • 边界网关IPSEC VPN实验
  • Godot游戏制作 05收集物品
  • 常用的网络爬虫工具推荐
  • vue网络请求
  • ＜设计模式＞ 单例模式
  • 力扣94题（java语言）
  • wpf中轮询显示图片
  • Jacoco 单元测试配置
  • 设计模式14-享元模式
  • 江科大/江协科技 STM32学习笔记P13
  • IP地址在后端怎么存才好？
  • Android单元测试 - 几个重要问题
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • canvas绘制圆角头像
  • ECMAScript 6 学习之路 （ 四 ） String 字符串扩展
  • es6
  • httpie使用详解
  • JavaScript 基本功--面试宝典
  • Java应用性能调优
  • learning koa2.x
  • Python学习之路16-使用API
  • Ruby 2.x 源代码分析：扩展 概述
  • Sass Day-01
  • Tornado学习笔记（1）
  • 基于 Ueditor 的现代化编辑器 Neditor 1.5.4 发布
  • 马上搞懂 GeoJSON
  • 爬虫进阶 -- 神级程序员：让你的爬虫就像人类的用户行为！
  • 融云开发漫谈：你是否了解Go语言并发编程的第一要义？
  • 听说你叫Java（二）–Servlet请求
  • 小程序 setData 学问多
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 在electron中实现跨域请求，无需更改服务器端设置
  • 走向全栈之MongoDB的使用
  • 如何用纯 CSS 创作一个货车 loader
  • 树莓派用上kodexplorer也能玩成私有网盘
  • 曜石科技宣布获得千万级天使轮投资，全方面布局电竞产业链 ...
  • 智能情侣枕Pillow Talk，倾听彼此的心跳
  • ​探讨元宇宙和VR虚拟现实之间的区别​
  • ######## golang各章节终篇索引 ########
  • #NOIP 2014#Day.2 T3 解方程
  • #我与Java虚拟机的故事#连载14：挑战高薪面试必看
  • （二）斐波那契Fabonacci函数
  • （六） ES6 新特性 —— 迭代器（iterator)
  • （学习日记）2024.01.09
  • (转)Google的Objective-C编码规范
  • (转)利用ant在Mac 下自动化打包签名Android程序
  • (自适应手机端)行业协会机构网站模板
  • *p++,*(p++),*++p,(*p)++区别？
  • .Net MVC4 上传大文件，并保存表单
  • .net web项目 调用webService
  • .net 调用海康SDK以及常见的坑解释