Разворачиваем у себя копию MODX-Клуба (prisma-cms.com)

Dec 11, 2018

Всем привет!

Сразу скажу, что для тех, кто хоть немного освоил node-js, данная процедура скорее всего не доставит никаких сложностей. По большому счету все будет достаточно проще.

Цель

Развернуть на своем хостинге или локальной машине копию prisma-cms.com. У вас не будет прямого доступа к базе данных, весь обмен данными будет выполняться по API. Но зато вы сможете поиграться с оформлением, а быть может даже предложить какие-то улучшения дизайнерские.

Требования

OS Linux (я не проводил адаптацию под винду, пока спрос не такой высокий для этого).
node-js минимум 10 версии (сейчас и 11 есть)
Оперативки минимум 3 Gb. Вообще для конечной работы скрипта надо совсем немного памяти, но установка зависимостей и билд скриптов требуют не мало.
git

Установка

1. Скачиваем себе проект

git clone https://github.com/prisma-cms/prisma-cms.com
cd prisma-cms.com

2. Устанавливаем зависимости

yarn --ignore-engines

3. Скачиваем graphql-схему

Как я и говорил, весь обмен данными происходит через GraphQL-API. Если вы еще не знакомы с GraphQL, советую к прочтению.

Вот, чтобы клиентские части могли более полноценно работать с этим, им нужна схема.

Наглядный пример: https://prisma-cms.com/graphql-voyager. Чтобы этот интерфейс смог отобразить все объекты и связи с ним, ему нужна схема, иначе как он все это узнает? Или когда вы пишете запросы в редакторе кода, чтобы интерфейс мог делать подсказки, подсвечивать ошибки и т.п., ему нужна схема http://joxi.ru/LmGyqplHeXYbxA. Ну, без схемы этот редактор и вовсе откажется работать :)

В общем, она нам нужна. Качаем ее.

yarn get-api-schema -e https://prisma-cms.com/api/

В ответ вы должны получить сообщение Schema file was created: src/schema/generated/api.graphql и там же этот файл должен находиться.

4. Генерируем API-фрагменты

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

yarn build-api-fragments

5. Прописываем точку доступа API

Вообще, все основное уже сделано, но загвоздка в том, что мы разворачиваем не отдельный самостоятельный сайт (хотя эта сборка таковым является, но для ее самостоятельного запуска надо еще призму разворачивать, да и это пустой сайт получится, без наполнения). Вот нам и надо сделать так, чтобы все запросы API и на картинки уходили на https://prisma-cms.com/

Но это не сложно будет сделать. Открываем у себя вот этот файл https://github.com/prisma-cms/prisma-cms.com/blob/master/src/setupProxy.js и меняем его содержимое вот на такое:

// const PrismaProxy = require("@prisma-cms/front/lib/setupProxy");

var proxy = require('http-proxy-middleware');

const cwd = process.cwd();

module.exports = function (app) {

  app.get("/voyager.worker.js", (req, res, next) => {
    res.sendFile(`${cwd}/node_modules/@prisma-cms/graphql-voyager/dist/voyager.worker.js`);
  });


  app.use(proxy(["/api/", "/images/"], {
    ws: true,
    target: 'https://prisma-cms.com',
    changeOrigin: true,
    secure: false,
  }));

  // PrismaProxy(app);

};

Вот теперь все API-запросы и запросы на картинки будут как и прежде идти на ваш сервер, но проксироваться на prisma-cms.com

Все :)

Запускаем сайт

yarn start

Если вы запускаете его локально на вашем компьютере, то у вас браузер сам откроется с адресом http://localhost:3000. Если на удаленном сервере запускаете, то подождите пока сбилдятся скрипты и тогда уже открывайте http://вашДоменИлиIP:3000

Теперь у вас своя собственная версия MODX-Клуба, и можете даже локально авторизовываться и писать комментарии, они будут прилетать сюда, а написанное здесь автоматически будет появляться и у вас. Правда здорово? :)

Кастомизируем оформление

Но это, конечно же, еще не все. Самое интересное в том, что теперь всякий, кому не нравится оформление, и у кого честь чувство стиля и руки откуда надо, каждый теперь может внести свой вклад, чтобы все выглядело интересней.

