flask和vue前后端分離項目部署的示例代碼
前段時間開發(fā)了一個項目, 我后端用的是flask框架寫接口,前端用的是vue框架,項目前后端完全分離,部署的時候遇到一點問題,記錄一下.
部署環(huán)境:centos6.5
、Python3.6.3
、flask0.12.0 vue
部署方式:uwsgi+nginx
步驟:
? 1.首先安裝python運行環(huán)境,正常
? 2.安裝uswsgi運行,正常(使用pip安裝,pip install uwsgi):
新建config.ini文件
[uwsgi] # uwsgi 啟動時所使用的地址與端口,nginx代理的時候需要轉(zhuǎn)發(fā)到該地址 socket = x.x.x.x:xxxx #python環(huán)境目錄 #home = /usr/local/python/bin #指向網(wǎng)站根目錄 chdir = /root/www #python項目啟動程序文件 wsgi-file = /root/www/run.py #python程序內(nèi)用于啟動的application變量名 callable = app #處理器數(shù) processes = 3 #線程數(shù) threads = 3 #狀態(tài)監(jiān)測地址 stats = 127.0.0.1:5000 #設(shè)置uwsgi包解析的內(nèi)部緩存區(qū)大小。默認4k buffer-size = 32768
uwsgi啟動命令:
uwsgi config.ini #該命令直接啟動 uwsgi -d --ini config.ini #該命令后臺運行,常用
3.安裝nginx,正常,我們是運維安裝的,過程不表,請百度一下
問題來了:
? 我們在同時代理vue和flask 的時候,不管怎么折騰,前端都無法訪問到flask的地址
解決辦法:
? 使用了兩個不同 的域名分別代理了vue和flask,vue指向flask的代理域名
user nginx; worker_processes 1; error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; pid logs/nginx.pid; events { worker_connections xx; use epoll; } http { include mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; server_tokens off; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout xx; #gzip on; server { listen xx; server_name hqfund.com www.hqfund.com; return 301 https://$host$request_uri; } server { listen 443 ssl; server_name xxx.com1; ssl_certificate /xxxx; ssl_certificate_key /xxxx; location / { root /xxxx; index index.html index.htm; } } server { listen xx; server_name xxx.com2; return 301 https://$host$request_uri; } server { listen xxx ssl; server_name xxx.com2; ssl_certificate /xxxx; ssl_certificate_key /xxxx; location / { include uwsgi_params; uwsgi_pass x.x.x.x:xx; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } }
到此這篇關(guān)于flask和vue前后端分離項目部署的示例代碼的文章就介紹到這了,更多相關(guān)flask和vue前后端分離內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化)
這篇文章主要介紹了從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解
頁面刷新白屏其實是因為vuex引起的,由于刷新頁面vuex數(shù)據(jù)會丟失,這篇文章主要給大家介紹了關(guān)于vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解的相關(guān)資料,需要的朋友可以參考下2023-11-11vue2.0實戰(zhàn)之使用vue-cli搭建項目(2)
這篇文章主要為大家詳細介紹了vue2.0實戰(zhàn)第二篇使用vue-cli搭建項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03vue3如何使用provide實現(xiàn)狀態(tài)管理詳解
Vue3中有一對新增的api,provide和inject,熟悉Vue2的朋友應該明,這篇文章主要給大家介紹了關(guān)于vue3如何使用provide實現(xiàn)狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-10-10如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別
Face-api.js是一個JavaScript API,是基于tensorflow.js核心API 的人臉檢測和人臉識別的瀏覽器實現(xiàn),這篇文章主要給大家介紹了關(guān)于如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別的相關(guān)資料,需要的朋友可以參考下2023-05-05