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

How to deploy Oracle using Docker on Mac

How to deploy Oracle using Docker on Mac First in...

Several ways to solve CSS style conflicts (summary)

1. Refine the selector By using combinators, the ...

Tutorial on installing and using virtualenv in Deepin

virtualenv is a tool for creating isolated Python...

Use CSS to implement special logos or graphics

1. Introduction Since pictures take up a lot of s...

Design Theory: Ten Tips for Content Presentation

<br /> Focusing on the three aspects of text...

Implementation steps for building FastDFS file server in Linux

Table of contents 1. Software Package 2. Install ...

How to use regular expression query in MySql

Regular expressions are often used to search and ...

MySQL advanced learning index advantages and disadvantages and rules of use

1. Advantages and Disadvantages of Indexes Advant...

How to use skeleton screen in vue project

Nowadays, application development is basically se...

Summary of Css methods for clearing floats

Float is often used in web page layout, but the f...

Detailed explanation of the specific use of the ENV instruction in Dockerfile

1. The ENV instruction in the Dockerfile is used ...

A complete tutorial on using axios encapsulation in vue

Preface Nowadays, in projects, the Axios library ...

MySQL configuration master-slave server (one master and multiple slaves)

Table of contents Ideas Host Configuration Modify...

Detailed steps to install python3.7 on CentOS6.5

1. Download Python 3 wget https://www.python.org/...