Set up Vue app run using Nginx on port 80 from Raspbian along with Flask backend running on port 8080

user_3311276 0
Viewed 952

I have Nginx setup Flask based backend running on port 8080 with the below configuration

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;
    }
}

I have also setup a systemd service that uses gunicorn to run the flask app using: gunicorn --bind=unix:/tmp/gunicorn.sock --workers=4 start_backend:web_app

Now the above is working for Python Flask backend on port 8080, I also want to add Vue app on default port 80 as well.

Update

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;
        }
raspbian vue.js nginx
1 Answers

Sounds like you need to add another server block to serve the frontend.

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

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

I've based this code on this tutorial where /path/to/dist in the above example should be changed to the dist directory of the Vue.js front-end from your vue app.

If you have a read of the section Setting Up Nginx in this tutorial, you'll notice that they are serving the Flask application and the Vue.js fronted at different URLs in the same server block:

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;
  }

If this app will be facing the internet then this is probably a better way to do things, as port 8080 outgoing may be blocked by your users' internet provider. With the second configuration everything is served through port 80.

You may have to adjust your vue.js app slightly to make it look for the API at /api (or something) leaving / free to serve the frontend.

user_20525750
Related