我使用以下配置在基于8080端口的Nginx安装Flask后端上运行
server {
listen 8080 default_server;
listen [::]:8080;
root /var/www/html;
server_name _;
location /static {
alias /var/www/html/static/;
}
location / {
try_files $uri @wsgi;
}
location @wsgi {
proxy_pass http://unix:/tmp/gunicorn.sock;
include proxy_params;
}
location ~* .(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
access_log off;
log_not_found off;
expires max;
}
}
我还设置了一个使用gunicorn来运行flask应用程序的systemd服务,使用:gunicorn --bind=unix:/tmp/gunicorn.sock --workers=4 start_backend:web_app
现在,以上内容适用于端口8080上的Python Flask后端,我也想在默认端口80上添加Vue应用。
server {
listen 80 default_server;
listen [::]:80;
root /var/www/html/dist;
server_name _;
location /static {
alias /var/www/html/dist/static/;
}
location / {
root /var/www/html/dist;
try_files $uri $uri/ /index.html;
}
location /api {
root /var/www/html;
try_files $uri @wsgi;
}
location @wsgi {
proxy_pass http://unix:/tmp/gunicorn.sock;
include proxy_params;
}
听起来您需要添加另一个服务器块来服务前端。
server {
listen 80 default_server;
listen [::]:80;
location / {
root /path/to/dist;
try_files $uri $uri/ /index.html;
}
}
我已将此代码基于this tutorial,其中上例中的/path/to/dist
应更改为the dist directory of the Vue.js front-end from your vue app
。
如果您已阅读本教程中的设置Nginx部分,您会注意到它们在同一服务器块中的不同URL处提供了Flask应用程序和Vue.js:
server {
listen 80;
server_name 123.45.67.89;
location /api {
include uwsgi_params;
uwsgi_pass unix:/home/survey/flask-vuejs-survey/backend/surveyapi.sock;
}
location / {
root /home/survey/flask-vuejs-survey/frontend/survey-spa/dist;
try_files $uri $uri/ /index.html;
}
如果此应用将面向互联网,那么这可能是一种更好的处理方式,因为您的用户的互联网提供商可能阻止了8080端口的传出。使用第二种配置,所有内容都通过端口80提供。
您可能需要稍微调整vue.js
应用程序,使其在/api
(或其他位置)上寻找API,而使/
可以免费服务于前端。