时间戳

首页 > 解决方案 > 在 Raspbian 的端口 80 上使用 Nginx 设置 Vue 应用程序运行，以及在端口 8080 上运行的 Flask 后端

nginx - 在 Raspbian 的端口 80 上使用 Nginx 设置 Vue 应用程序运行，以及在端口 8080 上运行的 Flask 后端

问题描述

我有 Nginx 设置基于 Flask 的后端在端口 8080 上运行，配置如下

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 运行烧瓶应用程序：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;
        }

标签： nginxvue.jsraspbian

解决方案

听起来您需要添加另一个服务器块来为前端提供服务。

server {
    listen 80 default_server;
    listen [::]:80;

    location / {
         root /path/to/dist;
         try_files $uri $uri/ /index.html;
    }
}

我已将此代码基于本教程，/path/to/dist在上面的示例中应更改为the dist directory of the Vue.js front-end from your vue app.

如果您阅读过本教程中的设置 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，/从而为前端提供服务。

推荐阅读