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

Предварительные требования

Для начала необходимо подготовить сервер VPS под управлением Ubuntu 20.04 LTS (или новее). На нём должна быть установлена актуальная версия Node.js ≥ 16 и пакетный менеджер Yarn. Кроме того, понадобится доступ к пользователю с правами sudo, а также открытые порты 80 и 443 (для HTTP/HTTPS). Если планируется использовать базу данных PostgreSQL — установите её заранее; в качестве альтернативы можно воспользоваться SQLite, который уже включён в Strapi.

Установка Node.js и Yarn

# Добавляем репозиторий NodeSource
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Проверяем версии
node -v   # должно вывести 18.x
npm -v    # версия npm

# Устанавливаем Yarn глобально
npm install -g yarn
yarn -v    # проверяем версию Yarn

Node.js и Yarn будут использоваться как для сборки Strapi, так и для Nuxt‑приложения.

Создание проекта Strapi

1. Переходим в домашний каталог и создаём директорию для бекенда:

mkdir ~/strapi-blog && cd ~/strapi-blog

2. Генерируем новый проект Strapi в режиме quickstart (используется SQLite, удобно для прототипа):

yarn create strapi-app . --quickstart

Команда автоматически установит зависимости, запустит миграцию и откроет административную панель. После первого старта Strapi создаст базу данных ./.tmp/data.db. Для продакшн‑развёртывания рекомендуется переключиться на PostgreSQL:

# Устанавливаем драйвер PostgreSQL
yarn add pg

# Редактируем файл config/database.js
module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: env('DATABASE_HOST', '127.0.0.1'),
        port: env.int('DATABASE_PORT', 5432),
        database: env('DATABASE_NAME', 'strapi'),
        username: env('DATABASE_USERNAME', 'strapi_user'),
        password: env('DATABASE_PASSWORD', 'strong_password'),
        ssl: env.bool('DATABASE_SSL', false),
      },
      options: {}
    },
  },
});

После изменения конфигурации перезапустите Strapi:

yarn develop

Настройка Nuxt.js фронтенда

1. В отдельной папке создаём Nuxt‑проект:

mkdir ~/nuxt-blog && cd ~/nuxt-blog
npx nuxi init .
yarn install

2. Добавляем модуль @nuxtjs/strapi для удобного обращения к API Strapi:

yarn add @nuxtjs/strapi

3. В nuxt.config.ts (или nuxt.config.js) указываем базовый URL Strapi:

export default defineNuxtConfig({
  modules: ['@nuxtjs/strapi'],
  strapi: {
    url: process.env.STRAPI_URL || 'http://localhost:1337',
    prefix: '/api',
    version: 'v4',
  },
});

4. Создаём страницу, выводящую список статей:

<template>
  <section>
    <h1>Блог</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <nuxt-link :to="`/post/${post.id}`">{{ post.title }}</nuxt-link>
      </li>
    </ul>
  </section>
</template>

<script setup>
const { $strapi } = useNuxtApp()
const posts = await $strapi.find('articles')
</script>

5. Сборка и тестовый запуск:

yarn build
yarn preview   # проверяем, что фронтенд правильно получает данные из Strapi

Управление процессами с PM2

Для обеспечения непрерывного функционирования обеих приложений применяем процесс‑менеджер PM2.

sudo npm install -g pm2

# Запуск Strapi в продакшн‑режиме
pm2 start yarn --name strapi --interpreter bash -- start

# Запуск Nuxt в режиме SSR
pm2 start yarn --name nuxt --interpreter bash -- start

Сохраняем конфигурацию, чтобы процессы автозапускались после перезагрузки сервера:

pm2 save
pm2 startup systemd

Конфигурация Nginx как обратного прокси

1. Устанавливаем Nginx:

sudo apt-get update
sudo apt-get install -y nginx

2. Отключаем дефолтный сайт и создаём новый виртуальный хост:

sudo rm /etc/nginx/sites-enabled/default
sudo nano /etc/nginx/sites-available/blog.conf

В файл blog.conf помещаем:

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

    # Прокси для Strapi (порт 1337)
    location /api/ {
        proxy_pass http://127.0.0.1:1337/;
        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;
    }

    # Прокси для Nuxt (порт 3000)
    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

3. Активируем конфигурацию и проверяем синтаксис:

sudo ln -s /etc/nginx/sites-available/blog.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

После перезапуска Nginx запросы к example.com/api/* идут к Strapi, а все остальные — к Nuxt‑приложению.

Подготовка к HTTPS

Для обеспечения безопасного соединения рекомендуется установить сертификат от Let’s Encrypt. Инструмент certbot автоматизирует процесс:

sudo apt-get install -y certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com

После подтверждения домена certbot внесёт необходимые изменения в конфигурацию Nginx и настроит автоматическое обновление сертификатов.

Финальная проверка

1. Откройте в браузере http://example.com — должна отобразиться главная страница Nuxt‑блога с данными из Strapi.
2. Перейдите в административную панель Strapi по адресу http://example.com/api/admin (или http://example.com/api/admin после настройки SSL) и убедитесь, что вход работает.
3. Проверьте, что процессы Strapi и Nuxt находятся под управлением PM2:

pm2 list

Если все сервисы находятся в статусе online, инфраструктура готова к работе в продакшн‑режиме. Дальнейшее развитие блога может включать добавление новых коллекций в Strapi, настройку ролей доступа, а также интеграцию CI/CD для автоматических развертываний.