В данной статье мы рассмотрим вопрос развертывания с нуля NuxtJS-проекта (либо любого другого проекта на NodeJS) на VDS-сервере с использованием веб-сервера Apahce2, NodeJS, менеджера процессов pm2 с полным циклом установки всех компонентов.

Установка будет производится на чистом VDS-сервере, не имеющем каких-либо настроек

Шаг 1. Подключаемся по SSH к VDS

Для подключения к VDS-серверу по SSH более не требуется скачивать и устанавливать какие-либо дополнительные программы, так как в Windows PowerShell на ОС Windows 10 последних версий уже встроен клиент OpenSSH.

Я же буду использовать приложение Windows Terminal, скачать которое можно в Microsoft Store (разработчик Windows Terminal - сами Microsoft).

В данной инструкции в качестве операционной системы на сервере мы будем использовать Ubuntu Server 20.04

Итак, подключаемся к серверу при помощи следующей команды

ssh root@Ваш_IP_сервера

Вместо root вы должны указать своего пользователя, который у Вас был выдан при создании сервера.

Вместо IP-адреса также можно использовать и FQDN-адрес сервера, если вы уже прописали DNS A-запись на Вашем домене со значением Вашего IP-адреса сервера.

При успешном логине Вы увидите уже терминал (консоль) сервера

Как видим, мы подключены к удаленному серверу.

Шаг 2. Добавление репозитория Apache2 на сервер и установка веб-сервера

В данной инструкции мы будем устанавливать веб-сервер Apache2 из официального репозитория, так как в репозитории Ubuntu не всегда последняя версия веб-сервера Apache2.

Для начала установим необходимые пакеты командой:

apt install software-properties-common

Если данный пакет уже установлен, то вы увидите следующее:

После установки необходимых пакетов добавляем официальный репозиторий Apache2 следующей командой:

apt-add-repository ppa:ondrej/apache2

При добавлении репозитория, в терминале появится вопрос, на который необходимо нажать клавишу Enter

После добавления репозитория производим установку самого веб-сервера Apache2:

apt install apache2

В терминале появится вопрос о подтверждении установки веб-сервера Apache2. Если согласны с установкой - смело нажимайте клавишу Enter.

Готово!

Теперь можно перейти по IP-адресу, либо по FQDN-адресу вашего сервера и убедиться, что веб-сервер Apache2 успешно установлен.

Шаг 3. Установка менеджера версий NodeJS (nvm) и самого NodeJS.

Для установки и более удобного дальнейшего контроля версий NodeJS мы установки менеджер версии NodeJS. Пакет называется nvm.

Для этого перейдем в официальный репозиторий на GitHub:

https://github.com/nvm-sh/nvm

И перейдем в раздел Installing and Updating и выберем один их способов установки скрипта. Я выберу второй через утилиту wget:

Копируем команду и вставляем ее в терминал сервера:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

И жмем клавишу Enter

После установки перезагружаем сервер при помощи кнопки перезагрузки в панели управления сервером, либо через команду в терминале init 6

После перезагрузки снова подключаемся к серверу согласно шагу 1.

Запускаем команду nvm для того, чтобы посмотреть и ознакомится со списком команд скрипта. Находим команду установки NodeJS в версии LTS:

Вводим эту команду в терминал и жмем клавишу Enter:

nvm install --lts

Проверяем установленную версию NodeJS слудующей командой:

node -v

И получаем сообщение об установленной версии NodeJS

Шаг 4. Установка менеджера процессов pm2

Для того, чтобы управлять процессами и приложениями, запущенными в среде NodeJS, а также автоматического их запуска после перезагрузки сервера, нам понадобится менеджер процессов NodeJS, который мы установим глобально в систему через пакетный менеджер npm - pm2:

npm install -g pm2

При успешной установке мы увидим следующее:

При помощи команды pm2 -h можно посмотреть список доступных команд

Шаг 5. Запуск NodeJS-приложения (в нашем случае - NuxtJS-приложения)

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

NuxtJS проект по-умолчанию запускается в двух режимах:

• Dev: npm run dev
• Prod: npm run build и npm run start

Мы же не будем запускать это приложение этими командами, а сразу воспользуемся менеджером pm2

Для этого перейдем в папку с проектом и запустим команду инициализации менеджера pm2:

pm2 init

Открываем файл ecosystem.config.js прямо в терминале через редактор nano командой и удаляем все содержимое:

nano ecosystem.config.js

Вставляем туда следующее содержимое и сохраняем комбинацией клавиш Ctrl+O, затем жмем Enter:

module.exports = {
  apps : [
    {
      name: "nuxt-dev",
      script: "npm",
      args: "run dev"
    },
    {
      name: "nuxt-prod",
      script: "npm",
      args: "run start"
    }
  ]
}

Для запуска dev-версии используем команду следующую команду:

pm2 start ecosystem.config.js --only nuxt-dev

Для запуска prod-версии:

npm run build && pm2 start ecosystem.config.js --only nuxt-prod

Я, для примера, запущу Dev-версию

Для последующей остановки/запуска приложения не нужно будет заходить в папку с проектом и запускать командой выше. Достаточно будет ввести название приложения из монитора pm2:

pm2 start nuxt-dev

для запуска, либо

pm2 stop nuxt-dev 

для остановки приложения.

Для просмотра всех запущенных NodeJS-приложений посредством pm2 небходимо ввести в терминал следующую команду:

pm2 status

Для просмотра монитора процессов:

pm2 monit

Подключаем автоматический запуск приложений через pm2 после перезагрузки сервера:

pm2 startup

и сохраняем изменения:

pm2 save

[Дополнительно] Графический интерфейс pm2 вне терминала

Для запуска веб-интерфейса управления процессами pm2 необходимо зарегистрироваться на сайте pm2.io и создать Bucket

Будем считать, что есть существующий аккаунт и Bucket (инструкцию можно почитать на оф. сайте pm2)

Вводим команду для подключения к веб-интерфейсу:

pm2 plus

