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

3. 启动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，配置成功。