Начало работы с Headless Hashnode на DigitalOcean

Введение

Hashnode — это бесплатная платформа для публикации контента и сообщество разработчиков, призванное поддерживать интерес энтузиастов в сфере технологий. HashNode предоставляет пользователям возможность создавать и делиться записями в блоге, а также формировать сообщество, посвященное различным областям технологий. Цель HashNode — упростить создание и ведение удобного для разработчиков и оптимизированного для SEO технического блога, предлагая такие функции, как настраиваемые домены, встроенный редактор и тесную интеграцию с популярными системами контроля версий, такими как GitHub. Новейшее предложение, Headless Hashnode, позволяет создать блог с нуля, используя инновационные API GraphQL от Hashnode. Вы можете создать блог с нуля или использовать стартовый набор Next.js.

В этом руководстве мы настроим Hashnode headless на DigitalOcean Droplets.

Введение в HeadLess HashNode

Система управления контентом без интерфейса (CMS) — это архитектура, разделяющая уровни управления контентом и его представления. В традиционной CMS контент создаётся, хранится и отображается в одной системе, но в архитектуре без интерфейса хранение и представление контента можно осуществлять раздельно, что даёт дизайнерам и разработчикам возможность экспериментировать с тем, как блог выглядит для пользователей.

Headless Hashnode — это специализированная CMS, которая помогает пользователям создавать личные или корпоративные блоги, чтобы они могли экспериментировать со своим доменом, используя WYSIWYG-редактор Hashnode, ИИ и инструменты SEO-оптимизации, не беспокоясь об отслеживании контента и аналитики во время хостинга.

Начинать

Предпосылки:

1. Аккаунт на DigitalOcean
2. Аккаунт на Hashnode.

 Использование капель DigitalOcean

DigitalOcean Droplets — это простые, масштабируемые и надежные виртуальные машины, которые можно легко развернуть менее чем за минуту.

Чтобы начать, перейдите в панель управления DigitalOcean и нажмите зелёную кнопку «Создать» в правом верхнем углу страницы. В раскрывающемся меню выберите «Droplets» (этот пункт также будет первым).

В следующем окне вам нужно будет указать ваши предпочтения по региону, изображению, размеру и другим параметрам. Настоятельно рекомендуется выбрать регион, ближайший к вашим потенциальным читателям, даже если дата-центр уже выбран.

В следующем разделе «Изображения» перейдите на вкладку «Маркет» и найдите NodeJS в Ubuntu. В Маркете DigitalOcean представлен набор готовых к развертыванию инструментов и ресурсов, называемых «Приложения 1-Click». Вместо того, чтобы вручную загружать все зависимости, вы можете перейти в Маркет и запустить приложение 1-Click, которое поставляется с предварительно настроенными изображениями и настройками, а также всеми пакетами и зависимостями, необходимыми для вашего проекта. Ваш экран должен выглядеть примерно так:

В следующем окне вы можете выбрать размер дроплета. Выберите наиболее подходящий для вас или вашей компании, учитывая количество блогов, которые вы планируете публиковать в будущем. В идеале, если вы хотите запустить эту реализацию в рабочей среде, мы рекомендуем использовать SSD-диск объёмом не менее 25 ГБ. Для более высокой производительности мы рекомендуем выбрать премиум-дроплет, поддерживающий процессоры Intel, AMD и NVMe SSD. Вы можете выбрать премиум-дроплет в соответствии со своими потребностями, как и стандартный дроплет.

После этого вам нужно выбрать метод аутентификации. Вы можете войти в свой Droplet с помощью SSH-ключа или пароля. В этом руководстве мы будем использовать пароль, поэтому добавьте любую строку на свой выбор и запишите её. В следующем разделе вы можете бесплатно добавить расширенный мониторинг метрик и оповещения, установив флажок рядом с соответствующей опцией, и всё готово. Убедитесь, что вы добавили более простое имя хоста для своего Droplet и проверьте все данные, прежде чем нажать “Создать Droplet”.

Подготовка Droplet занимает около минуты. После этого нажмите ссылку «Начать», чтобы ознакомиться с обзором приложения Marketplace и узнать, что в него включено.

Настройка капель

Чтобы запустить свой Droplet, принимайте входящие соединения и перенаправляйте их в приложение на локальном терминале:

ssh root@YOUR-DROPLET-IP

«Замените »YOUR-DROPLET-IP» на IP-адрес вашего Droplet-сервера в панели управления. При появлении запроса введите пароль.