На первом этапе pm2 спросит, есть ли у Вас аккаунт pm2.io (в нашем случае есть и мы вводим букву y и жмем клавишу Enter

Вводим ваш email и пароль от аккаунта.

Если все введено верно, то pm2 попросит Вас выбрать, к какому Bucket подключиться - выбирайте ранее созданный. У меня это TestBucket

При успешном подключении к Bucket в веб-интерфейсе pm2 появится Ваше приложение(процесс). Там вы сможете посмотреть статистику, сбросить монитор и перезагрузить приложение

Далее нам необходимо повторно добавить в автозагрузку pm2 и сохранить изменения:

pm2 unstartup
pm2 startup
pm2 save

Шаг 6. Проксирование NodeJS-приложения через Apache2 Proxy

У нас уже запущено приложение на NuxtJS на порту 3000 (по-умолчанию)

Теперь нам необходимо проксировать его на определенный адрес и стандартный порт 80 (для HTTP).

Для этого установим и включим модуль Apache2 Proxy:

a2enmod proxy_http

И перезагрузим веб-сервер командой:

systemctl restart apache2

Переходим в папку с виртуальными хостами Apache2 командой:

cd /etc/apache2/sites-available

и дублируем дефолтный файл конфигурации виртуального хоста Apache2:

cp 000-default.conf ваш_домен.conf

Открываем файл ваш_домен.conf с помощью редактора nano. Изменяем на Ваши следующие значения:

• ServerName: необходимо раскомментировать и значение example.com поменять на ваше доменное имя
• ServerAdmin: webmaster@localhost меняем на Ваш email
• DocumentRoot: можно закомментировать значком #

Затем, чтобы проксировать наше приложение на этот адрес, нам необходимо добавить следующие строки

ProxyPreserveHost On

ProxyPass / http://127.0.0.1:3000/
ProxyPassReverse / http://127.0.0.1:3000/

Где :3000 - Ваш порт приложения

Сохраняем изменения комбинацией клавиш Ctrl+O и жмем Enter. Выходим из редактора комбинацией Ctrl+Z

Теперь можно включить виртуальный хост и перезагрузить веб-сервер*:

a2ensite ваш_домен
systemctl reload apache2

* В команде a2ensite ваш_домен не обязательно указывать расширение конфигурационного файла

Смотрим результат

Как видим - приложение успешно открывается на необходимом нам адресе и стандартном порту веб-сервера Apache2

Шаг 7. Тестирование работы pm2

Теперь необходимо проверить, срабатывает ли автоматический запуск приложений менеджером pm2 после перезагрузки сервера.

Для этого в терминале пропишем команду init 6, либо перезагрузим сервер в панели управления хостингом.

Если Вы все сделали правильно и согласно инструкции - приложение на NodeJS автоматически запустится на вашем адресе в течение минуты после запуска VDS-сервера.

Заключение

В данном материале мы рассмотрели подробно установку веб-сервера Apache2, установку менеджера версий NodeJS - NVM и установку самого NodeJS через этот менеджер, запуск NodeJS-приложения на примере приложения на VueJS-фреймворке NuxtJS, автоматический запуск этого приложения после перезагрузки сервера с помощью менеджера процессов pm2 и проксирование приложения на определенный адрес.

Другие статьи по теме NodeJS приложений, веб-разработки, администрирования серверов Вы можете найти у меня в блоге

Что такое динамическая обложка для группы Вконтакте можно прочитать по ссылке. Там же находится ссылка на скачивание рассматриваемого в статье скрипта.

После скачивания файлов вы получите скрипт динамической обложки и PSD шаблон, чтобы его редактировать и создать уникальное оформление группы Вконтакте.

Чтобы иметь возможность настраивать скрипт, вам понадобится установить локальный сервер на свой компьютер. Я использую OpenServer.

Перейдите по ссылке и начните скачивать Premium или Ultimate версию. Бесплатный метод скачивания ограничен в максимальной скорости, так что это может занять какое-то время. А пока вы читаете данную статью, сервер уже наполовину скачается.

Вы можете использовать любой другой сервер. Это не имеет большого значения. Главное, чтобы в нем был планировщик заданий (cron) и версия PHP не ниже 5.5.

В некоторых случаях возможны проблемы с запуском OpenServer – его любит блокировать брадмауэр. Если такое происходит, то добавьте программу в исключения и запускайте от имени администратора.

После успешного запуска сервера (в трее будет гореть зеленый флажок) откройте настройки и в закладке Модули выберите Apache-2.4 и PHP-5.5, как показано на скриншоте.

После сохранения настроек и перезапуска локальный сервер будет полностью готов к работе.

Знакомство с PSD шаблоном

Откроем и ознакомимся сначала с PSD шаблоном.

Внутри файла все разложено по слоям, любой элемент можно редактировать: менять цвет, размер, форму. Используемый в проекте шрифт есть в папке font со скриптом.

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

• Последних подписчиков: от одного до трех;
• Время: в формате 14:59;
• Текущую дату: 21 мая 2017;
• День недели: воскресенье

Знакомство с файлами скрипта

Переходим в папку со скриптом динамической обложки.

В папке cover находится изначальный файл обложки. Он обязательно должен иметь имя cover_bg.jpg. Иначе скрипт не будет работать. Размер файла 1590×400 пикселей.

В папку font нужно закинуть шрифты, которые вы использовали при разработке дизайна. Настройки шрифта задаются в файле setup.php. Обратите внимание, что названия шрифтов не должны иметь пробелов.

Файлы function.php, grous_getMembers.php и style.css изменять не рекомендуется. Вы можете их посмотреть, но менять в них ничего не стоит.

Нужно настраивать только файлы setup.php и при необходимости index.php.

Настройка файла setup.php

Это основной файл настройки. Открывайте его с помощью текстового редактора. Я рекомендую Notepad++. И в разделе «Типографика» настраиваете используемые шрифты, размер и цвет.

$font — шрифт отображения имени и фамилии новых подписчиков $font_clock — шрифт отображения часов $font_date — шрифт отображения текущей даты и дня недели $last_subscriber_font_size — размер шрифта имени и фамилии подписчиков $last_subscriber_font_color — цвет шрифта имени и фамилии подписчиков $today_font_size — размер шрифта дня недели $today_font_color — цвет шрифта дня недели $date_font_size — размер шрифта текущего числа $date_font_color — цвет шрифта числа $clock_font_size — размер шрифта часов $clock_font_color — цвет шрифта часов

Теперь поднимемся в начало файла. Пора заполнить самую важную часть настройки скрипта.

Нам нужно получить токен доступа. Для этого есть отдельный файл token.php. Открываем его:

И видим одну незаполненную ячейку в массиве $params, а именно client_id.

Чтобы его получить, вам нужно создать свое приложение Вконтакте. Для этого переходим по ссылке: https://vk.com/apps?act=manage

1. Жмем в правом верхнем углу кнопку «Создать приложение».
2. Придумываем ему название.
3. Оставляем платформу Standalone-приложение
4. Жмем «Подключить приложение»
5. Подтверждаем свои действия с помощью SMS (это бесплатно)

Все, приложение создано. Просто, правда?

Переключаем вкладку Настройки и копируем оттуда ID приложения:

После чего вставляем его в файл token.php

Жмем сохранить и открываем файл в браузере локального сервера по адресу:

http://covers-script/token.php

Этот путь будет верен, если вы не изменяли название папки со скриптом динамической обложки при копировании в проекты OpenServer.

В браузере сгенерируется ссылка на получение токена. Переходите по ней (откроется в новом окне). Вконтакте попросит разрешить доступ созданному вами приложению к вашему аккаунту. Разрешаете и попадаете на страницу со сгенерированным токеном в адресной строке. Копируете его и вставляете между одинарными кавычками в файле setup.php

$group_id вставляете ID группы, в которую собираетесь устанавливать динамическую обложку.

Обратите внимание, что получать токен необходимо с аккаунта, которые имеет как минимум права редактора или администратора в сообществе, для которого настраивается динамическая обложка.

Для настройки обложки можно создать группу Вконтакте в качестве тестовой и попросить вступить туда 3-5 человек, чтобы скрипту было кого показывать. После завершения всех манипуляций достаточно будет только сменить ID группы и все.

После того, как эти данные заполнены, можно приступать к следующим настройкам.

Настройка отображения новых подписчиков

Пролистываем файл setup.php до блока «Последний подписавшийся». В нем можно настроить количество отображаемых подписчиков, размер и форму аватарок: круглые или квадратные. Далее настраивается положение аватарки, имени и фамилии по каждому подписчику.

Координаты расположения аватарки рассчитываются до верхнего левого края. Вычислить их можно с помощью PSD файла. Переключаетесь на нужный слой и тянете направляющую (включаются с помощью Ctrl + R) пока её не примагнитит к краю. Это и будет нужное значение. По оси X значение получилось 816 пикселей. По оси Y высчитывается аналогично.

Координаты расположения текста под аватарками рассчитываются по оси X до центра аватарки, по оси Y до низа текста.

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

Координаты расположения дня недели (TODAY), даты и часов рассчитываются до левого нижнего угла.

В блоке «Константа» можно поменять часовой пояс, если он у вас отличается от установленного. Остальное трогать не рекомендуется.

Настройка файла index.php

На самом деле изменять что-то в этом файле без знаний PHP не следует. Единственное исключение: если нужно изменить выключку текста.

Во всех трех случаях выравнивание стоит по левому краю. Если того требует дизайн-макет, вы можете поставить выравнивание по центру или по правому краю. Для этого замените ALIGN_LEFT на ALIGN_CENTER или ALIGN_RIGHT соответственно. Осторожно! Не удалите случайно двоеточие или скобки!

При изменении выключки имейте ввиду, что тогда для текста координаты по оси X будут рассчитываться до центра объекта или до его правого края.

На этом настройку можно считать законченной и произвести тестовый запуск скрипта, открыв в браузере ссылку:

http://covers-script/index.php

Если все настроено верно, то вы увидите сообщение, что динамическая обложка успешно загружена в группу. А ниже выведется получившееся изображение.

Настройка автоматического выполнения скрипта

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

Настройка на локальном сервере

Первым делом рассмотрим работу с планировщиком OpenServer. Открываем настройки и переключаемся на закладку «Планировщик заданий». В строке «Выполнить» прописываем код:

%progdir%\modules\wget\bin\wget.exe -q —no-cache http://covers-script/index.php

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

В первой ячейке */5 расшифровывается как «каждые 5 минут». Если написать */15, то скрипт будет запускаться каждые 15 минут. Если написать просто *, то каждую минуту.

Нажимаем кнопку сохранить. Сервер перезапустится и cron начнет работать.

Таким образом можно настроить работу скрипта на компьютере. Но этот вариант не идеален, потому что скрипт будет работать лишь пока компьютер включен.

Настройка на хостинге REG.RU

Рассмотрим настройку автоматического запуска скрипта динамической обложки на примере хостинга REG.RU. Алгоритм работы с другими удаленными серверами будет аналогичен. Единственный момент: на разных серверах может отличаться путь до php-интерпретатора. Узнать его можно у службы поддержки или в разделе «Справка», или с помощью команды which php.

После того, как хостинг будет оплачен и к нему припаркован домен, можно размещать файлы скрипта на удаленном сервере. Для файла index.php обязательно должны быть выставлены права на исполнение: 744 или 755.

Далее стоит проверить включенную версию PHP. Для этого в ISPmanager находим пункт меню Версия PHP в разделе Инструменты. При необходимости включаем версию 5.5

После этого переходим в Планировщик (cron), который находится в том же разделе, и создаем новое задание. В строку «Команда» вводим следующее задание:

/usr/bin/wget -O /dev/null http://LINK/index.php

Где LINK – это пусть до исполнительного файла скрипта динамической обложки Вконтакте.

Настраиваете частоту обновлений, выставив нужные значения, и жмете ОК

Задание создано. Подождите некоторое время и убедитесь, что cron работает и обложка обновляется.

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

Если вам нужен скрипт с дополнительными функциями, также пишите на почту. Мы подберем и реализуем идеальное решение именно для вас.

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

Создание шапки происходит в 4 этапа, о них по порядку

1. Создание самой шапки.
2. Создание скрипта.
3. Установка OpenServer.
4. Настройка сервера и шапки.

1. Создание самой шапки.

Шапка должна иметь вот такой вид примерно:

На шапке заранее размещаете будущие отделы для аватарок и имен тех пользователей, который мы будем определять с помощью скрипта

Для создания такой шапки можно обратиться в группу, которая делает очень дешево такие шапки и оформления для сообществ — > В личные сообщения сообщества Тот самый Лев

На этом с 1 пунктом закончим, переходим к созданию скрипта

2. Создание скрипта.

Этот процесс самый трудоемкий, поэтому если Вы не хотите вдаваться в подробности, то можете сразу скачать архив и перейти к 3 и 4 пункту настройки.

Создаем файл с расширением api.php (Скрипт работает на версии php +5.6) и переходим в редактор Sublime Text или любой другой и вставляем туда этот код:

<?php

require_once('config.php');

function DownloadImages($url, $filename){
    $ch = curl_init($url);
    $fp = fopen($filename, 'wb');
    curl_setopt($ch, CURLOPT_FILE, $fp);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_exec($ch);
    curl_close($ch);
    fclose($fp);
}  

function getPOST($url, $post) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url); //урл сайта к которому обращаемся 
    curl_setopt($ch, CURLOPT_HEADER, false); //выводим заголовки
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,true); //теперь curl вернет нам ответ, а не выведет
    curl_setopt($ch, CURLOPT_POST, true); //передача данных методом POST
    curl_setopt($ch, CURLOPT_USERAGENT,'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36');
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post); //тут переменные которые будут переданы методом POST
    $result = curl_exec($ch);
    curl_close($ch);
    
    return $result;
}
    
