На localhost после перезагрузки все норм а на сервере Cannot GET /UsersList

Question

На локальном сервере http://localhost:8000/UsersList после перезагрузки все нормально, он опять показывает текущую страницу. Фронт на Vue3. А вот когда положил это все на сервер, по путям ходит, все норм, но если я перезагрузаю страницу то получаю Cannot GET /UsersList. Предполагаю что nginx не знает что с этим делать.

Во Vue роуторе все норм.

import { createRouter, createWebHistory } from 'vue-router'
import MyProjects from '@/views/MyProjects.vue'
import Projects from '@/views/ProjectsList.vue'
import UsersList from '@/views/UsersList.vue'
import PageTest from '@/views/PageTest.vue'
import SettingProfile from '@/views/SettingProfile.vue'
import PyramidManagement from '@/views/PyramidManagement.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'MyProjects',
      component: MyProjects,
    },
    {
      path: '/MyTasks',
      name: 'MyTasks',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/MyTasks.vue'),
    },
    {
      path: '/UsersList',
      name: 'UsersList',
      component: UsersList,
    },
    {
      path: '/PageTest',
      name: 'PageTest',
      component: PageTest,
    },
    {
      path: '/SettingProfile',
      name: 'SettingProfile',
      component: SettingProfile,
    },
    {
      path: '/PyramidManagement',
      name: 'PyramidManagement',
      component: PyramidManagement,
    },
    {
      path: '/projects/:id',
      name: 'projects',
      component: Projects,
    },
  ],
})

export default router

server {
        listen 80 default_server;
        # Указываем "динамическую" папку NodeJS
        root /var/www/nodejs;
        index index.html;
 
        location = /50x.html {
                root /var/www/errors;
        }
        location = /40x.html {
                root /var/www/errors;
        }
    # Указываем IP адрес сервера
    server_name 11.111.111.111;
    # Если мы обращаемся по любому УРЛ начиная с /
    # то сервер будет обрабатывать NodeJS
    location / {

        root /var/www/nodejs;
        autoindex off;
        proxy_pass http://11.111.111.111:8000;

    }
    # Если мы обращемся по УРЛ начинающийся с /nginx/
    # то мы будем подгружать "статичные" файлы хранящиеся в нем
    # в соответствии с наличием этих файлов в этой папке
    location /nginx/ {
        # Указываем корень
        root /var/www/;
        autoindex off;
        # Итого путь для Nginx будет
        # /var/www/static/
    }
}

Answer 1

Месяца полтора назад вы уже притаскивали сюда эту "конфигурацию". Я кажется уже давал вам совет не пользоваться подобными "гайдами". А вы упорно цепляетесь за эту какашку. Выбросьте и забудьте. У вас статически собранное приложение? Значит, любой запрос, который не соответствует физическому файлу в корневой директории веб-сервера или одной из её поддиректорий, надо передавать корневому index.html. Делается это, как правило, так:

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

Хотя на самом деле то же самое можно сделать альтернативным способом, немного производительнее (минус один системный вызов stat() на каждый запрос):

server {
    root /path/to/web/root;
    location / {
        error_page 404 = /index.html;
    }
}

Если же у приложения есть серверная часть, например, API для фронтенда, то тогда запросы дифференцируют по URI-префиксу, и конфигурация для такого приложения выглядит примерно так:

server {
    root /path/to/web/root;
    location / {
        try_files $uri /index.html;
    }
    location /api/ {
        # устанавливаем необходимые заголовки
        proxy_set_header Host $host;
        proxy_set_header ...
        # проксируем запрос на NodeJS
        proxy_pass http://127.0.0.1:8000;
    }
}

Если серверная часть использует для работы протокол WebSocket, то тогда проксировать такие запросы надо специальным образом, в официальной документации по этому поводу есть соответствующий раздел.

БЛОГ НА HUSL

На localhost после перезагрузки все норм а на сервере Cannot GET /UsersList

Ответы (1 шт):