Следующим шагом будет обновление и модернизация пакетов в Droplet, для этого выполните следующие команды:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://get.pnpm.io/install.sh | sh - to install pnpm.

Чтобы удалить страницу по умолчанию, отображаемую в Droplet и занимающую порт 3000, используйте следующие команды.

cd /var/www
rm -r html
cd ~
cd /etc/nginx/sites-enabled/
rm -r default

Если изменения не вступят в силу в течение 5 минут, возможно, потребуется выключить и снова включить дроплет. В этом случае вам потребуется снова подключиться к нему по SSH через локальный терминал. Для дальнейших действий мы будем использовать Node.js, npm и Nginx, которые уже установлены на дроплете. Nginx — это инструмент, который отвечает за маршрутизацию к нашему приложению Next.js.

Конфигурация Nginx

Создайте новый файл конфигурации Nginx с помощью следующей команды:

sudo nano /etc/nginx/sites-available/hashnode

Вставьте следующую конфигурацию, заменив server_name на IP-адрес вашего дроплета:

server {
listen 80;
server_name YOUR_IP_ADDRESS;
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;
}
}

После этого сохраните и закройте файл. Теперь нам нужно создать символическую ссылку для включения настроек, используя следующую команду:

sudo ln -s /etc/nginx/sites-available/hashnode /etc/nginx/sites-enabled/

Чтобы проверить конфигурацию Nginx на наличие синтаксических ошибок, выполните следующее:

sudo nginx -t

Идеальный вывод должен быть таким:

Теперь мы готовы перезапустить Nginx. Это можно сделать с помощью команды:

sudo service nginx restart

Установка Headless Hashnode

Перейдите в каталог справа:

cd /var/www

Клонируйте репозиторий Headless Hashnode Github:

git clone https://github.com/hashnode/starter-kit

Выберите шаблон и перейдите в его каталог. В этом уроке мы будем использовать тему «Персональная»:

cd starter-kit/packages/blog-starter-kit/themes/personal

Скопируйте файл переменных среды:

cp .env.example .env.local

Затем отредактируйте файл переменных среды:

nano .env.local

Вам необходимо изменить переменные окружения так, чтобы они указывали на вашу учётную запись Hashnode. Измените NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST на вашу конечную точку, а NEXT_PUBLIC_MODE — на рабочую. Файл будет выглядеть следующим образом:

Чтобы установить зависимости, выполните следующее:

pnpm install

Ваш экран должен выглядеть следующим образом:

Теперь, когда всё готово, вы можете выполнить следующую команду для развёртывания Headless Hashnode на вашем Droplet. Обратите внимание, что компиляция займёт минуту. Ваш терминал должен выглядеть примерно так:

pnpm dev

После компиляции вы можете зайти на свой IP-адрес Droplet и убедиться, что ваш сайт Headless Hashnode работает!

Благодаря этому мы развернули Hashnode headless на Droplet DigitalOcean, используя обратный прокси-сервер, предоставленный Nginx!

Настройка менеджера процессов PM2

Иногда выполняемая нами команда может быть остановлена из-за перезапуска сервера или необходимости установки обновления. Мы воспользуемся инструментом PM2, чтобы обеспечить бесперебойную работу приложения. PM2 перезапустится даже в случае сбоя приложения.

В образе Node.js Marketplace предустановлен PM2. Чтобы ваше приложение всегда работало с PM2:

cd /var/www/starter-kit
pm2 start npm --name "hashnode" --start

Чтобы обеспечить запуск PM2 при загрузке системы, выполните следующие команды. Это создаст скрипт, который можно скопировать и вставить в терминал для запуска PM2 при загрузке и сохранения этих настроек.

pm2 startup 
pm2 save

Результат

Инструменты Headless CMS отлично подходят для настройки пользовательских интерфейсов, а Hashnode предлагает высокомасштабируемый и гибкий инструмент. Чтобы повысить безопасность и SEO-оптимизацию вашего блога, рассмотрите возможность настройки SSL-сертификатов с помощью Let's Encrypt и внедрения HTTPS-подключений. Если вы хотите добавить собственное доменное имя, не забудьте настроить параметры DNS. Направьте запись A вашего домена на IP-адрес вашего Droplet, чтобы вы могли получить доступ к приложению, используя своё доменное имя. Зарегистрируйте учётную запись сегодня. Мы с нетерпением ждём ваших блогов в DigitalOcean!