Простая настройка VPS, NGINX и FastAPI: Пошаговое руководство. Часть 106.06.2024 13:30

Привет, Хабр! Недавно я писал статью о запуске Telegram-бота на aiogram 3.x с использованием веб-хуков и FastAPI. Однако, в той статье я упустил такие важные моменты, как создание FastAPI приложения, настройка NGINX, настройка VPS сервера и другие детали, которые могут затруднить работу с веб-хуками для новичков.

В этом руководстве я постараюсь восполнить пробелы и подробно рассказать обо всех аспектах настройки. Это будет полезно как тем, кто планирует создавать Telegram-ботов на веб-хуках с использованием FastAPI, так и тем, кто просто хочет научиться настраивать VPS сервер, NGINX и базовое FastAPI приложение.

В этой и следующих публикациях я постараюсь максимально доступно объяснить все шаги. Сегодня мы рассмотрим следующие темы:

  • Покупка VPS сервера

  • Покупка доменного имени с привязкой к серверу

  • Создание простого FastApi приложения, которое будет запускать index.html файл с простыми стилями на главной странице сайта.

Покупка VPS сервера

Для наших целей подойдет любой VPS сервер с установленным Linux (в данном примере мы будем использовать Ubuntu). Предположим, что вы приобрели VPS сервер с доступом к нему через SSH. Данные подключения могут выглядеть примерно так (естественно, данные вымышленные):

IPv4-адрес сервера: 000.0.000.000
Пользователь: root
Пароль: ZZujF38P$LcpWWZh

Далее:

  1. Запускаем командную строку

  2. Вводим команду: ssh root@000.0.000.000

  3. Подтверждаем сохранение SSH ключа командой yes

  4. Вводим пароль (при вставке пароль не отображается, что является нормальной защитной мерой, затем нажимаем ENTER)

После успешного входа, вас поприветствует Ubuntu, что будет свидетельствовать о том, что сервер работает и доступ к нему есть.

Покупка доменного имени с привязкой к айпи

Иногда вместе с сервером предоставляется технический домен (например, vm24322447.235ssd.had.wf). Если этого домена достаточно для ваших задач, шаг с покупкой и привязкой доменного имени можно пропустить. В противном случае:

  1. Проверяем, свободен ли домен.

  2. Покупаем домен (только домен, без хостинга).

  3. Настраиваем A-запись, которая связывает домен с IP адресом сервера (пример настройки A-записи приведен ниже на скрине).

4. В течение суток доменное имя привяжется к вашему сайту.

Для проверки, к какому IP-адресу привязан домен, можно использовать команду nslookup. Она доступна на большинстве операционных систем, включая Windows, macOS и Linux. Вот как это сделать:

  1. Откройте командную строку (терминал).

  2. Введите команду nslookup и имя домена, например: 

    nslookup example.com

    Замените example.com на ваше доменное имя.

  3. Нажмите ENTER.

Команда nslookup выполнит запрос к DNS-серверу и выведет информацию о IP-адресе, к которому привязан домен.

Установка FastAPI приложения

Теперь, когда у нас есть VPS сервер и привязанный к нему домен, можем приступить к созданию FastAPI приложения. Для удобства на сервере воспользуемся утилитой screen.

Использование утилиты screen

screen позволяет создавать виртуальные окна, которые можно свернуть. Создаем такое окно, запускаем виртуальное окружение, запускаем скрипт, свертываем окно и продолжаем работать.

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

Создание структуры проекта FastApi

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

── app.py
├── templates
│   └── index.html
└── static
    └── style.css

• Папка templates с файлом index.html (наш простой HTML файл)

• Папка static с файлом style.css (наши простые стили)

• Файл app.py (файл с кодом FastAPI приложения)

Пример index.html файла: 




    
    
    Главная страница fast api
    


    

        
    

    

        

            
Добро пожаловать на главную страницу мега-сайта!

            
Какой-то абзац

            

                
Заголовое 2:

                
    
                    
  • Пункт 1
    • 
                    
  • Пункт 2
    • 
                    
  • Пункт 3
    • 
                    
  • Пункт 4
    • 
                

            

            

                Зарегистрироваться
            

        

    

    

        
© 2024 Алексей Яковенко. Все права защищены.

Как вы видите код максимально простой и нас разве что может заинтересовать строка с импортом файла стилей:

Стили могут выглядеть так: 

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #4CAF50;
    padding: 1em 0;
    color: white;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.container {
    flex: 1;
    text-align: center;
    background-color: #fff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
}

h1 {
    color: #333;
}

.features, .cta {
    text-align: left;
    margin-top: 20px;
}

.features h2, .cta h2 {
    color: #4CAF50;
}

.features ul {
    list-style: none;
    padding: 0;
}

.features ul li {
    background: url('data:image/svg+xml;utf8,') no-repeat left center;
    padding-left: 25px;
    margin-bottom: 10px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background-color: #4CAF50;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #45a049;
}

footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 1em 0;
    margin-top: auto;
}

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

pip install jinja2 fastapi uvicorn

  • jinja2 — позволяет использовать язык шаблонов Jinja2 для динамической генерации HTML-страниц.

  • fastapi — основной фреймворк для создания нашего веб-приложения.

  • uvicorn — ASGI сервер для запуска FastAPI приложения.

Импортируем необходимые модули: 

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from fastapi.requests import Request
import uvicorn

Настраиваем приложение FastAPI:

С помощью этих строк кода вы:

  1. Создаёте приложение FastAPI.

  2. Настраиваете обработку статических файлов.

  3. Настраиваете использование HTML-шаблонов для динамического создания веб-страниц.

Подробнее этот пример рассматривал в статье про телеграм бота с вебкухами.

Настраиваем наш первичный эндпоинт, который будет отвечать за бработку GET-запроса к главной странице сайта: 

@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

Обратите внимание прописал как асинхронную функцию. Возможность асинхронности одна из моих любимых фишек в FastApi. Может когда-то подробнее поговорим и об этом аспекте.

Ну и останется только запустить

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=5000)

Хост »0.0.0.0» указывается чтоб он слушал все что будет подключаться к fast api. Отлично, стартовые настойки выполнены!

Полный код: 

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from fastapi.requests import Request
import uvicorn


app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")


@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})


if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=5000)

Установка NGINX, запуск FastAPI и привязка HTTPS

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

  • Подъем NGINX

  • Запуск FastAPI приложения на сервере (вместе с утилиткой screen)

  • Привязку HTTPS протокола (бесплатно и просто)

  • Работа с утилитой SCREEN

Следите за обновлениями и до встречи во второй части!

© Habrahabr.ru