Привет, Хабр! Сегодня я хочу поделится с вами как я перестал быть "сапожником без сапог".

P.S. Я не буду рассказывать как поднять прокси сервер, запустить продакшен приложения и т. д. Этот пост про то как поднять простой сайт

Обо всём по порядку!

Домашний сервер

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

P.S. Потом выпущу отдельную статью с инструкцией как я настроил свой сервер: белый IP, открыл порты, накатил Linux и т. д.

Сам сайт

Я планировал сделать фронт, бек, всё как полагается, но руки чесались быстрее запустить свой продукт (мечты были ещё с детства, но никак не хватало времени на реализацию), я решил не заморачиваться и сделать сначала простую версию используя HTML и CSS, т. к. из-за малого кол-ва технологий не разгуляться, то было принято решение сделать небольшой сайт-резюме.

Нам понадобится:

1. Домашний или арендованный сервер с Ubuntu

2. Домен

3. Docker

4. Nginx

5. Certbot

6. Статический контент(HTML, CSS, JS, и т. д.)

Добавлю, что необходимы навыки работы с Linux: подключение по SSH, обновление репозиториев и пакетов, установка утилит, но я введу вас в курс дела ниже, о том что нам нужно, как установить и как пользоваться. Если что-то будет не понятно - пишите комментарии вам помогу я или другие комментаторы, а так же гуглите, если не нашли ответ.

Реализация

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

Обновление пакетов Linux

Сначала нам нужно зайти по SSH на сервер. Я использую Terminal в Windows 11, оболочка Git Bash.

ssh <логин>@<ip_адрес_сервера>
<логин>@<ip_адрес_сервера's password: *пароль_от_сервера*

Во время первого соединения система вас спросит, что хотите ли вы продолжить своё подключение по новому отпечатку ключа, то есть, говоря простыми словами - подключение к новому хосту, вам нужно подтвердить, чтобы продолжить (Рисунок 1).

Когда вы войдёте на сервер вы увидите, подобное приветственное окно (Рисунок 2).

Нам надо обновить пакеты Linux, вводим 2 команды.

sudo apt update
sudo apt upgrade

Вам нужно подтвердить, чтобы продолжить (Рисунок 3).

Установка Docker

Требования к Ubuntu

• Ubuntu Oracular 24.10

• Ubuntu Noble 24.04 (LTS)

• Ubuntu Jammy 22.04 (LTS)

Установка через apt репозиторий.

# Добавляем GPG ключ Docker'а:
sudo apt install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Добавляем репозиторий в источники Apt:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update

Устанавливаем последнюю версию Docker.

sudo apt install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Проверяем, что Docker установлен.

sudo docker run hello-world

С серверов закончили, теперь перейдём к самому проекту.

Структура проекта

your-project/
├── docker-compose.yml
├── nginx/
│   └── conf.d/
│       └── default.conf   # Nginx конфиг
├── static-files/          # Статический контент
│   ├── index.html
│   └── style.css
└── certbot/               # Certbot сертификаты
    ├── conf/
    └── www/

После того как вы написали разметку для вашего сайта, вы должны её поместить в директорию static-files.

Директория certbot имеет пустые директории conf и www. Let's Encrypt сам наполнит certbot как ему нужно для проверки и создания SSL, ничего самостоятельно помещать туда не нужно.

Конфигурируем Nginx

Перед тем как запустить Nginx на 443 порту с SSL сертификатом, нужно чтобы Let's Encrypt проверил сервер на 80 порте без сертификата и выпустил его новым для вашего домена.

Вставьте данный код в файл default.conf.

server {
    listen 80;
    server_name ваш_домен;

    location ~ /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
    location / {
        return 301 https://$host$request_uri;
    }
}

Конфигурируем docker-compose.yml

В коде ниже мы создаём связанные сервисы, состоящие из двух отдельных, они будут работать и запускаться вместе, а именно сервис Nginx и сервис Certbot.

