nginx部署vue+flask网站

nginx部署vue+flask网站

前端为vue
后端为nginx

配置后端

请求访问过程:请求-》nginx-》uwsgi-》flask

第一步:将项目拉取到服务器上

方法一:将项目上传到github远程仓库上,再通过git pull命令拉取项目到服务器本地

方法二:可以直接使用rz命令将本地项目(直接压缩成压缩文件)传递到服务器上解压unzip命令,即可

第二步:配置uwsgi

uwsgi是用户网关接口的意思,负责将nginx获取的请求、响应数据处理成一定的格式后,发送给django或者flask处理。它的作用就是把一长串报文,拆解成请求头、请求体、请求方法等,以便后期可以直接处理数据。
安装:yum install uwsgi -y
配置方法:

  1. 在flask项目目录下创建一个uwsgi.ini文件
    vim uwsgi.ini
  2. 配置以下信息
[uwsgi]
# 监听端口:这个ip是访问flask的地址,要和flask程序的地址要一样
socket  = 127.0.0.1:8081
# 项目根目录
chdir   = /usr/local/nginx/html/my_vue_web/my_project_test
# 项目名
wsgi-file  = my_project_test.py
# 启动项目的变量名  app = Flask(__name__)  默认为app
callable = app
# 进程数 
processes   = 4
vacuum      = true
master      = true
  1. 启动uwsgi
    uwsgi --ini uwsgi.ini

第三部:配置nginx

用户访问后端api,具体配置以下信息

 server {
    listen 8080;  # 端口号
    server_name havename.cn;  # 域名  默认为localhost
    charset utf-8;
    client_max_body_size 75M;
    location / {
        include uwsgi_params;                       # 导入uwsgi配置 
        uwsgi_pass 127.0.0.1:8081;                  # 转发端口,需要和uwsgi.ini一致
        uwsgi_param UWSGI_PYTHON /usr/bin/python3;  # 系统python路径
        uwsgi_param UWSGI_CHDIR /usr/local/nginx/html/my_vue_web/my_project_test;         # 项目根目录
        uwsgi_param UWSGI_SCRIPT my_project_test:app;           # 项目的主程序,比如你主程序文件名my_project_test.py,文件中app = Flask(__name__),那么这里就填my_project_test:app 
    }
    }

即可
后端可以通过havename.cn:8080为根目录,访问后端api。例如:访问havename.cn:8080/img=>nginx转发到127.0.0.1:8081=>uwsgi处理请求,交给flask处理。

配置前端

vue-cli创建的项目,编写完成后要打包
npm run build
打包生成dist文件夹,直接将dist文件拷贝到服务器上即可
注意
如果dist文件中index.js打不开,报错Failed to load resource: net::ERR_FILE_NOT_FOUND
说明文件路径有问题,修改config/index.js,将assetsPublicPath的/改为./,绝对路径改为相对路径

配置nginx

用于用户访问接口

server {
	listen       8888;
	server_name  www.havename.cn;
	location / {
			try_files $uri $uri/ /index.html;  # 尝试直接访问uri,访问失败,则访问uri后面加/,还是失败,则访问当前路径下的index.html文件
			root /usr/local/nginx/html/my_vue_web/dist; # 前端页面路径
			index index.html index.htm;  # 在当前目录下找index.html,找不到则找index.htm
	}
	location /static {  # 静态文件:一般用于存放图片、js文件、css文件
		expires 30d;  # 静态文件有效期为30天,30天到期时,重新获取静态文件
		autoindex on; # 设置on后启用自动目录浏览功能,输入网站可以直接访问这个目录中所有文件
		alias /usr/local/nginx/html/my_vue_web/static; # 将所有访问/static路径的请求,转发到/usr/local/nginx/html/my_vue_web/static路径中  
	}
}

用户通过www.havename.cn:8888访问前端页面。
重启下nginx,配置成功。

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页