Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End in Flask und Vue

Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End in Flask und Vue

Ich habe vor einiger Zeit ein Projekt entwickelt. Ich habe das Flask-Framework verwendet, um die Schnittstelle für das Backend zu schreiben, und das Vue-Framework für das Frontend. Das Front- und das Backend des Projekts waren vollständig getrennt. Während der Bereitstellung sind einige Probleme aufgetreten, die ich aufgezeichnet habe.

Bereitstellungsumgebung: centos6.5 , Python3.6.3 , flask0.12.0 vue

Bereitstellungsmethode: uwsgi+nginx

Schritt:

​ 1. Installieren Sie zuerst die normale Python-Laufzeitumgebung. ​ 2. Installieren Sie uswsgi und führen Sie es normal aus (verwenden Sie pip zur Installation, pip install uwsgi):

Erstellen Sie eine neue config.ini-Datei

[Benutzer]

# Die Adresse und der Port, die beim Start von uwsgi verwendet werden. Der Nginx-Proxy muss an diese Adresse weiterleiten socket = xxxx:xxxx    
#Python-Umgebungsverzeichnis #home = /usr/local/python/bin
#Zeigen Sie auf das Stammverzeichnis der Website chdir = /root/www
#Python-Projektstartprogrammdatei wsgi-file = /root/www/run.py
#Der Name der Anwendungsvariablen, die zum Starten des Python-Programms verwendet wird, aufrufbar = App
#Anzahl der Prozessorprozesse = 3
#Anzahl der Threads Threads = 3
#Statusüberwachungsadressenstatistiken = 127.0.0.1:5000
#Legen Sie die interne Puffergröße für die Analyse des UWSGI-Pakets fest. Standard 4k
Puffergröße = 32768

uwsgi-Startbefehl:

uwsgi config.ini #Dieser Befehl startet direkt uwsgi -d --ini config.ini #Dieser Befehl wird im Hintergrund ausgeführt und häufig verwendet

3. Installieren Sie nginx, normal, wir führen die Betriebs- und Wartungsinstallation durch, der Vorgang wird nicht angezeigt, bitte Baidu

Hier kommt die Frage:

Wenn wir gleichzeitig Vue und Flask als Proxy verwenden, kann das Frontend, egal wie sehr wir es versuchen, nicht auf die Adresse von Flask zugreifen

Lösung:

​ Für den Proxy von Vue und Flask werden zwei verschiedene Domänennamen verwendet, und Vue verweist auf den Proxy-Domänennamen von Flask.

Benutzer nginx;
Arbeiterprozesse 1;

Fehlerprotokollprotokolle/Fehler.log;
#error_log Protokolle/error.log Hinweis;
#error_log Protokolle/error.log-Info;

pid-Protokolle/nginx.pid;


Ereignisse {
    Arbeiterverbindungen xx;
    verwenden Sie epoll;
}


http {
    mime.types einschließen;
    Standardtyp Anwendung/Oktett-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 Protokolle/access.log Haupt;
    Server-Tokens aus;
    sendfile an;
    #tcp_nopush ein;

    #keepalive_timeout 0;
    keepalive_timeout xx;

    #gzip ein;
        Server {
                hör zu xx;
                Servername hqfund.com www.hqfund.com;
                gibt 301 https://$host$request_uri zurück;
  }
 
 Server {
  hören Sie 443 SSL;
  Servername xxx.com1;
         SSL-Zertifikat /xxxx;
         SSL-Zertifikatsschlüssel /xxxx;


  
  Standort / {
              Wurzel /xxxx;
   Index Index.html Index.htm;
  }
 }

    Server {
                hör zu xx;
                Servername xxx.com2;
                gibt 301 https://$host$request_uri zurück;
  }
  
 Server {
  hören Sie xxx SSL;
  Servername xxx.com2;
  SSL-Zertifikat /xxxx;
         SSL-Zertifikatsschlüssel /xxxx;
  
  Standort / {
              uwsgi_params einschließen;
   uwsgi_pass xxxx:xx;
   Proxy_http_Version 1.1;
   Proxy_Set_Header-Upgrade $http_upgrade;
   proxy_set_header Verbindung "Upgrade";
  }
 }
}

Damit ist dieser Artikel über den Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End von Flask und Vue abgeschlossen. Weitere Informationen zur Trennung von Front-End und Back-End von Flask und Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Beispiel für die Bereitstellung eines Flask-Projekts mit uWSGI und Nginx
  • Migration und Bereitstellung von Python-Projekten basierend auf Informationen zu Abhängigkeitspaketen in der Flask-Framework-Konfiguration
  • So stellen Sie das Flask-Projekt auf CentOS bereit
  • Implementierungsschritte für die Bereitstellung des Flask-Projekts

<<:  Lösung für die durch das FOUC-Problem auf Webseiten verursachte Verwirrung auf Webseiten

>>:  Verwenden Sie HTML und CSS, um Ihren eigenen warmen Mann „Dabai“ zu erstellen.

Artikel empfehlen

Vue.js implementiert eine Timeline-Funktion

In diesem Artikel wird der spezifische Code von V...

So verwenden Sie das Modul-FS-Dateisystem in Nodejs

Inhaltsverzeichnis Überblick Dateideskriptoren Sy...

Der Fallstrickrekord des Gummi-Rebound-Effekts der iOS WeChat H5-Seite

Geschäftliche Anforderungen Eines der Projekte, d...

MySQL-Variablenprinzipien und Anwendungsbeispiele

In der MySQL-Dokumentation können MySQL-Variablen...

Implementierungsbeispiel für dynamische Routing-Breadcrumbs für Elemente

Zu meistern: localStorage, Komponentenkapselung Ä...

Beispielanalyse der drei Verbindungsmethoden für virtuelle VMware-Maschinen

NAT Auf diese Weise wird die Netzwerkkarte der vi...

Installationsschritte von MySQL unter Linux

1. Laden Sie die MySQL-Tar-Datei herunter: https:...

Vue realisiert den Produktlupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

Methoden und Techniken zum schnellen Anzeigen von Webseitenbildern

1. Verwenden Sie .gifs statt .jpgs. GIFs sind im ...

js verwendet FileReader zum Lesen lokaler Dateien oder Blobs

Inhaltsverzeichnis FileReader liest lokale Dateie...