Предварительные требования
Для начала необходимо подготовить сервер 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
- Переходим в домашний каталог и создаём директорию для бекенда:
mkdir ~/strapi-blog && cd ~/strapi-blog
- Генерируем новый проект 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 фронтенда
- В отдельной папке создаём Nuxt‑проект:
mkdir ~/nuxt-blog && cd ~/nuxt-blog
npx nuxi init .
yarn install
- Добавляем модуль
@nuxtjs/strapiдля удобного обращения к API Strapi:
yarn add @nuxtjs/strapi
- В
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',
},
});
- Создаём страницу, выводящую список статей:
<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>
- Сборка и тестовый запуск:
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 как обратного прокси
- Устанавливаем Nginx:
sudo apt-get update
sudo apt-get install -y nginx
- Отключаем дефолтный сайт и создаём новый виртуальный хост:
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;
}
}
- Активируем конфигурацию и проверяем синтаксис:
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 и настроит автоматическое обновление сертификатов.
Финальная проверка
- Откройте в браузере
http://example.com— должна отобразиться главная страница Nuxt‑блога с данными из Strapi. - Перейдите в административную панель Strapi по адресу
http://example.com/api/admin(илиhttp://example.com/api/adminпосле настройки SSL) и убедитесь, что вход работает. - Проверьте, что процессы Strapi и Nuxt находятся под управлением PM2:
pm2 list
Если все сервисы находятся в статусе online, инфраструктура готова к работе в продакшн‑режиме. Дальнейшее развитие блога может включать добавление новых коллекций в Strapi, настройку ролей доступа, а также интеграцию CI/CD для автоматических развертываний.