Shulou(Shulou.com)06/02 Report--

This article shows you how to write the code of flask and vue front-end separation project deployment, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Some time ago, I developed a project. My back end uses flask framework to write interface, and the front end uses vue framework. The front and back ends of the project are completely separated. There are some problems in deployment. Record it.

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

Deployment method: uwsgi+nginx

Steps:

1. First install the python runtime environment, normal

two。 Install uswsgi to run normally (using pip installation, pip install uwsgi):

Create a new config.ini file

[uwsgi] # address and port used when uwsgi starts The nginx agent needs to be forwarded to this address socket = x.x.x.x:xxxx # python environment directory # home = / usr/local/python/bin# points to the website root directory chdir = / root/www#python project startup program file wsgi-file = / application variable name for startup in the root/www/run.py#python program callable = number of app# processors processes = "number of threads threads =" status monitoring address Stats = 127.0.0.1 500 sets the size of the internal cache for parsing uwsgi packets. Default 4kbuffer-size = 32768

Uwsgi start 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 installed by operation and maintenance, the process is not listed, please have a look at Baidu

Here's the problem:

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

Solution:

Two different domain names are used to proxy vue and flask,vue proxy domain names pointing to flask, respectively.

User nginx;worker_processes 1 error 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 x.x.x.x:xx Proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";} the above is how to write the code deployed by the front and rear separation project of flask and vue. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.