function getApiMethod($method_name, $params) {
    global $access_token;
    global $api_version;

    // Сделаем проверки на токен и версию апи, если их не указали, добавим.
    if (!array_key_exists('access_token', $params) && !is_null($access_token)) {
        $params['access_token'] = $access_token;
    }

    if (!array_key_exists('v', $params) && !is_null($api_version)) {
        $params['v'] = $api_version;
    }
    
    // Сортируем массив по ключам
    ksort($params);
    
    // Отправим запрос
    return(getPOST('https://api.vk.com/method/'.$method_name, $params));
}

?>

сохраняем и создаем еще 1 файл с названием config.php и вставляем в него следующий код:

<?php

// KOTOFF.NET 
// Здесь вводим токен своего ПРОФИЛЯ а не сообщества. Получить можно здесь https://vkhost.github.io/
$access_token = 'ТОКЕН';
// ID группы
$group_id = 'ИД ГРУППЫ';
// Круглые аватарки [true - круглые false - квадратные]
$roundingOff = true;
// Шрифт текста (положить свой в папку font)
$font = "UniNeue-HeavyItalic.otf"; 

/* ----------------------- ПОСЛЕДНИЙ ПОДПИСАВШИЙСЯ ----------------------- */

// Показывать последнего подписчика [true - показывать false - нет]
$show_last_subscribe = true; 
// Размер шрифта
$last_subscribe_font_size = 20;
// Цвет текста
$last_subscribe_font_color = '255,255,255';
// Ширина аватарки
$last_subscribe_width = 137;
// Высота аватарки
$last_subscribe_height = 137;
// Координаты аватарки по оси Х
$last_subscribe_photo_pixel_x = 44;
// Координаты аватарки по оси Y
$last_subscribe_photo_pixel_y = 66;
// Координаты имени и фамилии по оси Х
$last_subscribe_text_pixel_x = 108;
// Координаты имени и фамилии по оси Y
$last_subscribe_text_pixel_y = 235;


/* ------------------------ ТОП ПО КОЛ-ВУ ЛАЙКОВ ------------------------ */

// Показывать пользователя который за сегодня набрал большее кол-во лайков к комментариям [true - показывать false - нет]
$show_top_like = true; 
// Размер шрифта
$top_like_font_size = 20;
// Цвет текста
$top_like_font_color = '255,255,255';
// Ширина аватарки
$top_like_width = 137;
// Высота аватарки
$top_like_height = 137;
// Координаты аватарки по оси Х
$top_like_photo_pixel_x = 229;
// Координаты аватарки по оси Y
$top_like_photo_pixel_y = 66;
// Координаты имени и фамилии по оси Х
$top_like_text_pixel_x = 295;
// Координаты имени и фамилии по оси Y
$top_like_text_pixel_y = 235;


/* ----------------------- ТОП ПО КОЛ-ВУ КОММЕНТОВ ----------------------- */

// Показывать пользователя который за сегодня оставил большее кол-во комментариев [true - показывать false - нет]
$show_top_comments = true;
// Размер шрифта
$top_comments_font_size = 20;
// Цвет текста
$top_comments_font_color = '255,255,255';
// Ширина аватарки
$top_comments_width = 137;
// Высота аватарки
$top_comments_height = 137;
// Координаты аватарки по оси Х
$top_comments_photo_pixel_x = 416;
// Координаты аватарки по оси Y
$top_comments_photo_pixel_y = 66;
// Координаты имени и фамилии по оси Х
$top_comments_text_pixel_x = 485;
// Координаты имени и фамилии по оси Y
$top_comments_text_pixel_y = 235;

// Домашняя директория скрипта
define('BASEPATH', str_replace('\\', '/', dirname(__FILE__)) . '/');
// Временная зона
date_default_timezone_set('Europe/Moscow');
// Путь к финальному изображению. 
// Минимальный размер обложки 795 x 200
$output_header = BASEPATH.'header/output.png';
// Путь к изображению которое будет браться за основу. 
// Минимальный размер обложки 795 x 200
$image_bg = BASEPATH.'header/bg.jpg';
// Версия API
$api_version = "5.63";

?>

В данном коде нужно указать токен и ID самой группы. Токен должен быть пользовательский
Пример:

$access_token = 'd398d012e185e01edf145450b7899d90b49a6dfee30af063a788deb6a33219249db3463664cd4a0354a57';
$group_id = '176771278';

Теперь создаем директорию (папку) с названием header и туда загружаем нашу шапку с таким навзанием — bg.jpg

После этого нужно создать еще 1 папку, где будут хранится наши шрифты для имен пользователей, назовем ее font и загружаем туда наши шрифты, скачать можно ниже

Возвращаемся туда, где создавали наши файлы и создаем финальный файл под названием index.php и давайте более детальнее разберем этот код

<?php

require_once('config.php');
require_once('api.php');

header('Content-type: text/html; charset=utf-8');

// Получим текущую дату
$date_today = date('Ymd');

if($show_top_like or $show_top_comments) {
    setLog('Получаю посты группы');
    // Получим посты со стены
    // больше 100 постов получать нет смысла, так как в вк ограничение
    // разрешено постить не больше 50 постов в сутки.
    $wall_get = getApiMethod('wall.get', array(
        'owner_id' => '-'.$group_id,
        'count' => '50'
    ));

    if($wall_get) {
        $wall_get = json_decode($wall_get, true);

        $countlike = array();
        $countcomments = array();
        
        foreach($wall_get['response']['items'] as $wall) {
            
            // Получим кол-во комментариев к посту
            $count = $wall['comments']['count'];
            $offset = 0;

            if($count > 0) { 
                // Получим все комментарии, так как их может быть больше 100.
                while($offset < $count){
                    setLog('Получаю кол-во комментариев к посту '.$wall['id']);
                    // Отправим запрос на получение комментариев
                    $comments_get = getApiMethod('wall.getComments', array(
                        'owner_id' => '-'.$group_id,
                        'post_id' => $wall['id'],
                        'need_likes' => '1',
                        'count' => '100',
                        'offset' => $offset
                    ));
                    
                    if($comments_get) {
                        $comments_get = json_decode($comments_get, true);

                        foreach($comments_get['response']['items'] as $comments) {
                            
                            if($date_today == date('Ymd', $comments['date'])) {
                                // В двух словах мы заносим данные в массив, суммируя их
                                if(!isset($countcomments[$comments['from_id']]) and !isset($countlike[$comments['from_id']])) {
                                    $countcomments[$comments['from_id']] = 1;
                                    $countlike[$comments['from_id']] = $comments['likes']['count'];   
                                } else {
                                    $countcomments[$comments['from_id']]++;
                                    $countlike[$comments['from_id']] += $comments['likes']['count'];
                                } 
                                var_dump($comments);
                            }
                            
                        }  
                    }

                    if($offset<$count) 
                        $offset = $offset + 100;
                }
            }

        }
    }
}



if($show_top_like) {
$day_like_top = 0;


if(count($countlike) > 0) {
    // Теперь найдем кто суммарно получил большее кол-во лайков к комментариям
    $value = max($countlike); 
    $day_like_top = array_search($value, $countlike);
    setLog('Получаю ID кто сумарно набрал большее кол-во лайков к комментариям '.$day_like_top);

    if($day_like_top > 0) {
        $user_top_like = getApiMethod('users.get', array(
            'user_ids' => $day_like_top,
            'fields' => 'photo_200'
        ));

        if($user_top_like) {
            $user_top_like = json_decode($user_top_like, true);

            $top_like_name = $user_top_like['response'][0]['first_name'];
            $top_like_lastname = $user_top_like['response'][0]['last_name'];
            $top_like_photo = $user_top_like['response'][0]['photo_200'];
            
            // Скачиваем фото
            if(!empty($top_like_name) && !empty($top_like_lastname) && !empty($top_like_photo)){
                DownloadImages($top_like_photo, 'header/top_likes.jpg');
            }
        }
    }
}

}


if($show_top_comments) {
    $day_comment_top = 0;




if(count($countcomments) > 0) {
        // Теперь найдем кто суммарно написал больше всех комментариев
        $value = max($countcomments); 
        $day_comment_top = array_search($value, $countcomments);
        setLog('Получаю ID кто суммарно написал больше всех комментариев '.$day_comment_top);

        if($day_comment_top > 0) {
            $user_top_comment = getApiMethod('users.get', array(
                'user_ids' => $day_comment_top,
                'fields' => 'photo_200'
            ));

            if($user_top_comment) {
                $user_top_comment = json_decode($user_top_comment, true);

                $top_comment_name = $user_top_comment['response'][0]['first_name'];
                $top_comment_lastname = $user_top_comment['response'][0]['last_name'];
                $top_comment_photo = $user_top_comment['response'][0]['photo_200'];
                
                // Скачиваем фото
                if(!empty($top_comment_name) && !empty($top_comment_lastname) && !empty($top_comment_photo)){
                    DownloadImages($top_comment_photo, 'header/top_comments.jpg');
                }
            }
        }
    }
}


