Цикл «запрос-обработка-ответ» включает множество элементов, которые идентичны для всех сайтов. Поэтому возникли так называемые фреймворки — библиотеки, которые определяют структуру программы. В этом их отличие от обычных библиотек. Благодаря фреймворкам можно сосредоточиться на логике сайта, а не на продумывании базовой архитектуры или разработке вспомогательных инструментов.
Веб-фреймворки подразделяются на две большие группы:
- Фреймворки
- Микрофреймворки
Микрофреймворки устроены значительно проще. Они содержат только минимально необходимую обвязку для комфортной работы в архитектуре HTTP — это «запрос-ответ». Они идеально подходят для обучения, потому что просты и не отвлекают от главного.
В этом уроке мы начнем изучать принципы работы веб-приложений через призму фреймворка fastify. Изученные здесь концепции одинаково работают во всех остальных фреймворках.
Установка
Для начала создайте директорию и инициализируйте npm-проект:
mkdir myapp
cd myapp
npm init
Фреймворк поставляется в виде обычного npm-пакета:
npm install fastify
Сам по себе фреймворк не создает никаких файлов и директорий, поэтому добавьте директорию для хранения исходных файлов:
mkdir src
Создайте файл src/index.js со следующим содержимым:
import fastify from 'fastify'
const app = fastify()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen({ port }, () => {
console.log(`Example app listening on port ${port}`)
})
Не забудьте добавить в package.json поддержку импортов:
"type": "module"
Запуск
Перейдем к запуску — он выполняется командой node src/index.js в директории проекта.
node src/index.js
Example app listening on port 3000
По умолчанию сервер стартует на http://localhost:3000. Если открыть адрес в браузере, то должна появиться надпись Hello World.
Сервер останавливается комбинацией клавиш Ctrl-C
Внесение изменений
Когда запускается веб-сервер, то исходный код загружается в память. Любые последующие изменения кода никак не повлияют на запущенное приложение. Это создает определенные неудобства во время разработки, так как придется перезапускать сервер каждый раз, когда результат изменений нужно будет проверять. Но для наших задач этого хватит.
Fastify CLI
Для удобства работы над проектами Fastify была создана специальная утилита fastify-cli. Она позволяет быстро создавать и запускать приложения, а также управлять проектами без необходимости ручной настройки. Мы рассмотрим основные команды, доступные в fastify-cli, и изучим, как с его помощью можно быстро разрабатывать приложения, которые будут легко масштабироваться.
Установка fastify-cli
Перед тем, как погружаться в работу утилиты, нужно ее установить:
npm install fastify-cli
Создание проекта
После установки fastify-cli можно создавать новые проекты. Для этого необходимо перейти в директорию, где вы хотите создать свой проект серверного приложения, и выполнить команду:
npx fastify generate . --esm
Команда generate создаёт структуру нового проекта в текущей директории, включая файлы конфигурации и директорию для хранения ваших приложений. Если в текущей директории уже находится package.json, то к команде нужно добавить флаг --integrate.
После генерации проекта нужно выполнить установку зависимостей:
npm install
Запуск приложения
После того как была создана структура проекта, можно запустить ваше приложение. Утилита добавляет необходимые скрипты, поэтому для запуска доступны следующие команды:
# Запуск в режиме production
npm start
# Запуск в режиме develop
npm run dev
Вторая команда npm run dev используется при разработке и позволяет утилите отслеживать изменения в рабочей директории и автоматически перезапускать сервер. Таким образом не придется каждый раз перезапускать сервер вручную.
Заключение
В этом уроке мы изучили основные способы создания и запуска приложений. Мы рассмотрели ручное создание и запуск сервера, а также через специальную утилиту. Теперь вы можете попрактиковаться в создании своего собственного приложения и применять на практике все о чем рассказывается в этом курсе.
Самостоятельная работа
Выполните все шаги из этого урока на своем компьютере. Создайте на GitHub репозиторий с именем hexlet-fastify и залейте в него код нашего проекта. Этот проект понадобится нам в дальнейших уроках. На протяжении курса вы будете его дорабатывать.
Здесь находится пример того, какой проект у вас может получиться по окончанию курса. Вы можете сверяться с этим примером в самостоятельных работах.
Дополнительные материалы
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
