nginx部署vue+flask网站

刺骨的言语ヽ痛彻心扉 2023-02-19 09:26 0阅读 0赞

# 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，配置成功。