if($show_last_subscribe) {
    // Теперь найдем последнего подписчика
    $last_subscribe = getApiMethod('groups.getMembers', array(
                'group_id' => $group_id,
                'sort' => 'time_desc',
                'count' => '1',
                'fields' => 'photo_200',
                'access_token' => $access_token
            ));

    if($last_subscribe) {
        $last_subscribe = json_decode($last_subscribe, true);

        $members_count = $last_subscribe['response']['count'];
        $last_subscribe_firstname = $last_subscribe['response']['items'][0]['first_name'];
        $last_subscribe_lastname = $last_subscribe['response']['items'][0]['last_name'];
        $last_subscribe_photo = $last_subscribe['response']['items'][0]['photo_200'];

        setLog('Получаю последнего вступившего в группу '.$last_subscribe_firstname.' '.$last_subscribe_lastname);
        
        // Скачиваем фото
        if(!empty($last_subscribe_firstname) && !empty($last_subscribe_lastname) && !empty($last_subscribe_photo)){
            DownloadImages($last_subscribe_photo, 'header/last_subscribe.jpg');
        }

    }
}
sleep(3);
if($show_weather){
    $ResultWeatherApi = getPOST('http://api.openweathermap.org/data/2.5/weather', array(
        'id' => $weather_city_id,
        'units' => 'metric',
        'CNT' => '1',
        'lang' => 'ru',
        'appid' => $weather_api_id
    ));

    $s = array(
        'id' => $weather_city_id,
        'units' => 'metric',
        'CNT' => '1',
        'lang' => 'ru',
        'appid' => $weather_api_id
    );
}

// -----------------------------------------------------------------------------
// --------------------------------- РИСОВАНИЕ ---------------------------------
// -----------------------------------------------------------------------------
setLog('Создание обложки');

$draw = new ImagickDraw(); 
$bg = new Imagick($image_bg);
$draw->setFont(BASEPATH."/font/".$font);
$draw->setTextAlignment(Imagick::ALIGN_CENTER);

// Последний подписчик
if($show_last_subscribe) {
    $file_name = BASEPATH.'header/last_subscribe.jpg';

    if(file_exists($file_name) && $show_last_subscribe) {
        $last_subscribe_photo = new Imagick($file_name);
        if($roundingOff==true) {
            RoundingOff($last_subscribe_photo, $last_subscribe_width,$last_subscribe_height);
        }

        $draw->setFontSize($last_subscribe_font_size);
        $draw->setFillColor("rgb(".$last_subscribe_font_color.")");

        $bg->compositeImage($last_subscribe_photo, Imagick::COMPOSITE_DEFAULT, $last_subscribe_photo_pixel_x, $last_subscribe_photo_pixel_y);
        $bg->annotateImage($draw, $last_subscribe_text_pixel_x, $last_subscribe_text_pixel_y, 0, mb_strtoupper($last_subscribe_firstname."\n".$last_subscribe_lastname, 'UTF-8'));
    }
}

// Топ по комментам
$file_name = BASEPATH.'header/top_comments.jpg';

if(file_exists($file_name) && $show_top_comments) {
    $top_comments_photo = new Imagick($file_name);
    if($roundingOff==true) {
        RoundingOff($top_comments_photo, $top_comments_width,$top_comments_height);
    }

    $draw->setFontSize($top_comments_font_size);
    $draw->setFillColor("rgb(".$top_comments_font_color.")");

    $bg->compositeImage($top_comments_photo, Imagick::COMPOSITE_DEFAULT, $top_comments_photo_pixel_x, $top_comments_photo_pixel_y);
    $bg->annotateImage($draw, $top_comments_text_pixel_x, $top_comments_text_pixel_y, 0, mb_strtoupper($top_comment_name."\n".$top_comment_lastname, 'UTF-8'));
}

// Топ по лайкам
$file_name = BASEPATH.'header/top_likes.jpg';

if(file_exists($file_name) && $show_top_like) {
    $top_like_photo = new Imagick($file_name);
    if($roundingOff==true) {
        RoundingOff($top_like_photo, $top_like_width,$top_like_height);
    }

    $draw->setFontSize($top_like_font_size);
    $draw->setFillColor("rgb(".$top_like_font_color.")");

    $bg->compositeImage($top_like_photo, Imagick::COMPOSITE_DEFAULT, $top_like_photo_pixel_x, $top_like_photo_pixel_y);
    $bg->annotateImage($draw, $top_like_text_pixel_x, $top_like_text_pixel_y, 0, mb_strtoupper($top_like_name."\n".$top_like_lastname, 'UTF-8'));
}

$bg->setImageFormat("png");
$bg->writeImage($output_header);

//echo '<img src="'.'header/output.png'.'">';

// -----------------------------------------------------------------------------
// --------------------------- ЗАГРУЗКА НА СЕРВЕР ------------------------------
// -----------------------------------------------------------------------------

// Получим адресс сервера
$getUrl = getApiMethod('photos.getOwnerCoverPhotoUploadServer', array(
    'group_id' => $group_id,
    'crop_x2' => '1590'
));
setLog('Получаю адресс сервера '.$getUrl);


if($getUrl) {
    $getUrl = json_decode($getUrl, true);

    $url = $getUrl['response']['upload_url'];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($ch, CURLOPT_POSTFIELDS, array('photo' => new CURLFile($output_header, 'image/jpeg', 'image0')));
    $upload = curl_exec( $ch );
    curl_close( $ch );

    if($upload) {
        $upload = json_decode($upload, true);

        $getUrl = getApiMethod('photos.saveOwnerCoverPhoto', array(
            'hash' => $upload['hash'],
            'photo' => $upload['photo'],
        ));
        
        setLog('Загружаю обложку '.$getUrl);

        if(stripos($getUrl, 'response":{"images":[{')) {
            print_r('Успешно загрузили обложку <a href ="https://kotoff.net/ target="_blank" >kotoff.net</a></br>');
             echo '<p>*** Больше всех сегодня лайков набрал: <a href ="https://vk.com/id'.$day_like_top.'" target="_blank" >'.$top_like_name.' '.$top_like_lastname.' - '.$countlike[$day_like_top].'</a> шт.</p></br>';
            echo '<p>*** Больше всех сегодня комментариев написал: <a href ="https://vk.com/id'.$day_comment_top.'" target="_blank" >'.$top_comment_name.' '.$top_comment_lastname.' - '.$countcomments[$day_comment_top].'</a> шт.</p></br>';
              echo '<p>*** Последний подписчик <a href ="https://vk.com/id'.$day_like_top.'" target="_blank" >'.$last_subscribe_firstname.' '.$last_subscribe_lastname.'</a></p></br>';
             echo '<br><img src="'.'header/output.png'.'">';
            setLog('Загружаю обложку в '.$group_id);
        } else {
            print_r('Ошибка при загрузке обложки '.$getUrl);
            setLog('Ошибка при загрузке обложки '.$getUrl);
        }
        
    }
   
}



function RoundingOff($_imagick, $width, $height) {
    $_imagick->adaptiveResizeImage($width, $height, 100);
    $_imagick->setImageFormat('png');
        
    $_imagick->roundCornersImage(
        90, 90, 0, 0, 0
    );
}

function setLog($message) {
    $log_file_name = 'logs.txt';

    if(file_exists($log_file_name)) {
        $log = array_diff(explode("\r\n", file_get_contents($log_file_name)), array(''));
    }

    $log[] = date("m.d.Y-H:i:s").' | '.$message;

    if(file_put_contents($log_file_name, implode("\r\n", $log))) {
        return true;
    } else {
        return false;
    }
}


?>

Данный код собирает посты и с помощью циклов считает лайки, комментарии и определяет последнего вступившего. Код полностью рабочий, более детальную настройку рассмотрим в 4 пункте данной статьи. У данного скрипта есть несколько недоработок, часть из них была уже исправлена, для платных групп мы используем собственную версию скрипта. Сохраняем все файлы и переходим к 3 пункту настроек.

3. Установка OpenServer.

Для работы шапки нам потребуется сервер, а что бы не покупать и не платить деньги, мы будем использовать Open Server Panel — это портативная серверная платформа и программная среда для разработки

Переходим на официальный сайт и скачиваем дистрибутив-> Скачать Open Server

Нам предлагают на выбор 3 версии дистрибутива (ULTIMATE PREMIUM BASIC) с различным включенным функционалом, нам подойдет самый простой — BASIC, но если есть возможность, советую скачивать ULTIMATE версию!

После скачивания, распаковываем архив в удобное для Вас место, у Вас появится папка OSPanel

Заходим в нее и запускаем наш сервер

В трее, у Вас появится красный флажок, сервер нужно запустить выбрав зеленый

После запуска, там же выбираем Папка с сайтами и открываем уже созданный каталог с сайтом localhost, удаляем все что там есть и загружаем наши созданные файлы

Все готово, переходим к настройке и запуску.

4. Настройка сервера и шапки.

После успешной настройки, переходим к настройке, перейдя в браузере по адресу — http://localhost/index.php:

Если получили Warning похожий на этот:

То Вам нужно проверить правильно ли Вы указали токен профиля или ID группы, получить ID группы можно перейдя настройки сообщества

Если у Вас стоит короткое название, то просто откройте любую фотографию в группе и скопируйте ID с браузерной строки, все что после photo-ID_ЦИФРЫ (без минуса):

Если же Вы получили шапку:

Это значит что Вы сделали все правильно, давайте перейдем в группу, напишем пост, комментарий и поставим лайк:

Снова переходим на — http://localhost/index.php и смотрим что у нас получилось:

Как видим все работает, аватарки и текст можно перемещать, так как в Вашей шапке расположение может быть другое как тут например

