snext

Erste Schritte mit Snext

Snext ist eine Next.js-Anwendung, mit der Sie API-Routen in Python erstellen können.

Snext, weil es wie „Schlange“ klingt? Sie wissen schon, wie ein Python.

/! /! /! Dies ist ein frühes Experiment

Mit Python beginnen?

Hey, wenn Sie dort landen, sind Sie wahrscheinlich ein JavaScript-Entwickler und Python ist nur Ihre Zweitsprache.

Hier erfahren Sie, wie Sie eine effiziente Python-Umgebung einrichten.

Installieren Sie Python

Ich schlage vor, Pyenv zur Installation von Python zu verwenden. Betrachten Sie es als Äquivalent zu Node Version Manager oder Volta, jedoch für Python.

Dies entspricht der Verwendung von Volta oder NVM im Node-Ökosystem.

Allererster Lauf: Richten Sie eine virtuelle Umgebung ein.

Python hat keinen node_modules -Ordner. Das ist vielleicht das Beste, aber es macht es ziemlich schwierig, mit Abhängigkeiten umzugehen, wenn Sie viele Projekte auf Ihrem Computer haben.

Eine virtuelle Umgebung ist etwas ähnlich: Sie weist Python an, Pakete lokal in Ihrem aktuellen Projekt und nicht global zu installieren.

Der Unterschied zu Node besteht darin, dass Sie sie systematisch aktivieren müssen.

Richten Sie eine virtuelle Umgebung ein und installieren Sie die Python-Pakete:

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

Nachfolgende Läufe

Sie müssen die virtuelle Umgebung aktivieren, wenn Sie mit der Arbeit beginnen:

 source ./venv/bin/activate

Dieser Befehl funktioniert leider nicht in NPM-Skripten. Sie müssen es jedes Mal eingeben.

Fangen Sie an

Verschiedene Ressourcen und Inspirationen

• Diskussion zu Vercel Github: vercel/vercel#4023
• Plotly Dash: einer der beeindruckendsten Versuche der isomorphen Webprogrammierung. Mit Dash können Sie React-Komponenten in Python verwenden, um interaktive Dashboards zu erstellen https://plotly.com/dash/
• Offizielles Dokument über Python in Vercel: 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-component-using-nextjs-and-python-flask-44c17f057096
• vercel/next.js#15846

TODO

• Untersuchen Sie, inwieweit vercel CLI unsere Probleme lösen kann (siehe https://vercel.com/docs/cli#commands/dev) => fertig, das tut es!
• Testen Sie den lokalen Build
• Testen Sie die Vercel-Bereitstellung
• Entwicklungserfahrung mit Python verbessern, was etwas mühsamer ist als die Verwendung von JS (virtuelle Umgebung)?
• Mit „pkg“ erstellen
• Versuchen Sie es mit einer „Pipfile“, die eher package.json ähnelt: https://github.com/pypa/pipfile

Hauptblocker

1) Ausführen von 2 (oder mehr) Servern auf demselben Port für Python und Node SOLVED

Lösung:

Verwenden Sie Vercel CLI anstelle von next dev .

Der Vercel-CLI-Befehl vercel dev kann eine serverlose Umgebung lokal simulieren, sodass Sie Ihre API-Routen testen können.

Wenn Sie alle API-Routen in ./api/ einfügen und vercel dev verwenden, können Sie sowohl Python- als auch Node.js-API-Routen haben (und natürlich funktioniert das Next.js-Frontend weiterhin einwandfrei).

---

Lesen Sie vercel/vercel#6197

Knoten + Python

Wenn Sie „Next“ ausführen, möchten Sie, dass alles auf localhost:3000 läuft, aber Sie haben zwei Server: einen für Node und einen für Python. Damit dies funktioniert, ist eine Umschreibung der Logik erforderlich.

Mögliche Lösungen

• Überprüfen Sie, ob Next.js-Umschreibungen in next.config.js dies bereits zulassen
• Führen Sie einen dritten Server aus, der die Umleitung übernimmt

Fragen

• Wie wird das Problem in Next für API-Routen und Frontend gelöst?

Python + Python

Außerdem verfügen wir möglicherweise über mehrere API-Routen, die bei der Bereitstellung als serverlose Funktionen fungieren. Aber lokal müssen wir sie zu einem Server machen.

Mögliche Lösungen

• Wir haben eine Teillösung mit Sanic Dispatcher, siehe „python-server.py“. Es basiert auf einem Hauptserver, der die Anfrage an Sanic-Apps weiterleitet, sodass Sie nur einen Server haben und dennoch mehrere API-Routen ausführen können
• Wir müssen den Import relevanter Routen noch automatisieren. Mit einer Art Webpack-ähnlicher Magie, aber in 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/
• Dispatcher für Sanic: https://github.com/ashleysommer/sanic-dispatcher/blob/master/sanic_dispatcher/extension.py#L131

2) Statische Daten abrufen

Das empfohlene Muster zum Abrufen statischer Daten von Ihren API-Routen in Next besteht darin, die Kernlogik der Route direkt in getStaticProps wiederzuverwenden. Dies ist jedoch nur möglich, weil beide JS verwenden. Mit Python müssten wir zuerst die API-Routen erstellen, sie ausführen und dann nur das Frontend erstellen.

Muss mit Vercel CLI getestet werden.

3) Laufzeitfehler

Wir haben diesen Fehler https://github.com/vercel/community/discussions/103 in der neuesten Version, die Python-Laufzeit scheint zu groß zu sein. Siehe vercel/community#103 (Kommentar) Siehe vercel/vercel#2830

Sekundäre Probleme

Vercel dev kann nicht als dev-Befehl verwendet werden

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

Das Skript muss „smth else“ heißen, zum Beispiel dev:vercel sonst entsteht eine Endlosschleife.

Unterstrich in Python-Ordnernamen

Nein - in Ordnernamen in Python, sonst wird es Ihnen schlecht, Dateien zu importieren ... Verwenden Sie den Unterstrich _ . Dies kann zu unübersichtlichen URLs führen, da der Ordnername mit dem Routennamen in „Weiter“ verknüpft ist.

Mögliche Lösungen

• Generieren Sie automatisch eine Karte möglicher Routen oder nutzen Sie die URL-Umschreibung

Welchen Server soll ich wählen?

(Aufgrund meiner begrenzten Erfahrung mit Python) Ich würde Flask oder Falcon eher mit Express vergleichen: häufig verwendet, minimal genug. Aber das Blockierungsverhalten von Python kann für den JavaScript-Entwickler sehr verwirrend sein. Deshalb werde ich mich für Sanic entscheiden, da es wie Node.js auf async/await basiert und möglicherweise am wenigsten verwirrend ist.

Auf jeden Fall sollte das gesamte für ein Framework gesammelte Wissen für jedes andere Framework wiederverwendbar sein.

Runtime für das Hosting einrichten

Zur Vereinfachung gehen wir von einem Hosting auf Vercel aus. Möglicherweise benötigen wir eine vercel.json um Vercel mitzuteilen, welche Laufzeit verwendet werden soll: https://vercel.com/docs/runtimes#advanced-usage/community-runtimes

Da die Vercel-Entwicklung funktioniert, können wir davon ausgehen, dass die Vercel-Bereitstellung sofort funktioniert. Zu testen.

Die virtuelle Umgebung

In Python benötigen Sie eine virtuelle Umgebung, um Ihre Pakete zwischen Apps zu isolieren, während in JS node_modules diese Rolle spielt. Das Problem besteht darin, dass die virtuelle Umgebung zu Beginn der Arbeit aktiviert werden muss, was einen zusätzlichen Schritt für den Entwickler darstellt. Erschwerend kommt hinzu, dass der source , der die Umgebung aktiviert, (das letzte Mal, als ich es überprüft habe) nicht in package.json eingefügt werden kann, sodass Sie sich jedes Mal den richtigen Befehl merken müssen.

---

Über Next

Dies ist ein Next.js-Projekt, das mit create-next-app gebootet wurde.

Erste Schritte

Führen Sie zunächst den Entwicklungsserver aus:

npm run dev
# or
yarn dev

Öffnen Sie http://localhost:3000 mit Ihrem Browser, um das Ergebnis anzuzeigen.

Sie können mit der Bearbeitung der Seite beginnen, indem Sie pages/index.js ändern. Die Seite wird automatisch aktualisiert, wenn Sie die Datei bearbeiten.

Auf API-Routen kann unter http://localhost:3000/api/hello zugegriffen werden. Dieser Endpunkt kann in pages/api/hello.js bearbeitet werden.

Das Verzeichnis pages/api ist /api/* zugeordnet. Dateien in diesem Verzeichnis werden als API-Routen statt als React-Seiten behandelt.

Erfahren Sie mehr

Um mehr über Next.js zu erfahren, werfen Sie einen Blick auf die folgenden Ressourcen:

• Next.js-Dokumentation – Erfahren Sie mehr über die Funktionen und die API von Next.js.
• Lernen Sie Next.js – ein interaktives Next.js-Tutorial.

Sie können sich das GitHub-Repository von Next.js ansehen – Ihr Feedback und Ihre Beiträge sind willkommen!

Bereitstellung auf Vercel

Der einfachste Weg, Ihre Next.js-App bereitzustellen, ist die Verwendung der Vercel-Plattform der Entwickler von Next.js.

Weitere Informationen finden Sie in unserer Next.js-Bereitstellungsdokumentation.