flask和vue前後端分離項目部署的示例代碼
前段時間開發瞭一個項目, 我後端用的是flask框架寫接口,前端用的是vue框架,項目前後端完全分離,部署的時候遇到一點問題,記錄一下.
部署環境:centos6.5
、Python3.6.3
、flask0.12.0 vue
部署方式:uwsgi+nginx
步驟:
1.首先安裝python運行環境,正常
2.安裝uswsgi運行,正常(使用pip安裝,pip install uwsgi):
新建config.ini文件
[uwsgi] # uwsgi 啟動時所使用的地址與端口,nginx代理的時候需要轉發到該地址 socket = x.x.x.x:xxxx #python環境目錄 #home = /usr/local/python/bin #指向網站根目錄 chdir = /root/www #python項目啟動程序文件 wsgi-file = /root/www/run.py #python程序內用於啟動的application變量名 callable = app #處理器數 processes = 3 #線程數 threads = 3 #狀態監測地址 stats = 127.0.0.1:5000 #設置uwsgi包解析的內部緩存區大小。默認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"; } } }
到此這篇關於flask和vue前後端分離項目部署的示例代碼的文章就介紹到這瞭,更多相關flask和vue前後端分離內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Nginx配置SSL和WSS步驟介紹
- Nginx將http轉換成https的詳細過程
- 記錄一次nginx啟動失敗的解決過程
- nginx配置多個前端項目實現步驟
- 本地通過nginx配置反向代理的全過程記錄