在centos7.6上部署前后端分离项目Nginx反向代理vue.js2.6+Tornado5.1.1,使用supervisor统一管理服务

简介: 这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广,无论是单页应用,还是混合式开发app,亦或是微信小程序开发,样样得心应手,tornado最近的风头有点被新锐框架sanic抢走了,但是作为老牌的异步非阻塞框架,其内置了支持epoll/kqueue 等高效网络库,而具备了处理高并发的能力并且开发效率也不低,这一次tornado作为承载后端压力的角色。

这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广,无论是单页应用,还是混合式开发app,亦或是微信小程序开发,样样得心应手,tornado最近的风头有点被新锐框架sanic抢走了,但是作为老牌的异步非阻塞框架,其内置了支持epoll/kqueue 等高效网络库,而具备了处理高并发的能力并且开发效率也不低,这一次tornado作为承载后端压力的角色。

首先部署前端,将测试好的vue.js2.6项目打包,值得一提的是,在生产环境并不需要node.js服务,因为利用vue.js的特性可以对前端页面进行打包,使其成为一个纯静态页包,上线后利用nginx对其代理即可,既方便又安全。在项目目录下执行npm run build命令,在执行之前,先把conifg目录下index.js中的bulid配置../dist改成./dist

执行命令后,会在项目的config目录下的dist目录生成静态页,将dist目录上传到服务器的/root目录下

运行 chmod 755 /root/dist 对项目文件授权

然后,在线上安装nginx

#设置源
sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

#安装
yum install -y nginx

#启动服务
systemctl start nginx.service

服务器需要暴露80端口,此时,测试一下,看看能否显示欢迎页

没有问题,这时修改一下nginx 配置文件 vim /etc/nginx/conf.d/default.conf 增加下面的配置,这里前端服务默认监听80端口

server {
    listen       80;
    server_name  localhost;

    access_log      /root/md_vue_access.log;
    error_log       /root/md_vue_error.log;


    client_max_body_size 75M;


    location / {

        root /root/dist;
        index index.html;
        try_files $uri $uri/ /index.html;

    }
    
    error_log    /root/dist/error.log    error;

}
#继续修改配置
vim /etc/nginx/nginx.conf
将第一行改为 user root;

改好后,重启nginx服务

systemctl reload nginx.service

每次修改nginx配置一定要重启服务,否则修改不会生效

访问一下,看看效果

至此,前端就部署好了,是不是很简单呢?这一次我们摒弃了老美多商城丑陋而原始的模板,采用响应式设计的新模板,兼容任意大小屏幕,并且还可以打包成apk,简直棒

接着,我们来部署后端,首先安装python3,需要注意的是centos自带python2.7,当装软件的时候千万不要影响这个python2.7,因为系统很多东西都依赖python2,所以我们只要python2和python3共存就可以了

yum install epel-release

yum install python36

wget --no-check-certificate https://bootstrap.pypa.io/get-pip.py

python3 get-pip.py

pip3 install pymysql

pip3 install pillow

pip3 install pycryptodome

pip3 install tornado==5.1.1

pip3 install sqlalchemy

将tornado项目上传到/root/mytornado下,修改项目权限:chmod -R 755 /root/mytornado 然后将项目的debug模式关闭,并且修改端口号为8001,同时阿里云暴露8001端口,进行项目根目录,启动服务:python3 server.py,检查一下

没有问题,此时修改nginx配置文件,用nginx对tornado进行反向代理,新建一个配置文件

vim /etc/nginx/conf.d/tornado.conf
upstream tornado {
    server 127.0.0.1:8001;
}

server {
    listen   8000;
    root /root/mytornado;
    index server.py index.html;

    server_name server;

        # 静态文件直接由Nginx处理
    location /static/{
        alias /root/mytornado/static/;
        expires 24h;
    }
    location /{
        proxy_pass_header Server;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        # 把请求方向代理传给tornado服务器,负载均衡
        proxy_pass http://tornado;
    }

}

该配置的意思就是由nginx监听8000端口,并且将请求反向代理至tornado服务,这里我们只起了一个8001的服务,还可以启动更多,这就是传统意义上的负载均衡

重启一下nginx

systemctl restart nginx.service

访问服务器的8000端口,阿里云也别忘了暴露一下8000

最后,每次手动在命令行启动应用是比较麻烦的,我们还需要一个能够方便的管理服务进程的工具,包括自动重启进程等,而Supervisor的作用在这里就可以体现了。我们使用它来管理这个Tornado web server相关的进程

安装supervisor

yum install epel-release
yum install -y supervisor

生成配置文件

supervisord -c /etc/supervisord.conf 

修改配置文件

然后修改配置文件 vim /etc/supervisord.conf 将下面几行的注释解开

[inet_http_server]         ; inet (TCP) server disabled by default
port=*:9001        ; (ip_address:port specifier, *:port for all iface)
username=user              ; (default is no username (open server))
password=123               ; (default is no password (open server))

意思是将web服务页面打开,需要注意ip地址要写*,否则外网访问不了,而username和password就是登录服务页面的用户名和密码,可以改的复杂一点,另外阿里云也需要向外网暴露一下9001端口

然后在配置文件末尾加上tornado的配置

[program:mytornado]
command=python3 /root/mytornado/server.py --port=8001
directory=/root/mytornado
autorestart=true
redirect_stderr=true

保存文件退出后,启动supervisor服务

supervisord -c /etc/supervisord.conf

此时,将刚刚手动启动的tornado服务关闭,然后访问服务器的9001端口,用配置文件中的账号和密码登录

这样就可以在管理页面中控制tornado服务了,同时supervisor还赋予了守护进程模式,方便服务拉起

需要注意的是,当修改了supervisor的配置,想要生效就得重启supervisor服务,终止服务命令是:

killall -s INT /usr/bin/python

因为supervisor是基于python2的,所以不用担心python3的进程

另外如果只想在命令行中控制tornado也是可以的

#停止tornado服务
supervisorctl stop mytornado

#启动tornado服务
supervisorctl start mytornado

至此,我们通过nginx反向代理tornado负载均衡,并且通过supervisor管理就部署好了,简直太简单了

相关文章
|
6天前
|
应用服务中间件 Linux 网络安全
CentOS 7.4源码编译nginx1.12 并且隐藏nginx的版本
CentOS 7.4源码编译nginx1.12 并且隐藏nginx的版本
11 0
|
8天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
22天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
22天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
15 4
|
8天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
12 0
|
27天前
|
JavaScript 前端开发 网络架构
Vue3项目中使用vue-router
Vue3项目中使用vue-router
40 0
|
3天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
6天前
|
JavaScript
如何在vue项目中快速导入marked
如何在vue项目中快速导入marked
12 1
|
7天前
|
JavaScript 应用服务中间件 网络安全
vue项目上线和优化
vue项目上线和优化
|
22天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为向后兼容版本,确保在旧环境运行。它在前端构建中不可或缺,提供语法转换、插件机制、灵活配置及丰富的生态系统,支持代码兼容性和自定义编译任务。**
17 6