Давайте попробуем что-нибудь по мелочи поменять в оформлении...

Есть две основные "точки входа" по стилям:

Material-ui theme provider. Кому интересно, можно здесь, поиграться. Механизм этот для большинства, скорее всего, не понятный, поэтому можете особо не заморачиваться. Но если интерес есть, начните с освоения JSS. Можете, к примеру, вот это прочитать. У меня на сайте конфиги темы прописаны здесь.
Непосредственно CSS. Но здесь его нельзя редактировать. Это сгенерированные стили из less. Вот less-файл и надо редактировать.

После того, как less отредактирован, надо сгенерировать css.

Выполняем

yarn build-less

Если сайт у вас уже запущен (yarn less), то скпомпиллированные стили сразу применятся на странице без какой-либо перезагрузки последней.

Если less-правки не единичные (сидите переделываете весь этот недодизайн) и не хотите каждый раз выполнять yarn build-less, можно запустить компилляцию в режиме watch (отслеживания изменений файлов).

yarn build-less -w

В таком случае стили будут пересобираться автоматически после каждого сохранения less-файла. Довольно удобно.

У тут чуть-чуть поигрался со стилями. Интересно знать, стало лучше? Для меня ничего не поменялось:)

Бонус

Точно так же вы можете у себя развернуть копию https://pivkarta.ru/

Этот проект мы делаем совместно с Димой Поповым и он тоже лежит в открытом доступе.

git clone https://github.com/Pivkarta/pivkarta.ru.git
cd pivkarta.ru/
yarn --ignore-engines
yarn get-api-schema -e https://pivkarta.ru/api/
yarn build-api-fragments

# Правим проксирование запросов

# запуск сайта
yarn start

Перед запуском не забываем подправить проксирование по аналогии, как это было описано выше, только вместо https://prisma-cms.com указываем https://pivkarta.ru

Заключение

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

UPD: Если вы хотите полностью развернуть себе самостоятельную копию сайта Клуба, то есть чтобы вообще со своей базой работал и т.п., то вот инструкция:

Пункты 1 и 2 из предыдущей инструкции повторяем.

3. Деплоим базу данных.

Так как мы будем использовать не текущую базу данных MODX-Клуба, а создавать свою, то нам просто надо задеплоить схему, указав endpoint бэкэнда. Вот здесь я писал про то, что это и для чего, и что для тестов поднял публичный эндпоинт: https://modx.pro/development/17092

Вы можете использовать его для тестов и в данном примере я тоже буду в него деплоить схему. Выполняем:

endpoint=http://test-api.prisma-cms.com/{project}/{state} yarn deploy

Надо подставить свои project и state. Обычно это было бы, к примеру modxclub/test, но я предлагаю во избежание конфликтов вместо project указывать свой username, а вместо state использовать {project}-{state}. Например я написал endpoint=http://test-api.prisma-cms.com/fi1osof/modxclub-test yarn deploy

4. Запуск сервера.

Хотя реальная база данных у нас находится на удаленном сервере (в данном случае http://test-api.prisma-cms.com), она у нас только для хранения информации. Реальная логика обрабатывается нашим сервером. Это в примере выше мы проксировали запросы на сайт Клуба, и там вся логика обрабатывалась, а здесь у нас свой сервер. Выполняем:

APP_SECRET={secret} endpoint={endpoint} yarn start-server

endpoint соответственно указываем тот, куда выполняли деплой. secret - произвольная строка, она используется для механизма авторизации пользователей.

Если все запустилось ОК, вы получите сообщение Server is running on http://localhost:4000. Откройте в браузере. По сути это аналог API MODX-Клуба, только для своей базы данных.

5. Запуск сайта

Если у вас сервер запустился, значит можно и фронт запускать. Открываем в новом терминале эту же папку и выполняем:

yarn start

В итоге у вас должен открыться сайт на 3000-ом порту. Так как у вас база своя с нуля, то там конечно же ничего не будет, то есть ни блогов, ни топиков, ни комментариев, ни пользователей. Это не страшно. Регистрируйтесь, заводите блоги, топики и т.п.

Если вы захотите и боевой призма-сервер себе развернуть, я писал про это здесь.