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