Полный деплой Strapi CMS + Nuxt.js на Ubuntu

2026-02-28 в 11:46, admin, рубрики: Nuxt.js, strapi, strapi 5

Пошаговое руководство по развёртыванию блога с нуля: Strapi CMS (админка и API) и Nuxt.js (фронтенд) на VPS Ubuntu. В итоге — работающий блог за Nginx с возможностью включить SSL по отдельной инструкции.

1. Подготовка сервера

Подключитесь к VPS по SSH. Обновите систему и при необходимости задайте пароль root:

sudo apt update && sudo apt upgrade -y
sudo passwd root   # опционально: установить пароль root

2. Создание пользователя Ubuntu

Работать под root небезопасно. Создайте отдельного пользователя для приложений и переключитесь на него.

# Создать пользователя (подставьте своё имя, например deploy)
sudo adduser deploy

# Добавить в группу sudo и переключиться
sudo usermod -aG sudo deploy
sudo su - deploy

Дальнейшие шаги выполняйте от имени этого пользователя. При необходимости настроить SSH-ключ для deploy — добавьте свой authorized_keys в ~/.ssh в его домашней директории.

3. Установка пакетов и фаервол

Установите нужные пакеты:

sudo apt install -y curl nginx nano git ufw

Откройте порты и включите UFW:

sudo ufw allow OpenSSH
sudo ufw allow 80/tcp    # HTTP
sudo ufw allow 443/tcp   # HTTPS (на случай последующей настройки SSL)
sudo ufw enable

4. Установка Node.js 24 через NVM

Устанавливаем NVM, затем Node.js 24 (LTS-линия):

# Установка NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

# Подгрузить NVM в текущую сессию (вместо перезапуска shell)
. "$HOME/.nvm/nvm.sh"

# Установка Node.js 24
nvm install 24

Проверка версий:

node -v   # ожидается v24.13.1 (или актуальная v24.x)
npm -v    # ожидается 11.8.0 (или актуальная 11.x)

Чтобы NVM подхватывался при каждом входе, в ~/.bashrc уже должна быть строка подключения скрипта NVM — при установке она добавляется автоматически.

5. Установка PM2

PM2 — менеджер процессов для Node.js: держит приложения запущенными и перезапускает при сбоях.

npm install -g pm2
pm2 update

pm2 update синхронизирует PM2 с системой (рекомендуется после первой установки).

6. Клонирование проектов

Создайте каталог для сайтов и склонируйте репозитории (подставьте свои URL):

sudo mkdir -p /var/www
sudo chown $USER:$USER /var/www
cd /var/www

git clone https://github.com/your-user/nuxt-blog.git client
git clone https://github.com/your-user/strapi-blog.git server

client — фронтенд на Nuxt, server — бэкенд и админка Strapi.

7. Подготовка Nuxt.js

В каталоге client в package.json должны быть скрипты для dev, build и продакшн-запуска:

"scripts": {
  "dev": "nuxt dev",
  "build": "nuxt build",
  "start": "nuxt start"
}

Для продакшена соберите приложение:

cd /var/www/client
npm ci
npm run build

8. Подготовка Strapi

В каталоге server установите зависимости и при необходимости задайте переменные окружения (БД, APP_KEYS, API_TOKEN_SALT, ADMIN_JWT_SECRET, JWT_SECRET — см. документацию Strapi). Для быстрого старта достаточно .env с HOST=0.0.0.0 и PORT=1337.

cd /var/www/server
npm ci
# При необходимости: npm run build (для production-режима)

9. Настройка Nginx

Nginx будет проксировать запросы на Nuxt (порт 3000) и Strapi (порт 1337).

Сайт Nuxt (фронтенд блога):

sudo nano /etc/nginx/sites-available/nuxt.conf

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:3000;
        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;
    }
}

Сайт Strapi (админка и API):

sudo nano /etc/nginx/sites-available/strapi.conf

server {
    listen 80;
    server_name panel.example.com;

    location / {
        proxy_pass http://localhost:1337;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Замените example.com и panel.example.com на свои домены или IP на время проверки.

Включите сайты и перезагрузите Nginx:

sudo ln -s /etc/nginx/sites-available/nuxt.conf /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/strapi.conf /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

10. Конфигурация PM2

В каждом проекте создайте ecosystem.config.cjs для запуска через PM2.

Nuxt — в /var/www/client/ecosystem.config.cjs:

module.exports = {
  apps: [
    {
      name: 'client-dev',
      script: 'npm',
      args: 'run dev',
      cwd: '/var/www/client',
      env: { NODE_ENV: 'development' }
    },
    {
      name: 'client-prod',
      script: 'npm',
      args: 'run start',
      cwd: '/var/www/client',
      env: { NODE_ENV: 'production' }
    }
  ]
};

Strapi — в /var/www/server/ecosystem.config.cjs:

module.exports = {
  apps: [
    {
      name: 'server-dev',
      script: 'npm',
      args: 'run develop',
      cwd: '/var/www/server',
      env: {
        NODE_ENV: 'development',
        HOST: '0.0.0.0',
        PORT: 1337
      }
    },
    {
      name: 'server-prod',
      script: 'npm',
      args: 'run start',
      cwd: '/var/www/server',
      env: {
        NODE_ENV: 'production',
        HOST: '0.0.0.0',
        PORT: 1337
      }
    }
  ]
};

Для продакшена используйте client-prod и server-prod, для разработки — client-dev и server-dev.

11. Запуск и автозапуск

Запуск (пример для режима разработки):

cd /var/www/client
pm2 start ecosystem.config.cjs --only client-dev

cd /var/www/server
pm2 start ecosystem.config.cjs --only server-dev

Сохранить список процессов и настроить автозапуск после перезагрузки сервера:

pm2 save
pm2 startup

Выполните команду, которую выведет pm2 startup (обычно с sudo).

12. Полезные команды

pm2 list           # список процессов
pm2 logs           # логи всех приложений
pm2 logs client-dev --lines 100   # логи одного приложения
pm2 restart all    # перезапуск всех
pm2 restart client-prod server-prod   # перезапуск выбранных
pm2 save           # сохранить текущий список для автозапуска

13. Заключение

В результате у вас:

Отдельный пользователь Ubuntu для деплоя;
Node.js 24 и PM2;
Nuxt (фронтенд блога) и Strapi (CMS и API) за Nginx;
Автозапуск приложений после перезагрузки сервера;

Напоминание: разработка Strapi (Content-Types, роли, медиа) и интеграция Nuxt с API делаются заранее, до деплоя — на локальной машине или в отдельном окружении. На сервер выкатываются уже готовые проекты. Для продакшена переключите PM2 на client-prod и server-prod.

Автор: olegnastyle

Источник