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

CSS implements 0.5px lines to solve mobile compatibility issues (recommended)

【content】: 1. Use background-image gradient style...

Example code for implementing equal height layout in multiple ways with CSS

The equal height layout described in this article...

Example of creating table statements for user Scott in MySQL version of Oracle

Overview: Oracle scott user has four tables, whic...

Example of troubleshooting method to solve Nginx port conflict

Problem Description A Spring + Angular project wi...

Using JavaScript in HTML

The <script> tag In HTML5, script has the f...

What are the benefits of using // instead of http:// (adaptive https)

//Default protocol /The use of the default protoc...

How to implement horizontal bar chart with percentage in echarts

Table of contents Example Code Rendering Code Ana...

Two ways to build a private GitLab using Docker

The first method: docker installation 1. Pull the...

Simple implementation of mini-vue rendering

Table of contents Preface Target first step: Step...

Windows Server 2008 R2 Multi-User Remote Desktop Connection Licensing

At work, we often need remote servers and often e...

JavaScript function detailed introduction

Any number of statements can be encapsulated thro...

Common rule priority issues of Nginx location

Table of contents 1. Location / Matching 2. Locat...

Before making a web page, let’s take a look at these so-called specifications

This article has compiled some so-called specific...