Для этого открываем файл config.php

И меняем координаты, это один из трудоемких процессов, так как здесь нужно будет поиграться с положением и найти те самые координаты, примерное расположение можно узнавать используя Paint, наводим курсор в верхнюю правую точку устанавливаемого аватара и ниже получаем координаты:

Это условные координаты по оси Х и Y, далее просто смещаете по несколько пикселей в одну из сторон и находите оптимальную точку.

Настройка на этом практически завершена. Осталось сделать так, что бы скрипт сам обновлял ее, допустим каждые 5 минут, заходим в настройки OpenServer из трея и выбираем вкладку планировщик задач, прописываем команду:

%progdir%\modules\wget\bin\wget.exe -q —no-cache http://localhost/index.php

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

При желании, можете загрузить скрипт на хостинг, и использовать CRON для запуска этого скрипта в нужное время.

На этом у меня все, пишите свои комментарии, задавайте вопросы, мы постараемся ответить на них, всем динамичных шапок

Let’s Encrypt представляет собой центр сертификации (Certificate Authority, CA), позволяющий получать и устанавливать бесплатные сертификаты TLS/SSL, тем самым позволяя использовать шифрованный HTTPS на веб-серверах. Процесс получения сертификатов упрощается за счёт наличия клиента Certbot, который пытается автоматизировать большую часть (если не все) необходимых операций. В настоящее время весь процесс получения и установки сертификатов полностью автоматизирован и для Apache и для Nginx.

В этом руководстве мы используем Certbot для получения бесплатного SSL сертификата для Apache на Ubuntu 18.04, а также настроим автоматическое продление этого сертификата.

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

Шаг 1 - Установка Certbot

Перед началом использования Let’s Encrypt для получения SSL сертификаты установим Certbot на ваш сервер.

Certbot находится в активной разработке, поэтому пакеты Certbot, предоставляемые Ubuntu, обычно являются устаревшими. Тем не менее, разработчики Certbot поддерживают свой репозиторий пакетов для Ubuntu с актуальными версиями, поэтому мы будем использовать именно этот репозиторий.

Сначала добавим репозиторий:

sudo add-apt-repository ppa:certbot/certbot

Далее нажмите ENTER.

Установим пакет Certbot для Apache с помощью apt:

sudo apt install python-certbot-apache

Теперь Certbot готов к использованию, но для того, чтобы он мог настроить SSL для Apache, нам сперва необходимо проверить кое-какие настройки Apache.

Шаг 2 - Настройка SSL сертификата

Certbot должен иметь возможность найти корректный виртуальный хост в вашей конфигурации Apache для того, чтобы автоматически конфигурировать SSL. Для этого он будет искать директиву ServerName, которая совпадает с доменным именем, для которого вы запросите сертификат.

Если вы следовали инструкциям по настройке виртуального хоста в руководстве по установке Apache, у вас должен быть виртуальный хост для вашего домена по адресу /etc/apache2/sites-available/example.com.conf с уже правильно настроенной директивой ServerName.

Для проверки откройте файл серверного блока в nano или любом другом текстовом редакторе:

sudo nano /etc/apache2/sites-available/example.com.conf

Найдите строку с ServerName. Она должна выглядеть примерно так:

...
ServerName example.com;
...

Если она выглядит таким образом, закройте файл и переходите к следующему шагу.

Если она не выглядит так, как описано выше, обновите директиву ServerName. Затем сохраните и закройте файл, после чего проверьте корректность синтаксиса вашего конфигурационного файла командой:

sudo apache2ctl configtest

Если вы получили ошибку, откройте файл серверного блока и проверьте его на наличие опечаток или пропущенных символов. После того, как ваш конфигурационный файл будет проходить проверку на корректность, перезагрузите Apache для применения новой конфигурации:

sudo systemctl reload apache2

Теперь Certbot может находить и обновлять корректный виртуальный хост.

Далее обновим настройки файрвола для пропуска HTTPS трафика.

Шаг 3 - Разрешение HTTPS в файрволе

Если у вас включен файрвол ufw, как рекомендуется в руководстве по первичной настройке сервера, вам необходимо внести некоторые изменения в его настройки для разрешения трафика HTTPS. К счастью, Apache регистрирует необходимые профили в ufw в момент установки.

Вы можете ознакомиться с текущими настройками командой:

sudo ufw status

Скорее всего вывод будет выглядеть следующим образом:

ВыводStatus: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
Apache                     ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
Apache (v6)                ALLOW       Anywhere (v6)

Как видно из вывода, разрешён только трафик HTTP.

Для того, чтобы разрешить трафик HTTPS, разрешим профиль Apache Full и удалим избыточный профиль Apache:

sudo ufw allow 'Apache Full'
sudo ufw delete allow 'Apache'

Проверим внесённые изменения:

sudo ufw status

Теперь настройки ufw должны выглядеть следующим образом:

ВыводStatus: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
Apache Full                ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
Apache Full (v6)           ALLOW       Anywhere (v6)  

Теперь мы можем запустить Certbot и получить наши сертификаты.

Шаг 4 - Получение SSL сертификата

Certbot предоставляет несколько способов получения сертификатов SSL с использованием плагинов. Плагин для Apache берёт на себя настройку Apache и перезагрузку конфигурации, когда это необходимо. Для использования плагина выполним команду:

sudo certbot --apache -d example.com -d www.example.com

Эта команда запускает certbot с плагином --apache, ключи -d определяют имена доменов, для которых должен быть выпущен сертификат.

Если это первый раз, когда вы запускаете certbot, вам будет предложено ввести адрес электронной почты и согласиться с условиями использования сервиса. После этого certbot свяжется с сервером Let’s Encrypt, а затем проверит, что вы действительно контролируете домен, для которого вы запросили сертификат.

Если всё прошло успешно, certbot спросит, как вы хотите настроить конфигурацию HTTPS.

ВыводPlease choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Выберите подходящий вариант и нажмите ENTER. Конфигурация будет обновлена, а Apache перезапущен для применения изменений. certbot выдаст сообщение о том, что процесс прошёл успешно, и где хранятся ваши сертификаты:

ВыводIMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/example.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/example.com/privkey.pem
   Your cert will expire on 2018-07-23. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

Ваши сертификаты загружены, установлены и работают. Попробуйте перезагрузить ваш сайт с использованием https:// и вы увидите значок безопасности в браузере. Он означает, что соединение с сайтом зашифровано, обычно он выглядит, как зелёная иконка замка. Если вы проверите ваш сервер тестом SSL Labs Server Test, он получит оценку A.

Закончим тестированием процесса обновления сертификата.

Шаг 5 - Проверка автоматического обновления сертификата

Сертификаты Let’s Encrypt действительны только 90 дней. Это сделано для того, чтобы пользователи автоматизировали процесс обновления сертификатов. Пакет certbot, который мы установили, делает это путём добавления скрипта обновления в /etc/cron.d. Этот скрипт запускается раз в день и автоматически обновляет любые сертификаты, которые закончатся в течение ближайших 30 дней.

Для тестирования процесса обновления мы можем сделать “сухой” запуск (dry run) certbot:

sudo certbot renew --dry-run

Если вы не видите каких-либо ошибок в результате выполнения этой команды, то всё в полном порядке. При необходимости Certbot будет обновлять ваши сертификаты и перезагружать Apache для применения изменений. Если автоматическое обновление по какой-либо причине закончится ошибкой, Let’s Encrypt отправит электронное письмо на указанный вами адрес электронной почты с информацией о сертификате, который скоро закончится.

Заключение

В этом руководстве мы рассмотрели процесс установки клиента Let’s Encrypt certbot, загрузили SSL сертификаты для вашего домена, настроили Apache для использования этих сертификатов и настроили процесс автоматического обновления сертификатов. Если у вас есть вопросы по работе с Certbot, рекомендуем ознакомиться с документацией Certbot.

Переведено: IceSlam

Оригинал: DigitalOcean

Этот скрипт позволит вам настроить свой собственный VPN-сервер не более чем за минуту, даже если вы раньше не использовали OpenVPN. Он был разработан, чтобы быть как можно более ненавязчивым и универсальным.

Установка

Запустите скрипт и следуйте за помощником:

wget https://git.io/vpn -O openvpn-install.sh && bash openvpn-install.sh

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

Я хочу запустить свой собственный VPN, но у меня нет сервера для этого:

Недорогие VPS-серверы можно приобрести у компании FirstByte (не реклама), серверы от 55 рублей в месяц

Переведено: IceSlam

Оригинал: Nyr

Этот туториал очень просто демонстрирует, как можно было бы использовать Yoast Seo Plugin для WordPress, чтобы получить SEO-заголовок и Meta-данные во фронтенд VueJS/NuxtJS через WordPress REST API.

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

Я создал простейший пример, чтобы продемонстрировать, как это работает, но вам понадобится гораздо больше, чтобы все это работало гладко в production-версии вашего проекта, про это я кратко коснусь в конце.

Мы пройдем через следующие шаги:

• Установим VueJS (NuxtJS) фронтенда для отображения отдельных постов
• Настроим WordPress API, чтобы получать данные поста через эндпоинт RESTful API
• Добавим Yoast SEO плагин в этот эндпоинт
• Подключим фронтенд VueJS к API чтобы получить данные поста и SEO мета-дату

В этом туториале предполагается следующее:

• Промежуточное знание разработки WordPress (PHP)
• Понимание разработки Javascript и некоторые моменты из того, что с этим связано: NPM и т. д
• Небольшое знакомство с SEO-плагином Yoast для WordPress
• Интерес к использованию VueJS

Установим VueJS (NuxtJS) фронтенда для отображения отдельных постов

