flask和vue前后端分離項(xiàng)目部署的示例代碼

更新時(shí)間：2021年12月12日 15:37:48 作者：Ben·Chen

本文主要介紹了flask和vue前后端分離項(xiàng)目部署的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前段時(shí)間開發(fā)了一個(gè)項(xiàng)目, 我后端用的是flask框架寫接口,前端用的是vue框架,項(xiàng)目前后端完全分離,部署的時(shí)候遇到一點(diǎn)問題,記錄一下.

部署環(huán)境:centos6.5、Python3.6.3 、flask0.12.0 vue

部署方式:uwsgi+nginx

步驟:

? 1.首先安裝python運(yùn)行環(huán)境,正常
? 2.安裝uswsgi運(yùn)行,正常(使用pip安裝,pip install uwsgi):

新建config.ini文件

[uwsgi]

# uwsgi 啟動時(shí)所使用的地址與端口,nginx代理的時(shí)候需要轉(zhuǎn)發(fā)到該地址
socket = x.x.x.x:xxxx    
#python環(huán)境目錄 
#home = /usr/local/python/bin
#指向網(wǎng)站根目錄
chdir = /root/www
#python項(xiàng)目啟動程序文件
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ū)大小。默認(rèn)4k
buffer-size = 32768

uwsgi啟動命令:

uwsgi config.ini   #該命令直接啟動
uwsgi -d --ini config.ini  #該命令后臺運(yùn)行,常用

3.安裝nginx,正常,我們是運(yùn)維安裝的,過程不表,請百度一下

問題來了:

? 我們在同時(shí)代理vue和flask 的時(shí)候,不管怎么折騰,前端都無法訪問到flask的地址

解決辦法:

? 使用了兩個(gè)不同的域名分別代理了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前后端分離項(xiàng)目部署的示例代碼的文章就介紹到這了,更多相關(guān)flask和vue前后端分離內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: