snext

Начало работы со Snex

Snext — это приложение Next.js, которое позволяет создавать маршруты API в Python.

Snext, потому что это звучит как «змея»? Знаешь, как Питон.

/! /! /! Это ранний эксперимент.

Начать с Python?

Эй, если вы окажетесь там, вы, вероятно, разработчик JavaScript, а Python — только ваш второй язык.

Вот как настроить эффективную среду Python.

Установить Python

Я предлагаю использовать Pyenv для установки Python. Считайте его эквивалентом Node Version Manager или Volta, но для Python.

Это эквивалентно использованию Volta или NVM в экосистеме Node.

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

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

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

Отличие от Node в том, что вы должны включать их систематически.

Настройте виртуальную среду и установите пакеты Python:

python3 -m venv ./venv
source ./venv/bin/activate
pip install -r requirements.txt

Последующие запуски

Вам необходимо активировать виртуальную среду, когда вы начнете работать:

 source ./venv/bin/activate

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

Начать

Различные ресурсы и вдохновение

• Обсуждение Vercel на Github: vercel/vercel#4023
• Plotly Dash: одна из самых впечатляющих попыток изоморфного веб-программирования. Dash позволяет использовать компоненты React на Python для создания интерактивных информационных панелей https://plotly.com/dash/
• Официальный документ о Python в Верселе: https://vercel.com/docs/runtimes#official-runtimes/python.
• https://stackoverflow.com/questions/63190114/call-a-python-script-from-react-with-next-routing-and-a-node-js-server
• https://medium.com/swlh/build-a-twitter-login-comComponent-using-nextjs-and-python-flask-44c17f057096
• версель/next.js#15846

TODO

• Узнайте, насколько vercel CLI может решить наши проблемы (см. https://vercel.com/docs/cli#commands/dev) => готово, это так!
• Тестирование локальной сборки
• Тестирование развертывания Vercel
• Улучшить опыт разработки с помощью Python, что немного более утомительно, чем использование JS (виртуальная среда)?
• Сборка с помощью «pkg»
• Попробуйте использовать «Pipfile», более похожий на package.json: https://github.com/pypa/pipfile.

Основные блокаторы

1) Запуск двух (или более) серверов на одном порту для Python и Node. РЕШЕНО

Решение:

Используйте Vercel CLI вместо next dev .

Команда Vercel CLI vercel dev способна локально моделировать бессерверную среду, поэтому вы можете тестировать маршруты API.

Если вы поместите все маршруты API в ./api/ и используете vercel dev , у вас могут быть маршруты API Python и Node.js (и, конечно, интерфейс Next.js по-прежнему работает нормально).

---

Читать vercel/vercel#6197

Узел + Питон

При запуске Next вам нужно, чтобы все работало на localhost:3000 , но у вас будет 2 сервера: один для Node, другой для Python. Для работы этого потребуется переписать логику.

Возможные решения

• Проверьте, разрешено ли это уже перезаписью Next.js в next.config.js.
• Запустите третий сервер, который обрабатывает перенаправление.

Вопросы

• Как это решено в Next для маршрутов API и интерфейса?

Питон + Питон

Кроме того, у нас может быть несколько маршрутов API, которые при развертывании будут действовать как бессерверные функции. Но локально мы должны сделать их одним сервером.

Возможные решения

• У нас есть частичное решение с помощью Sanic Dispatcher, см. «python-server.py». Он опирается на главный сервер, который отправляет запросы приложениям Sanic, поэтому у вас есть только один сервер, но вы можете запускать несколько маршрутов API.
• Нам все еще нужно автоматизировать импорт соответствующих маршрутов. Используя своего рода магию, подобную Webpack, но на Python.
• https://peterhaas-me.medium.com/how-to-run-multiple-flask-applications-from-the-same-server-9ca2c0ad7bb3
• https://werkzeug.palletsprojects.com/en/1.0.x/middleware/dispatcher/
• Диспетчер для Sanic: https://github.com/ashleysommer/sanic-dispatcher/blob/master/sanic_dispatcher/extension.py#L131

2) Получение статических данных

Рекомендуемый шаблон для получения статических данных из маршрутов API в Next — повторное использование базовой логики маршрута непосредственно в getStaticProps . Но это возможно только потому, что оба используют JS. При использовании Python нам нужно будет сначала построить маршруты API, запустить их, а затем только создавать интерфейс.

Необходимо протестировать с помощью Vercel CLI.

3) Сбой во время выполнения

У нас есть эта ошибка https://github.com/vercel/community/discussions/103 в последней версии, среда выполнения Python кажется слишком большой. См. vercel/community#103 (комментарий). См. vercel/vercel#2830.

Второстепенные проблемы

Невозможно использовать vercel dev в качестве команды dev

См. https://github.com/vercel/vercel/blob/main/errors/now-dev-as-dev-script.md.

Сценарий должен иметь другое имя, например dev:vercel иначе он создаст бесконечный цикл.

Подчеркивание в именах папок Python

Нет - в именах папок в Python, иначе у вас будут проблемы с импортом файлов... Используйте подчеркивание _ . Это может привести к созданию запутанных URL-адресов, поскольку имя папки привязано к имени маршрута в разделе «Далее».

Возможные решения

• Автоматически сгенерируйте карту возможных маршрутов или используйте перезапись URL-адресов.

Какой сервер выбрать

(Из моего ограниченного опыта работы с Python) я склонен сравнивать Flask или Falcon с Express: используется много, достаточно минимально. Но блокирующее поведение Python может сбить с толку разработчика JavaScript. Поэтому я выберу Sanic, потому что он опирается на async/await, как Node.js, и может быть наименее запутанным.

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

Настройка Runtime для хостинга

Для упрощения предположим хостинг на Верселе. Нам может понадобиться vercel.json , чтобы сообщить Vercel, какую среду выполнения использовать: https://vercel.com/docs/runtimes#advanced-usage/community-runtimes

Поскольку разработка Vercel работает, следует ожидать, что развертывание Vercel будет работать сразу после установки. Чтобы пройти тестирование.

Виртуальная среда

В Python вам нужна виртуальная среда для изоляции ваших пакетов между приложениями, а в JS эту роль играет node_modules . Проблема в том, что виртуальную среду необходимо активировать при начале работы, а это дополнительный шаг для разработчика. Что еще хуже, source команду, активирующую среду, невозможно (последний раз, когда я проверял) поместить в package.json , поэтому вам придется каждый раз запоминать правильную команду.

---

О следующем

Это проект Next.js, загруженный с помощью create-next-app .

Начиная

Сначала запустите сервер разработки:

npm run dev
# or
yarn dev

Откройте http://localhost:3000 в браузере, чтобы увидеть результат.

Вы можете начать редактирование страницы, изменив pages/index.js . Страница автоматически обновляется по мере редактирования файла.

Доступ к маршрутам API можно получить по адресу http://localhost:3000/api/hello. Эту конечную точку можно редактировать в pages/api/hello.js .

Каталог pages/api отображается в /api/* . Файлы в этом каталоге рассматриваются как маршруты API, а не как страницы React.

Узнать больше

Чтобы узнать больше о Next.js, посетите следующие ресурсы:

• Документация Next.js — узнайте о функциях и API Next.js.
• Изучите Next.js — интерактивное руководство по Next.js.

Вы можете посетить репозиторий Next.js на GitHub — ваши отзывы и вклад приветствуются!

Развертывание на Верселе

Самый простой способ развернуть приложение Next.js — использовать платформу Vercel от создателей Next.js.

Дополнительную информацию можно найти в документации по развертыванию Next.js.