services:
  nginx:
    image: nginx:latest
    ports:
      - 80:80    # HTTP (для валидации Certbot)
      - 443:443  # HTTPS
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d          # Nginx конфиг
      - ./static-files:/usr/share/nginx/html      # Добавляем статические файлы в nginx в Docker'е
      - ./certbot/www:/var/www/certbot            # Certbot HTTP challenge
      - ./certbot/conf:/etc/letsencrypt           # SSL certificates
    restart: unless-stopped

  certbot:
    image: certbot/certbot:latest
    volumes:
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
    command: certonly --webroot -w /var/www/certbot --force-renewal --email ваша_почта --agree-tos -d ваш_домен
    restart: unless-stopped

Обратите внимание на command(19 строка) в сервисе certbot, эта команда отвечает за запуск челленджей, вам нужно поменять переменные на свои.

Деплой на сервер

На данном этапе нам нужно перенести наш проект на сервер, это вы можете сделать через такие программы как FileZilla Client, WinSCP и др. или через терминал. Если вы не знаете как это сделать, ниже я объясню на примере FileZilla Client.

Для начала её нужно скачать с официального сайта и установить.

Чтобы осуществить подключение к серверу нужно ввести данные.

• Хост - sftp://ваш_ip_сервера

• Имя пользователя - root

• Пароль - ваш пароль от сервера

• Порт - ничего вводить не нужно, он по умолчанию уже есть

Нажмите кнопку быстрое соединение. Если вы успешно подключились - вы увидите слева директории с файлами на вашем ПК, а справа сервера, если нет, попробуйте повторить шаги заново. Совсем не получается? Пишите вопросы в комментарии.

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

Теперь когда вы успешно перенесли проект на сервер открывайте терминал на вашем ПК и подключайтесь по SSH к серверу и следуйте шагам далее.

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

cd название_директории

Отлично, переходим к работе с Docker и Docker Compose!

Для генерации SSL нужно просто запустить в Docker Compose наши сервисы командой ниже.

sudo docker compose up

Вы увидите запуск Nginx, затем запуск челленджей от Let's Encrypt через Certbot. В случае успешного прохождения челленджей у вас появится сертификат в директории расположенной в volumes, которую вы указали для Let's Encrypt.

Запуск Nginx на 443 порте с SSL сертификатом

Мы имеем на текущем этапе.

• Готовый Dcoker Compose

• Сгенерированный SSL

• Настроенный Nginx на получение сертификата и перенаправление на 443 порт

Нам не хватает обработки 443 порта в Nginx и чтобы ваш сайт работал. Давайте добавим в конфигурацию Nginx прослушивание и обработку 443 порта и выдачу статического контента, который уже лежит в volumes в Docker на сервере.

Откройте конфигурационный файл Nginx - default.conf на вашем ПК и внесите код ниже.

server {
    listen 443 ssl;
    server_name ваш_домен;
    ssl_certificate /etc/letsencrypt/live/ваш_домен/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/ваш_домен/privkey.pem;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ =404;
    }
}

У вас должен получится файл default.conf с таким кодом.

server {
    listen 80;
    server_name ваш_домен;

    location ~ /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name ваш_домен;
    ssl_certificate /etc/letsencrypt/live/ваш_домен/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/ваш_домен/privkey.pem;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ =404;
    }
}

Заливаем обновлённый конфигурационный файл на сервер в ту же директорию где хранится старая версия.

Заходим на сервер по SSH переходим в директорию проекта и пишем команду ниже.

sudo docker compose up -d

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

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

sudo docker compose stop certbot

В следующей статье расскажу, как можно сделать авто-обновление SSL.

Подсказки

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

• Проверка логов сервисов для выявления ошибок.

sudo docker compose logs nginx
sudo docker compose logs certbot

• Проверка доступности вашего сайте

curl -I http://localhost
curl -I http://yourip
curl -I http://yourdomain.com
curl -I https://yourdomain.com

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

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

Список переменных

• <логин>

• <ip_адрес_сервера>

• ваш_домен

• ваша_почта

• ваш_ip_сервера

Итог

Надеюсь, что эта статья рассказала вам о моём, по-своему, интересном опыте и за одно дала новые знания и понимание как работают сервисы, как начать пользоваться Nginx и бесплатно создавать SSL для ваших проектов. Вам остаётся только продолжать изучать дальше Docker и Nginx, добавляя эти инструменты в ваши работы.

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