Deploy Vue.js on custom route via NGINX

vue_nginx.md

Deploy Vue.js on custom route via NGINX

Необходимо реализовать такой роутинг через NGINX

• /a/* (user dashboard, SPA/Vue.js)
• /* (все кроме /a/* тулит на proxy pass в Nuxt SSR)

Конфиг NGINX'a

map $sent_http_content_type $expires {
    "text/html" epoch;
    "text/html; charset=utf-8" epoch;
    default off;
}

server {
    listen 80;
    server_name supersite.com;

    root /var/www/supersite.com/spa/dist;
    index index.html;

    location / {
        expires $expires;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 1m;
        proxy_connect_timeout 1m;
        proxy_pass http://127.0.0.1:7000;
    }

    location = /a {
        try_files $uri /a/index.html;
    }

    location /a/ {
        try_files $uri /a/index.html;
    }
}

Конфиг билда Vue.js

module.exports = {
  publicPath: 'a',
  outputDir: 'dist/a'
}

P.S.

На счет билда

Если не подправить конфиг билда, Vue-CLI будет собирать билд в корневую папку /var/www/supersite.com/spa/dist. В этом случае при обращении по роуту supersite.com/a NGINX пойдет в папку /var/www/supersite.com/spa/dist увидит что там отсутствует директория a запрашиваемая в строке браузера и перенаправит все в корень на proxy_pass. Собстенно с чем я и столкнулся.

На счет роутов

location = /a и location /a/ если указать место этих двух один location /a NGINX будет парсить все роуты начинающиеся с /a например /about в /a/bout