Sample code for flask and vue front-end and back-end separation project deployment

Sample code for flask and vue front-end and back-end separation project deployment

I developed a project some time ago. I used the flask framework to write the interface for the backend and the vue framework for the frontend. The front and back ends of the project were completely separated. I encountered some problems during deployment, so I recorded them.

Deployment environment: centos6.5 , Python3.6.3 , flask0.12.0 vue

Deployment method: uwsgi+nginx

step:

​ 1. First install the python runtime environment, normal ​ 2. Install uswsgi and run normally (use pip to install, pip install uwsgi):

Create a new config.ini file

[uwsgi]

# The address and port used when uwsgi is started. Nginx proxy needs to forward to this address socket = xxxx:xxxx    
#Python environment directory #home = /usr/local/python/bin
#Point to the website root directory chdir = /root/www
#python project startup program file wsgi-file = /root/www/run.py
#The application variable name used to start the python program callable = app
#Number of processors processes = 3
#Number of threads threads = 3
#Status monitoring address stats = 127.0.0.1:5000
#Set the internal buffer size for uwsgi package parsing. Default 4k
buffer-size = 32768

uwsgi startup command:

uwsgi config.ini #This command directly starts uwsgi -d --ini config.ini #This command runs in the background, commonly used

3. Install nginx, normal, we are the operation and maintenance installation, the process is not shown, please Baidu

Here comes the question:

When we proxy vue and flask at the same time, no matter how we try, the front end cannot access the address of flask

Solution:

​ Two different domain names are used to proxy vue and flask respectively, and vue points to the proxy domain name of 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 xxxx:xx;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";
  }
 }
}

This concludes this article about the sample code for flask and vue front-end and back-end separation project deployment. For more information about flask and vue front-end and back-end separation, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Example of how to deploy a Flask project with uWSGI and Nginx
  • Python project migration and deployment based on Flask framework configuration dependency package information
  • How to deploy the flask project on CentOS
  • Implementation steps for the deployment of the Flask project

<<:  Solution to web page confusion caused by web page FOUC problem

>>:  Why should css be placed in the head tag

Recommend

MySQL series 9 MySQL query cache and index

Table of contents Tutorial Series 1. MySQL Archit...

Solution to MySQL restarting automatically

Preface Recently, a problem occurred in the test ...

Perfect solution for theme switching based on Css Variable (recommended)

When receiving this requirement, Baidu found many...

A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)

Overview Binlog2sql is an open source MySQL Binlo...

HTML table tag tutorial (19): row tag

The attributes of the <TR> tag are used to ...

Incredible CSS navigation bar underline following effect

The first cutter in China github.com/chokcoco Fir...

HTML hyperlink style (four different states) setting example

Copy code The code is as follows: <style type=...

Detailed explanation of Vue data proxy

Table of contents 1. What I am going to talk abou...

Loading animation implemented with CSS3

Achieve results Implementation Code <h1>123...

Implementation of automatic completion of Docker commands

Preface I don't know how long this friend has...

How to debug loader plugin in webpack project

Recently, when I was learning how to use webpack,...

How to use shell to perform batch operations on multiple servers

Table of contents SSH protocol SSH Connection pro...

A brief discussion on the VUE uni-app development environment

Table of contents 1. Through HBuilderX visual int...

Ubuntu installation graphics driver and cuda tutorial

Table of contents 1. Uninstall the original drive...