Выберите каталог на вашем компьютере и создайте новый nuxt проект вот так:

npx create-nuxt-app <project-name>

Следуйте инструкциям и настройте его, как вы хотите — я пошел с NPM без Yarn, без проверки на ошибки, без тестов.

Выполните следующие действия, чтобы увидеть свой сайт на: http://localhost:3000

npm run dev

И вуаля - вы увидите, как работает ваш замечательный новый проект!

После этого вам нужно будет перейти в каталог “pages” и создать новую папку под названием “post”. Внутри этой папки создайте два файла: index.vue и _id.vue.

Индексный файл будет использоваться для отображения страницы списка постов, которые мы не будем рассматривать в этом учебнике, и _id.vue будет использоваться для отображения отдельных постов.

В ' _id.vue ' теперь добавьте следующий код:

<template>
  <section class="container">
    <div>
      <logo/>
      <h1 class="title">
        Static Post Title
      </h1>
      <span class="content">
        Static Post Content
      </span>
    </div>
  </section>
</template>
<script>
  export default {}
</script>
<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
</style>

Затем посетите эту страницу: http://localhost:3000/post/1

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

Далее мы настроим WordPress API, который подгружает данные поста

Я устанавливаю WP локально через Docker, но это полностью ваш выбор, как вы хотите выполнить установку. После того, как вы настроили сайт, мы работаем с WordPress Rest API для обслуживания данных поста — с некоторыми дополнительными метаданными SEO с помощью SEO-плагина Yoast.

WordPress по умолчанию предоставляет конечную точку API для постов.

Вы можете посетить адрес: http://localhost/wp-json/wp/v2/posts/POST_ID

Мой адрес выглядит так: http://devapi.seotest.com:20080/wp-json/wp/v2/posts/1

Это приведет к ответу, который выглядит примерно следующим образом:

