在Raspbian的端口80上使用Nginx以及在端口8080上运行的Flask后端设置Vue应用程序运行
我在端口8080上运行了基于Nginx设置的后端,配置如下在Raspbian的端口80上使用Nginx以及在端口8080上运行的Flask后端设置Vue应用程序运行,nginx,vue.js,raspbian,Nginx,Vue.js,Raspbian,我在端口8080上运行了基于Nginx设置的后端,配置如下 server { listen 8080 default_server; listen [::]:8080; root /var/www/html; server_name _; location /static { alias /var/www/html/static/; } location / { try_files $uri @wsg
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;
}
}
我还设置了一个systemd服务,该服务使用gunicorn运行flask应用程序,使用:gunicorn--bind=unix:/tmp/gunicorn.sock--workers=4 start\u backend:web\u app
现在,以上内容适用于端口8080上的Python Flask后端,我还想在默认端口80上添加Vue应用程序
更新
听起来您需要添加另一个服务器块来为前端服务
server {
listen 80 default_server;
listen [::]:80;
location / {
root /path/to/dist;
try_files $uri $uri/ /index.html;
}
}
我根据上面示例中的/path/to/dist
将Vue应用程序中Vue.js前端的dist目录更改为的位置编写了此代码
如果您阅读了本教程中的“设置Nginx”一节,您会注意到它们正在为Flask应用程序和Vue.js提供服务,它们位于同一服务器块中的不同URL处:
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,让/
自由地为前端服务。当然,如果它不是位于另一个在端口443上实现SSL的反向代理之后,如果您自己正在配置面向前端的nginx服务器,您应该明确地将作为起点,并阅读指南。答案似乎在我的问题中,我为rootNow vuejs应用程序提供的/static
可以是/dist
,但/var/www/html/dist/static
下的css/js文件夹不可见。我在/api
上的/var/www/html/
提供的flask应用程序未加载到浏览器中。我在上面添加了一个更新
server {
listen 80 default_server;
listen [::]:80;
location / {
root /path/to/dist;
try_files $uri $uri/ /index.html;
}
}