Деплой Jekyll и Middleman на VPS, часть первая

Фрей написал, 12.01.2016

Некоторое время назад (уже довольно давно, на самом деле) довелось мне оценить прелесть генераторов статических сайтов. Я перевел этот блог на Jekyll, в паре собственных проектов использовал Middleman, но заморачиваться с деплоем толком не приходилось: блог хостится на гитхабе и деплоится через git push, а проекты на Мидлмене я после билда просто забрасываю на хостинг по FTP. Но вот пришла в голову мысль, что деплой статических сайтов не может быть сложнее, чем деплой рельс, и я решил собрать инструкцию по тому, как деплоить статические сайты на Jekyll и Middleman. Это первая статья из трех, тут мы поставим и настроим nginx.

Статьи серии:

Во-первых, нам понадобится сервер. Я уже некоторое время для экспериментов использую Vscale, wannabe-digitalocean от известного хостера Selectel. Вот реферальная ссылка, по которой можно получить бонус в 400р на счет - самое оно поиграться, учитывая, что минимальный VPS (20gb памяти и 512mb оперативной) стоит всего 200р. Если потратите еще 400 сверху - я получу бонус 400р уже на свой счет и скажу вам спасибо.

Шаг первый: создаем необходимые директории

Так вот, сервер. Создаем сервер, где вам удобно, логинимся в него под своим пользователем и ставим nginx:

sudo apt-get update
sudo apt-get install nginx

Я предлагаю хранить проекты по стандартному пути - в директории /var/www. В ней мы создадим пару дочерних директорий для наших проектов. Я говорю “проектов”, поскольку предлагаю рассмотреть деплой хотя бы двух статических сайтов и соответствующую настройку nginx для этих целей. Такую схему можно повторять сколько угодно раз, пока у вас не закончится место на сервере, а поскольку статические сайты не требуют веб-сервера для своей работы, то и нагрузку оказывать будут минимальную даже при приличной посещаемости.

Итак, создаем директории под наши проекты:

sudo mkdir -p /var/www/first.com/html
sudo mkdir -p /var/www/second.com/html

Опция -p, переданная команде mkdir, создает все необходимые директории, даже если каких-то из них не существует.

Теперь установим прака на доступ к этим директориям для нашего пользователя. Используем переменную $USER, чтобы подставить текущего пользователя:

sudo chown -R $USER:$USER /var/www/first.com/html
sudo chown -R $USER:$USER /var/www/second.com/html

Для надежности выполним еще одну команду - чтобы быть уверенными, что наша корневая папка с проектами будет нам доступна:

sudo chmod -R 755 /var/www

Шаг второй: создаем файлы-заглушки

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

Создайте файл для первого проекта:

vi /var/www/first.com/html/index.html

и напишите туда, скажем, это:

this is our first project

Закройте файл (напоминаю, :wq в vim) и создайте файл для второго проекта:

vi /var/www/second.com/html/index.html

В нем будет такой текст:

  this is our second project

Закроем файл.

Шаг третий: настраиваем хосты в nginx

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

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/first.com

Откройте созданный файл командой vi /etc/nginx/sites-available/first.com и загляните внутрь. Внутри, если игнорировать комментарии, вы увидите вот такой конфиг:

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html;
    index index.html index.htm;

    server_name localhost;

    location / {
        try_files $uri $uri/ =404;
    }
}

Нам нужно изменить в нем пару строк таким образом, чтобы в тот момент, когда пользователь вводит в адресную строку браузера first.com и нажимает Enter, наш сервер отображал проект, расположенный в директории /var/www/first.com/html. Во-первых, отредактируем третью строку нашего конфига так, чтобы она содержала путь к проекту:

root /var/www/first.com/html

Так же отредактируем пятую строку, начинающуся с server_name:

server_name first.com www.first.com;

Теперь конфиг для нашего первого проекта должен выглядеть примерно так:

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /var/www/first.com/html;
    index index.html index.htm;

    server_name first.com www.first.com;

    location / {
        try_files $uri $uri/ =404;
    }
}

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

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

sudo cp /etc/nginx/sites-available/first.com /etc/nginx/sites-available/second.com

Откроем его: vi /etc/nginx/sites-available/second.com

И отредактируем, чтобы он выглядел примерно вот так:

server {
    listen 80;
    listen [::]:80;

    root /var/www/second.com/html;
    index index.html index.htm;

    server_name second.com www.second.com;

    location / {
        try_files $uri $uri/ =404;
    }
}

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

Ну вот, с настройкой конфигураций для наших проектов мы закончили.

Шаг четвертый: включаем виртуальные хосты

Осталось совсем немного. Чтобы nginx смог обслуживать наши проекты, нам нужно скопировать созданные конфиги в директорию /etc/nginx/sites-enabled. Однако, мы поступим умнее и просто создадим символические ссылки на наши файлы, чтобы нам не пришлось хранить два набора конфигов:

sudo ln -s /etc/nginx/sites-available/first.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/second.com /etc/nginx/sites-enabled/

Чудесно, теперь nginx при запуске сможет прочитать конфиги, как если бы они лежали в /etc/nginx/sites-enabled. Поскольку стандартный конфиг нам больше не понадобится, мы можем его удалить:

sudo rm /etc/nginx/sites-enabled/default

Осталось внести маленькую правку в конфиг nginx. Откройте его командой

vi /etc/nginx/nginx.conf

Найдите строку # server_names_hash_bucket_size 64; и удалить перед ней решетку комментария. Это необходимо для того, чтобы nginx мог корректно работать с длинными доменными именами. Сохраните файл и перезапустите nginx:

sudo service nginx restart

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

Если вы на Linux или OS X, то нужный вам файл располагается здесь: /etc/hosts, если же вы все еще на Windows, то откройте файл C:\Windows\System32\drivers\etc\hosts. Добавьте в его конец две строки:

111.111.111.111 example.com
111.111.111.111 test.com

Не забудьте заменить 111.111.111.111 на ip-адрес вашего сервера. Сохраните файл (это потребует прав администратора) и откройте в браузере http://first.com. Вы должны увидеть следующий текст:

this is our first project

Если вы увидели созданную вами в самом начале страницу, то поздравляю, у вас все получилось! Если нет, вернитесь назад и поищите, где же вы были невнимательным (со мной это постоянно случается). Таким же образом проверьте второй хост, перейдя в браузере по адресу http://second.com. Здесь вы должны увидеть текст:

this is our second project

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

Мы отредактировали локальный файл hosts, чтобы увидеть, правильно ли работает написанный нами конфиг. Не забудьте вернуть его к первозданному виду, когда закончите эксперименты. Чтобы иметь нормальный доступ к проектам и позволить посещать их другим пользователям, приобретите и настройте домен. Я давно покупаю домены на NameCheap, даже в долларах они стоят зачастую дешевле, чем у российских регистраторов. А прямо сейчас у них акция на домены в зоне .club - первый год за 88 центов. Позднее я, возможно, расскажу о том, как управляю своими доменами.

На этом первая серия завершена, в следующей я расскажу, как при помощи git задеплоить проект на Jekyll.