{  
   "id":1,
   "date":"2019-01-03T09:54:21",
   "date_gmt":"2019-01-03T09:54:21",
   "guid":{  
      "rendered":"http://devapi.seotest.com:20080/?p=1"
   },
   "modified":"2019-01-03T09:54:21",
   "modified_gmt":"2019-01-03T09:54:21",
   "slug":"test-post-seo",
   "status":"publish",
   "type":"post",
   "link":"http://devapi.seotest.com:20080/test-post-seo/",
   "title":{  
      "rendered":"My test Post for SEO"
   },
   "content":{  
      "rendered":"<p>My test post main body content &#8211; ain&#8217;t that nice!</p>\n",
      "protected":false
   }........

Вот так! У вас есть настройка конечной точки API, которая возвращает данные поста, и вам даже не нужно было писать какой-либо код!

Добавим SEO-данные для этих постов

Следующая часть также довольно прямолинейна. Нужно добавить seo-метаданные Yoast к этому ответу.

Перво - наперво - посетите страницу плагинов и установите плагин Yoast SEO

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

Добавьте следующий код в свои functions.php:

add_action( 'rest_api_init', 'slug_register_yoast_seo_meta' );

function slug_register_yoast_seo_meta() {
    register_rest_field( 'post',
        '_yoast_wpseo_title',
        array(
            'get_callback'    => 'get_seo_meta_field',
            'update_callback' => null,
            'schema'          => null,
        )
    );
    register_rest_field( 'post',
        '_yoast_wpseo_metadesc',
        array(
            'get_callback'    => 'get_seo_meta_field',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}

function get_seo_meta_field( $object, $field_name, $request ) {
    return get_post_meta( $object[ 'id' ], $field_name, true );
}

Это приводит к следующему:

Хуки в функции 'rest_api_init' регистрируют два пользовательских поля. Используем 'rest_api_init' вместо ' init’, чтобы этот код выполнялся только на запросах API, а не на обычных постах...

Указываем функцию обратного вызова для извлечения двух полей как ' get_seo_meta_field’, которая просто принимает идентификатор объекта (в данном случае post) и имя поля (либо ‘_yoast_wpseo_title’, либо ‘_yoast_wpseo_metadesc’) и возвращает значение этого мета-поля поста.

Замечательно! Теперь у нас есть конечная точка API для постов, которая возвращает метаданные Yoast SEO!

Полное описание того, как добавить дополнительные мета-поля в конечные точки, вы можете найти здесь: https://v2.wp-api.org/extending/modifying

Подключите приложение VueJS для извлечения данных поста

Это последний шаг — нам нужно сказать фронтенду Vue, чтобы он извлекал данные поста для каждого поста из API WordPress. Мы делаем это следующим образом:

Мы собираемся использовать Axios для этого, поэтому в вашем _id.vue добавьте следующее в теги <script>.

<script>
import axios from 'axios'export default {
  
  asyncData ({ params }) {
    return axios.get(`http://devapi.seotest.com:20080/test-post-seo/wp-json/wp/v2/posts/${params.id}`)
      .then(response => {
        return { post: response.data }
      })
      .catch((error) => {
        return { error: error }
      })
  },
  data () {
    return {
      post: {},
      error: []
    }
  }
}
</script>

Что здесь будет происходить?

• Мы импортируем Axios в файл
• Мы используем метод Nuxt ‘asyncData ' для выполнения нашего запроса Axios
• Мы используем параметр динамического идентификатора, чтобы получать разные сообщения, посещая разные URL-адреса
• Мы добавляем возвращаемые POST-данные в объект ‘пост’, что мы создали

Теперь мы можем отображать динамический заголовок и динамическое содержимое для нашего поста примерно так:

<template>
  <section class="container">
    <div>
      <h1 class="title">
        {{post.title.rendered}}
      </h1>
      <span v-html="post.content.rendered"></span>
    </div>
  </section>
</template>

Пожалуйста, обратите внимание на:

v-html=”post.content.rendered”

Это форматирует HTML разметку возвращенную красиво и мы должны увидеть что-то вроде следующего:

Конечно, сам контент будет зависеть от того, что вы помещаете в посте, созданное на стороне WordPress, а идентификатор в строке URL будет зависеть от идентификатора этого поста.

Далее мы хотим включить SEO данные следующим образом:

<script>
import axios from 'axios'export default {
  head () {
    return {
      title: this.post._yoast_wpseo_title,
      meta: [
        { hid: 'description', id: 'description', name: 'description', content: this.post._yoast_wpseo_metadesc }
      ]
    }
  },
  asyncData ({ params }) {

Полный код для файла ниже:

<template>
  <section class="container">
    <div>
      <h1 class="title">
        {{post.title.rendered}}
      </h1>
      <span v-html="post.content.rendered"></span>
    </div>
  </section>
</template>
<script>
import axios from 'axios'export default {
  head () {
    return {
      title: this.post._yoast_wpseo_title,
      meta: [
        { hid: 'description', id: 'description', name: 'description', content: this.post._yoast_wpseo_metadesc }
      ]
    }
  },
  asyncData ({ params }) {
    return axios.get(`http://devapi.go2africa.com:20080/wp-json/wp/v2/posts/${params.id}`)
      .then(response => {
        return { post: response.data }
      })
      .catch((error) => {
        return { error: error }
      })
  },
  data () {
    return {
      post: {},
      error: []
    }
  }
}
</script>
<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}
.links {
  padding-top: 15px;
}
</style>

Это было сделано самым простым из возможных способов - просто чтобы проиллюстрировать, как связать все это вместе. Я упоминаю ниже, как мы на самом деле сделали совсем немного больше, чтобы заставить это работать в production.

Заключение

Ну вот, теперь у тебя есть Vue.JS фронтенд с SEO, предоставляемым SEO-плагином Yoast из бэкенда WordPress!

Вот скриншот нашего примера:

Переведено: IceSlam

Оригинал: NONA-WEB

Независимо от того, какой из вариантов VPN сервера вы предпочтете, доступ клиентов в Интернет будет реализован штатными средствами операционной системы. Для того, чтобы из внутренней сети открыть доступ в Интернет через внешний интерфейс сервера необходимо разрешить пересылку пакетов между интерфейсами (форвардинг пакетов), и настроить трансляцию адресов.

Для включения форвардинга пакетов откроем файл “/etc/sysctl.conf” и изменим значение параметра “net.ipv4.ip_forward” на 1.

Чтобы изменения применились без перезагрузки сервера, выполним команду

sudo sysctl -p /etc/sysctl.conf

Трансляция адресов настраивается средствами iptables. Предварительно уточним имя внешнего сетевого интерфейса, выполнив команду “ip link show”, оно понадобится на следующем шаге. В нашем случае имя интерфейса “ens3”.

Включаем трансляцию адресов на внешнем интерфейсе для всех узлов локальной сети.

sudo iptables -t nat -A POSTROUTING -o ens3 -j MASQUERADE

Обратите внимание, что в команде необходимо указать реальное имя сетевого интерфейса. На вашем сервере оно может отличаться.

По умолчанию все созданные правила iptables сбрасываются после перезагрузки сервера, для того, чтобы этого избежать, воспользуемся утилитой “iptables-persistent” Устанавливаем пакет.

sudo apt install iptables-persistent

В процессе установки откроется окно конфигурации, в котором система предложит сохранить текущие правила iptables. Так как правила уже настроены, соглашаемся и дважды нажимаем “Yes”. Теперь, после перезагрузки сервера правила будут восстанавливаться автоматически.

1. PPTP сервер

Настройка сервера

Устанавливаем пакет

sudo apt install pptpd

После завершения установки открываем в любом текстовом редакторе файл “/etc/pptpd.conf” и приводим его к следующему виду.

option /etc/ppp/pptpd-options #путь к файлу с настройками

logwtmp #механизм логирования клиентских подключений

connections 100 #количество одновременных подключений

localip 172.16.0.1 #адрес, который будет шлюзом для клиентов

remoteip 172.16.0.2-200 #диапазон адресов для клиентов

Далее редактируем файл “/etc/ppp/pptpd-options”, большинство параметров уже установлены по умолчанию.

#имя сервиса, потребуется при создании учетных записей для клиентов

name pptpd

#запрещаем устаревшие методы аутентификации

refuse-pap

refuse-chap

refuse-mschap

#разрешаем более надежный метод аутентификации

require-mschap-v2

#включаем шифрование

require-mppe-128

#указываем dns сервера для клиентов, можно указать любые доступные

ms-dns 8.8.8.8

ms-dns 8.8.4.4

proxyarp

nodefaultroute

lock

nobsdcomp

novj

novjccomp

nologfd

На следующем этапе необходимо создать учетную запись для подключения клиентов. Предположим, мы хотим добавить пользователя “vpnuser”, с паролем “1” и разрешить для него динамическую адресацию. Открываем файл “/etc/ppp/chap-secrets” и добавляем в конец строку с параметрами пользователя.

vpnuser pptpd 1 *

Значение “pptpd” это имя сервиса, которое мы указали в файле “pptpd-options”. Вместо символа “*” для каждого клиента можно указать фиксированный ip-адрес. В результате содержимое файла “chap-secrets” будет таким.

Для применения настроек перезагружаем службу pptpd и добавляем её в автозагрузку.

sudo systemctl restart pptpd

sudo systemctl enable pptpd

Настройка сервера завершена.

Настройка клиента

Открываем “Пуск” - “Параметры” - “Сеть и интернет” - “VPN” и нажимаем “Добавить VPN-подключение”

В открывшемся окне вводим параметры подключения и нажимаем “Сохранить”

• Поставщик услуг VPN: “Windows (встроенные)”
• Имя подключения: “vpn_connect” (можно ввести любое)
• Имя или адрес сервера: (указываем внешний ip адрес сервера)
• Тип VPN: “Автоматически”
• Тип данных для входа: “Имя пользователя и пароль”
• Имя пользователя: vpnuser (имя, которое указано в файле “chap-secrets” на сервере)
• Пароль: 1 (так же из файла “chap-secrets”)

После сохранения параметров, в окне VPN появится новое подключение. Щелкаем по нему левой кнопкой мыши и нажимаем “Подключиться”. При успешном соединении с сервером, на значке подключения появится надпись “Подключено”.

В свойствах подключения отображаются внутренние адреса клиента и сервера. В поле “Адрес назначения” указан внешний адрес сервера.

При установленном соединении внутренний ip-адрес сервера, в нашем случае 172.16.0.1, становится шлюзом по умолчанию для всех исходящих пакетов.

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

Материал с сайта profitserver.ru

• HTTP сервер
• интерпретатор языка программирования
• система управления базами данных (СУБД)

Также для работы с сайтом необходима система управления контентом (CMS), веб интерфейс для управления базами данных и возможность доступа по FTP.

Рассмотрим процесс установки и настройки распространенной связки Apache-PHP-MySQL(MariaDB) в операционной системе Linux. Дополнительно будут установлены ftp-сервер vsftpd, веб-интерфейс для управления базой данных phpMyAdmin и система управления контентом Wordpress.

Для начала работы, следует заказать VPS или выделенный сервер. В данной статье примеры выполнены на виртуальном сервере со статическим публичным IP-адресом под управлением Ubuntu Server 18.04. Команды выполняются от имени суперпользователя.

Настройка HTTP-сервера Apache

1. Установка

apt install apache2

После завершения установки откроем браузер на любом устройстве с доступом в Интернет и перейдем по ссылке “http://[ip_адрес_сервера]”

Если вы увидите страницу приветствия как на скриншоте, значит HTTP сервер работает.

2. Создание тестовой страницы

По умолчанию корневым каталогом для размещения сайта является директория “/var/www/html”, именно там находится страница приветствия. Создадим отдельную директорию “/var/www/sites” для размещения виртуальных хостов и вложенную папку “/var/www/sites/site1” с индексной страницей тестового сайта.

cd /var/www/

mkdir -p sites/site1

echo "<H1>Welcome</H1>" > sites/site1/index.html

В результате файл “/var/www/sites/site1/index.html” будет содержать одну html-строку:

<H1>Welcome</H1>

3. Конфигурация Apache-сервера

Конфигурационные файлы сайтов находятся в каталоге “/etc/apache2/sites-available/”. Создадим конфигурационный файл для нового виртуального хоста взяв за основу конфигурацию по умолчанию из файла “000-default.conf”

cd /etc/apache2/sites-available/

cp 000-default.conf site1.conf

Откроем файл “site1.conf” и изменим параметр “DocumentRoot”. В качестве значения нужно указать путь к новому сайту, в нашем случае это “/var/www/sites/site1”

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

a2dissite 000-default

a2ensite site1

systemctl reload apache2

Снова переходим по ссылке “http://[ip_адрес_сервера]” и убеждаемся, что вместо стандартной страницы приветствия отображается наша новая страница.

Настройка HTTP-сервера завершена, переходим к следующему этапу.

Настройка FTP-сервера

1. Установка

Устанавливаем ftp-сервер и дополнительный пакет “db-util”, который потребуется для настройки виртуальных пользователей.

apt install vsftpd db-util

2. Создание локальной учетной записи

Сервер vsftpd позволяет очень гибко настраивать права доступа. Для решения наших задач ftp-пользователям необходимо обеспечить следующие возможности:

• полный доступ к содержимому директории “/var/www/sites/”;
• невозможность выхода за пределы директории “/var/www/”;
• подключение с использованием виртуальной учетной записи;

Создадим локальную учетную запись “virtual” без возможности входа в систему, с домашней директорией “/var/www/”. Эта учетная запись будет использоваться для подключения виртуальных ftp-пользователей.

useradd -d /var/www virtual

По умолчанию, владельцем директории “/var/www” является “root”. Для того, того, чтобы ftp-пользователи могли изменять содержимое сайтов, изменим владельца каталога “/var/www/sites/”, включая вложенные папки на “virtual”.

chown -R virtual:root /var/www/sites

В результате изменения прав, пользователь “virtual” сможет просматривать содержимое каталога “/var/www/” и записывать во вложенный каталог “/var/www/sites/”

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

Основная конфигурация хранится в файле “/etc/vsftpd.conf”, приводим его к следующему виду:

#Включаем виртуальных пользователей

anonymous_enable=NO

local_enable=YES

guest_enable=YES

guest_username=virtual

#Настраиваем права

write_enable=YES

anon_upload_enable=YES

anon_mkdir_write_enable=YES

anon_other_write_enable=YES

anon_world_readable_only=NO

anon_umask=0022

chroot_local_user=YES

#задаем параметры запуска

listen=YES

pasv_min_port=30000

pasv_max_port=30999

4. Создание базы данных

База данных необходима для хранения виртуальных учетных записей.

Предварительно создадим в домашнем каталоге простой текстовый файл “users.txt” и запишем логины и пароли виртуальных пользователей в чередующиеся строки. Например нам нужен виртуальный пользователь с логином “ftp” и паролем “Qwe123”, тогда содержимое файла будет таким:

ftp

Qwe123

Создаем базу данных

db_load -T -t hash -f ~/users.txt /etc/vsftpd_login.db

Меняем стандартное содержимое PAM файла “/etc/pam.d/vsftpd” на следующие строки.

auth required /lib/x86_64-linux-gnu/security/pam_userdb.so db=/etc/vsftpd_login

account required /lib/x86_64-linux-gnu/security/pam_userdb.so db=/etc/vsftpd_login

Обратите внимание, что в различных дистрибутивах расположение библиотеки “pam_userdb.so” может отличаться, при необходимости путь к файлу нужно скорректировать.

Для применения изменений перезагружаем vsftpd сервер.

systemctl restart vsftpd

Настройка FTP-сервера завершена.

Данные для подключения:

• ftp://[ip_адрес_сервера]
• Логин: ftp
• Пароль: Qwe123

Настройка PHP-сервера

1. Установка

На текущий момент последней стабильной версией PHP является php 7.4.5, которая отсутствует в официальных репозиториях Ubuntu. Подключим сторонний репозиторий и установим последнюю версию PHP.

apt update

apt install software-properties-common

add-apt-repository ppa:ondrej/php

apt update

apt install php7.4

2. Проверка

Для того, чтобы PHP код мог быть исполнен, файл веб страницы должен иметь расширение “.php”. Переименовываем тестовою страницу

cd /var/www/sites/site1/

mv index.html index.php

Добавляем в файл “/var/www/sites/site1/index.php” строку php-кода. В результате содержимое файла будет таким:

<H1>Welcome</H1>

<?php

phpinfo();

?>

Сохраняем изменения и проверяем результат в браузере.

Если вы видите результат работы функции “phpinfo()”, значит интерпретатор PHP работает корректно. Приступаем к следующему этапу.

Настройка MySQL (MariaDB)

1. Установка

Устанавливаем MariaDB и PHP-модуль для работы с MySQL, после завершения установки перезагружаем Apache

apt install mariadb-server php-mysql

systemctl restart apache2

Для проверки обновим тестовую страницу и в таблице с конфигурацией PHP и перейдем к разделу PDO. Наличие секции “PDO_mysql” говорит о корректной установке драйвера для работой с базой данных Mysql.

Для дальнейшей работы необходимо выполнить первоначальную настройку безопасности MariaDB, во время которой для пользователя “root” устанавливается пароль, запрещается удаленный вход и удаляются гостевые учетные записи.

mysql_secure_installation

На первом шаге необходимо ввести пароль пользователя "root" для входа в СУБД или нажать Enter, если пароль не задан. Так как после установки учетная запись "root" не имеет пароля, нажимаем “Enter”.

Обратите внимание, что в MariaDB существуют собственные учетные записи, которые не имеют отношения к учетным записям операционной системы. Речь идет о пользователе "root" в MariaDB.

Далее конфигуратор предложит задать пароль для пользователя root, нажимаем “y” для подтверждения и вводим новый пароль, в нашем случае “Qwe123”

На все последующие запросы просто нажимаем “y” до окончания настройки.

Настройка завершена.

Данные для входа в MariaDB:

• Логин: root
• Пароль: Qwe123

Настройка phpMyAdmin

1. Установка

Устанавливаем обязательное PHP-расширение mbstring.

apt install php-mbstring

В официальном репозитории размещена устаревшая версия phpMyAdmin, поэтому выполним установку в ручном режиме.

Заходим на официальный сайт проекта “https://www.phpmyadmin.net/” и скачиваем архив актуальной версии.

Копируем архив на сервер в каталог “/var/www/sites/” используя любой ftp-клиент.

Распаковываем архив, и для удобства, переименовываем извлеченную папку в “phpMyAdmin”. Для распаковки zip-архива предварительно установим утилиту “unzip”. После распаковки архив можно удалить.

apt install unzip

cd /var/www/sites/

unzip phpMyAdmin-5.0.2-all-languages.zip

mv phpMyAdmin-5.0.2-all-languages phpMyAdmin

rm phpMyAdmin-5.0.2-all-languages.zip

Создаем папку “/var/www/sites/phpMyAdmin/tmp” для хранения временных файлов с полными доступом для всех. Если этого не сделать phpMyAdmin сообщит об отсутствии доступа в временной папке.

cd /var/www/sites/phpMyAdmin/

mkdir tmp

chmod 777 tmp

2. Создание псевдонима

Так как phpMyAdmin не является отдельным виртуальным хостом и находится за пределами корневой директории сайта, настроим псевдоним для возможности доступа.

Открываем файл “/etc/apache2/mods-available/alias.conf” и вставляем строку

Alias /pma “/var/www/sites/phpMyAdmin"

внутри секции

<IfModule alias_module>

</IfModule>

Перезагружаем конфигурацию Apache для применения изменений.

systemctl reload apache2

Псевдоним настроен. Сейчас мы можем входить в phpMyAdmin по ссылке “http://[ip_адрес_сервера]/pma”

3. Подготовка базы данных

Так как при первоначальной настройке MariaDB мы запретили использование учетной записи root для удаленного подключения, необходимо создать новую учетную запись с полными правами, которая будет использоваться для входа в phpMyAdmin.

Кроме того, для работы дополнительных функций phpMyAdmin необходима служебная база данных и учетная запись для доступа к ней.

Создадим учетные записи

mariadb -u root -p

GRANT ALL PRIVILEGES ON *.* TO 'pma'@'localhost' IDENTIFIED BY 'Qwe123' WITH GRANT OPTION;

GRANT SELECT, INSERT, UPDATE, DELETE ON `phpmyadmin`.* TO 'pmaservice'@'localhost' IDENTIFIED BY 'Qwe123' WITH grant option;

quit

Обратите внимание, что имя базы данных во втором запросе заключено в обратные апострофы: “… ON `phpmyadmin`.* TO 'pma'@'localhost' IDENTIFIED BY …”,

В результате в MariaDB будет создано две учетные записи:

1. Логин: pma, пароль: Qwe123
2. Учетная запись имеет полные права и будет использоваться для входа в phpMyAdmin
3. Логин: pmaservice, пароль:Qwe123
4. Служебная учетная запись необходимая для работы дополнительных функций.

На следующем шаге эти учетные данные должны быть указаны в конфигурационном файле “config.inc.php”

Далее необходимо импортировать базу данных из файла “phpMyAdmin/sql/create_tables.sql”. Выполним импорт средствами phpMyAdmin.

Открываем браузер и переходим по ссылке “http://[ip_адрес _сервера]/pma”

Вводим логин “pma”, пароль “Qwe123”

Переходим на вкладку “Импорт”, нажимаем кнопку “Выберите файл” и выбираем файл ”sql/create_tables.sql” в корневой директории phpMyAdmin. Предполагается что на локальном компьютере существует папка с файлами “phpMyAdmin”, если необходимо, распакуйте архив.

Для завершения импорта нажимаем кнопку “Вперед”.

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

Копируем файл конфигурации из шаблона

cd /var/www/sites/phpMyAdmin/

cp config.sample.inc.php config.inc.php

Открываем конфигурационный файл “/var/www/sites/phpMyAdmin/config.inc.php” и вносим следующие изменения:

1. Задаем произвольное значение длиной 32 символа для параметра “$cfg['blowfish_secret']”. Можно воспользоваться любым генератором паролей.

1. Снимаем комментарии со всех строк раздела “phpMyAdmin configuration storage settings” и указываем для параметров “controluser” и “controlpass” логин и пароль служебной учетной записи MariaDB, созданной на предыдущем шаге. В нашем случае логин - pmaservice, пароль - Qwe123

Сохраняем изменения. Настройка завершена.

Данные для входа в phpMyadmin:

• http://[ip_адрес_сервера]/pma/
• Логин: pma
• Пароль: Qwe123

Материал взят с сайта profitserver.ru

Демо: CodeSandbox

Установка

npm i -S vue-easy-slider

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

Установка плагина

import Vue from 'vue'
import EasySlider from 'vue-easy-slider'

Vue.use(EasySlider)

или использование в инстансе Vue

<slider animation="fade">
  <slider-item
    v-for="(i, index) in list"
    :key="index"
    :style="i"
    @click="hello"
  >
    <p style="line-height: 280px; font-size: 5rem; text-align: center;">Страница{{ index + 1 }}</p>
  </slider-item>
</slider>

import { Slider, SliderItem } from 'vue-easy-slider'

new Vue({
  el: 'body',
  components: {
    Slider,
    SliderItem,
  },
  data() {
    return {
      list: [
        { backgroundColor: '#3f51b5', width: '100%', height: '100%' },
        { backgroundColor: '#eee', width: '100%', height: '100%' },
        { backgroundColor: '#f44336', width: '100%', height: '100%' },
      ],
    }
  },
  methods: {
    hello($event) {
      console.log(`hello index: ${$event}`)
    },
  },
})

Управление слайдером через v-model

<slider animation="fade" v-model="sliderIndex">
  ...
</slider>
<button @click="moveToIndex(2)">пролистать на страницу 3</button>

...
  data() {
    return {
      // initial index
      sliderIndex: 1,
      list: [
        { backgroundColor: '#3f51b5', width: '100%', height: '100%' },
        { backgroundColor: '#eee', width: '100%', height: '100%' },
        { backgroundColor: '#f44336', width: '100%', height: '100%' },
      ],
    }
  },
  methods: {
    moveToIndex(index) {
      this.sliderIndex = index
    },
  },
...

Пропсы

Слайдер

События

Слайдер

Слоты

Элемент слайда

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

<slider>
  <slider-item>
    <img src="">
    <p></p>
    <button></button>
  </slider-item>
  <div slot="loading">custom loading ...</div>
</slider>

_____________________________________

Оригинал на GitHub (автор компонента - shhdgit)

Демо: GitHub

Поддержка

• Поддержка SSR
• Установка родительского маршрута без необходимости фактически вложить его в дочерний массив
• Кастомизированный шаблон
• Динамические "хлебные крошки"
• Динамический родитель
• Динамический заголовок
• Сокращенный заголовок (breadcrumb: 'Заголовок страницы')
• Суб-роутинг

Установка

npm install vue-2-breadcrumbs

Примечание: Этот компонент совестим с NodeJS v10+

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

import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';
import App from './App.vue';

Vue.use(VueBreadcrumbs);

Примечание: После этого компонент <Breadcrumbs/> будет в вашем распоряжении

Мета во Vue Router

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Главная',
      component: { template: '<h2>Главная</h2>' },
      meta: {
        breadcrumb: 'Главная'
      }
    },
    {
      path: '/params',
      name: 'Параметры',
      component: { template: '<h2>Параметры</h2>' },
      meta: {
        breadcrumb: routeParams => `route params id: ${routeParams.id}`
      }
    },
    {
      path: '/context',
      name: 'Контекст',
      component: { template: '<h2>Контекст</h2>' },
      meta: {
        breadcrumb() {
            const { name } = this.$route;
            return `Имя "${name}" рута контекста`;
        }
      }
    },
    {
      path: '/parent',
      component: { template: '<router-view/>' },
      meta: {
        breadcrumb: {
          label: 'Родитель для параметров',
          parent: 'Параметры'
        }
      },
      {
        name: 'dynamic-parent',
        path: '/dynamic-parent',
        component: { template: '<h2>Динамический родитель</h2>' },
        meta: {
          breadcrumb() {
            const { name } = this.$route;

            return {
              label: name,
              parent: 'settings'
            };
          }
        }
    }
  ]
});

Опции

Объект options также может быть передан в плагин для указания вашего собственного шаблона и методов рендеринга при желании. Например:

import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';

Vue.use(VueBreadcrumbs, {
  template:
    '        <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
    '            <ol class="breadcrumb">\n' +
    '                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
    '                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
    '                </li>\n' +
    '            </ol>\n' +
    '        </nav>'
});

_________________________

Оригинал на Github (автор компонента - Scrum(Иван Демидов))