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

JavaScript zum Erzielen eines dynamischen Tabelleneffekts

In diesem Artikel wird der spezifische Code für J...

Detaillierte Erläuterung von acht Methoden zum Korrigieren des CSS-Seitenendes

Beim Schreiben einer Seite kommt es häufig vor, d...

So erstellen Sie eine monatliche Tabelle in einer gespeicherten MySQL-Prozedur

Lassen Sie uns, ohne ins Detail zu gehen, direkt ...

Größe von PNG-Bildern mit CSS-Maske deutlich optimieren (empfohlen)

Dieser Artikel darf gerne geteilt und zusammengef...

Implementierung der DOM-Operation in React

Inhaltsverzeichnis Vorherige Wörter Anwendungssze...

Slot-Anordnung und Nutzungsanalyse in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-...

Zusammenfassung der 7 Protokolltypen in MySQL

In MySQL gibt es folgende Protokolldateien: 1: Pr...

Konfigurieren Sie nginx so, dass es zur Systemwartungsseite umleitet

Letztes Wochenende bereitete sich ein Bruderproje...

Beheben von Problemen mit impliziter MySQL-Konvertierung

1. Problembeschreibung root@mysqldb 22:12: [xucl]...