Hallo alle zusammen. Mit dem Frühling kamen neue Kurse zu OTUS, die wir heute einführen. Bereits offene Einstellungsverfahren für den Kurs „React.js Entwickler . “ Weitere Informationen zum Kurs finden Sie im kostenlosen Webinar , das am 11. März stattfindet. Im Rahmen desselben Webinars wird eine kleine Webanwendung für ReactJS entwickelt.
Und jetzt empfehlen wir Ihnen, den Artikel über die Bereitstellung Ihrer ersten Anwendung zu lesen, der von unserem freiberuflichen Autor verfasst wurde.
Die Startvorlage Create-React-App und Heroku sind großartige Tools zum schnellen Erstellen von Cloud-basierten Anwendungen. Die Dokumentation zu React und Heroku enthält jedoch überraschend wenig Informationen zum Rollout Ihrer React-Anwendung auf Heroku. Die in diesem Artikel beschriebenen Schritte funktionieren für alle Projekte, die mit der create-react-app erstellt wurden . In unserem Artikel werden wir auf Heroku eine einfache ToDo-Anwendung mit dem minimalsten Backend installieren, um nur den Prozess selbst zu betrachten. Aber das Wichtigste zuerst:Was ist Heroku im Allgemeinen? Warum brauche ich ihn?
Heroku ist eine Cloud-basierte Platform-as-a-Service-Plattform (PaaS), die viele Programmiersprachen unterstützt (und sich wirklich rühmt und hervorhebt). Die Geschichte von Heroku begann 2007 und dann war Ruby die erste Programmiersprache. Jetzt unterstützt es Java, Node.js, Scala, Clojure, Python, PHP und Go.Warum brauche ich diese Wolke? Ich kann preiswertes Hosting kaufen
Ja, Sie können jedes Hosting für sich selbst kaufen und dort den Node.js-Server installieren, wenn dieser Service auf dem Hosting unterstützt wird. Cloud-Plattformen haben jedoch Eigenschaften wie beispielsweise Elastizität und Verbrauchsmessung. Wenn viele Benutzer Ihren Dienst besuchen, skaliert oder schränkt die Plattform den Fluss höchstwahrscheinlich automatisch ein (oder Sie selbst verwenden die von der Plattform bereitgestellten Tools). Die Berücksichtigung des Verbrauchs bedeutet, dass Sie nur für die nachgefragten Ressourcen bezahlen. Cloud-Plattformen bieten viele weitere Vorteile. Eine vollständige Liste finden Sie hier . Nun, wir werden direkt zum Einsatz gehen.Erstellen Sie Ihre eigene React-Anwendung
Was ist das für eine Vorlage zum Erstellen, Reagieren und App ? Es ist wahrscheinlich unmöglich, sich ein wenig mit der Entwicklung von React-Anwendungen zu befassen und nichts davon zu wissen. Diese Vorlage bietet React, React-Dom, Webpack und ESLint "unter der Haube". Natürlich können Sie Ihre eigene React-Anwendung selbst erstellen, aber warum sollten Sie eine komplexe Anwendung mit einer Reihe von Abhängigkeiten erstellen, wenn Sie ein fertiges Fahrrad verwenden können?Stellen Sie zunächst sicher, dass Node.js installiert ist .Geben Sie die folgenden Befehle in die Konsole ein, um eine neue Anwendung zu erstellen: npx create-react-app test-app
cd test-app
Nützlicher Hinweis, , create-react-app . npm install -g create-react-app. , ( , ), - , react-scripts 3.4.0. , npm uninstall -g create-react-app.
Ok, Sie haben das Paket geliefert und möchten es jetzt bereitstellen. Um kein einfaches Paket mit einer Komponente bereitzustellen, die eine sofort einsatzbereite App erstellt , habe ich beschlossen, eine kleine Aufgabenanwendung zu schreiben, deren Quellcode, wenn Sie auch versuchen möchten, Ihre Anwendung auszufüllen, hier zu finden ist . Kurz gesagt, der Status wird dort in Form neuer und modischer Einträge gespeichert , in denen der Text der Fälle und ihre ID gespeichert werden , die direkt daraus generiert werden Date.now(). Ich habe am Layout der Komponenten von Material-UI teilgenommen .Sie können diese Anwendung für sich selbst bereitstellen und bereitstellen mit: npm i -D
npm start
Dann haben wir eine unglaubliche Gelegenheit, herumzuspielen und unsere eigenen Angelegenheiten zu schaffen. Alle Funktionen in dieser Anwendung dienen jedoch dazu, Dinge im Status zu speichern . Ich habe kein Strumpfband zum Server oder zumindest zu localStorage gemacht , der Zweck dieses Artikels ist nicht dieser. Angenommen, ich bin sehr paranoid und werde meine Angelegenheiten in nur einer Aufnahme des Browser-Tabs aufzeichnen.Erstellen Sie Ihr Favicon
Warum brauchen wir überhaupt einen Node.js- Server, wenn mit der Datenbank nicht gearbeitet wird? Unter Verwendung des Servers geben wir Favicon und den gesamten Rest des Codes. Wechseln Sie in unserer React- Anwendung in den öffentlichen Ordner und löschen Sie die Vorlage favicon.ico von dort. Ich werde das Symbol von hier nehmen und es in den öffentlichen Ordner übertragen.Erstellen Sie Ihren Express-Server
Als Nächstes erstellen wir unseren Express-Server, um den Build zu warten. Erstellen Sie direkt im Anwendungsordner eine Datei, server.jsin der sich die Arbeit unseres Backends entfalten wird.Wir schreiben folgendes hinein: const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.png'));
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
return res.send('pong');
});
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
Da nutzen wir ausdrücken , Express-Favicon und Pfad - Pakete , müssen wir sie installieren: yarn add express express-favicon path -D
In wir package.jsondas ändern Startbefehl an die folgenden: "start": "node server.js",
Führen Sie build aus
Als nächstes müssen wir die Anwendung mit dem folgenden Befehl erstellen: yarn build
Es wäre schön zu testen, ob unsere Anwendung korrekt funktioniert. Dazu rekrutieren yarn startund bewerten wir, wie richtig es funktioniert.Quellkarte ausblenden
Vielleicht möchten Sie nicht, dass jemand auf Ihren Quellcode zugreifen kann. In diesem Fall müssen Sie den Zugriff auf Ihren entfernen sourcemap. Erstellen Sie dazu eine Datei im Repository .envund verbieten Sie die Kartengenerierung darin: GENERATE_SOURCEMAP=false
Nützlicher HinweisSource map ( , , , , - ). — source map, , .
Direkt bereitstellen
Wenn Sie noch kein Konto bei Heroku haben , sollten Sie sich hier registrieren . Für die Bereitstellung müssen Sie auch die Heroku-CLI von hier aus installieren . Testen Sie die Funktion, indem Sie das Heroku-Login in die Befehlszeile schreiben . Als nächstes finden Sie eine Weiterleitung zur Heroku-Website, auf der Sie sich anmelden müssen.Geben Sie dann den Namen Ihrer Anwendung ein. In meinem Fall ist es todoisakura313 , da Sie im Anwendungsnamen keine Sonderzeichen und Unterstriche verwenden können: heroku create todoisakura313
Dann senden wir unseren Build mit den folgenden Befehlen: npm install
git add --all
git commit -m "first commit"
git push heroku master
Mit diesen Befehlen können Sie Abhängigkeiten hinzufügen, gitdie Anwendung selbst initialisieren und herunterladen.Fein! Im Allgemeinen ist alles fertig, jetzt sollte die Anwendung bereits unter der Adresse erscheinen https://< >.herokuapp.com/. Sie können die Anwendung öffnen, indem Sie die folgenden Befehle in die Konsole eingeben:heroku open
Wenn etwas schief gelaufen ist, finden Sie heraus, was mit dem Team nicht stimmt heroku logs --tail. Wenn Sie jedoch nicht von den Anweisungen in diesem Artikel abgewichen sind, sollten Sie im Allgemeinen erfolgreich sein.Das ist alles! Vielen Dank für Ihre Aufmerksamkeit. Eine funktionierende Anwendung finden Sie hier und mit ihrem fertigen Code - hier .Und diejenigen, die bis zum Ende gelesen haben, laden Sie zu einem weiteren kostenlosen Webinar ein , in dem Sie die Stärken und Schwächen der beliebtesten JS-Frameworks für die Frontend-Entwicklung kennenlernen, verstehen, für welche Aufgaben welches Framework am besten geeignet ist, und Sie können entscheiden, welches besser ist studieren.