Как правилньо деплоить nuxt приложение на linux server?

Question

[postya]

Имеется приложеине на Nuxt. У себя на локальном компьютере оно успешно открывается ит показываются все ресурсы
Приложение задеплоено здесь:
glinka.tk
Когда сделал деплой на linux сервер, приложеине отображается, но ресурсы не найдены, и появляется ошибка:


Что я сделал не так при деплое? и как это исправить?

Все ресурсы грузятся из этой папки:


Подключаю изображения вот так:

<img src="../assets/images/my-works-bg.webp" alt="works-bg" />

Пробовал также вот так:
<img src="~/assets/images/avatar.webp" alt="" />

Как я делал деплой:
1. Склонировал проект на сервер
2. Установил зависимости - yarn install
3. Сделал билд проекта: yarn run build
4. Создал файл конфига для nginx:

server {

    listen 80;

    server_name glinka.tk  www.glinka.tk;
    index index.html index.htm;

    location /_nuxt/ {
    alias /home/kentforth/webapps/Glinka-Frontend-Nuxt/.nuxt/dist/;
  }
    location / {
       proxy_pass http://localhost:6050;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
    }

    error_log  /var/log/nginx/glinka-frontend-error.log;
    access_log /var/log/nginx/glinka-frontend-access.log;
}

4. Запустил приложение через pm2
pm2 start npm --name "glinka-frontend" -- start

Answer 1

[Darhild]

Я в nginx не эксперт, но, по-моему, перенаправление для /_nuxt/ здесь лишнее. Достаточно proxy_pass на тот порт, на котором стартует nuxt - во всяком случае, у нас всё без проблем работает именно так.

Comments

[postya]

а где указываете стартовый файл index.html или это только для статичных стайтов , а не SSR?
После инсталяции всех зависимостей делаете только run build?
Нет ли в наличии файла примера для nginx приложения в режиме SSR?

[Darhild]

Да, это только для статичных сайтов, тут же nuxt start всё сам делает. Кстати, по дефолту он на 3000 порту запускается, у вас где-то прописано, что порт должен быть именно 6050? Порядок деплоя у нас такой:
1) клонируем репозиторий
2) npm i
3) npm run build
4) pm2 start, т.е. всё так же , как у вас.
В конфиге nginx:

server_name www.example.com; 
root /www/example

location / {
  proxy_pass http://127.0.0.1:3000
  proxy_set_header Host $host
}

[postya]

Darhild, помимо прописывания порта в nginx, я его ешё указал в конфиг файле nuxt.

server: {
    port: 6050,
    host: '0.0.0.0',
  },

а что означает root /www/example ?
Какая это папка в проекте? что там должно быть? Это корневая папка проекта?

[Darhild]

А, ну вот да, у вас, видимо, проблема, из-за того, что root не указан. Это папка, в которой, собственно, лежит приложение (склонирован репозиторий). Нужна не папка dist, а именно всё, что там лежит. (То, что localhost открывается на 0.0.0.0 у вас, я так понимаю, тоже прописано?)

[postya]

Darhild, на данный момент мой файл nginx выглядит вот так:

server {

    listen 80;

    server_name glinka.tk  www.glinka.tk;
    index index.html index.htm;
    root /home/kentforth/webapps/Glinka-Frontend-Nuxt;

    location / {
       proxy_pass http://localhost:6050;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
    }

    error_log  /var/log/nginx/glinka-frontend-error.log;
    access_log /var/log/nginx/glinka-frontend-access.log;
}

Изображения появляются,но почему-то не могут загрузиться файлы js от библиотек и показывается ошибка:



Как будто файлы плагинов не добавились в билд проекта. Хотя может и в nginx, нужно какой-то другой путь прописать,чтобы и js файлы тоже подключились

[Darhild]

Попробуйте вот это убрать:
index index.html index.htm;

[postya]

Darhild, убрал эту строку, заново установил зависимости, собрал проект и все заработало!
Благодарю вас добрый человек!