Ich habe kürzlich gelernt, wie ich mein MERN-Full-Stack-Projekt bereitstellen kann, und kann es kaum erwarten, Ihnen bei der Bereitstellung Ihres Projekts zu helfen.

Bei der Bereitstellung eines MERN-Full-Stack-Projekts müssen Backend und Frontend separat bereitgestellt werden. Sehen wir uns zunächst an, wie das Backend bereitgestellt wird:

Hier ist das Setup des Repos, das ich für Render bereitstelle:

Ich habe einen Client-Ordner für das Frontend und einen Serverordner für das Backend.

Zuallererst: Melden Sie sich bei Render für ein kostenloses Konto an. Ich empfehle, sich über Ihr GitHub-Konto anzumelden, damit es schneller auf Ihre Ordner zugreifen kann.

Backend:

Für Backend:

1. Klicken Sie auf „Neu“ und wählen Sie „Webdienst“ aus

3. Identifizieren Sie einen eindeutigen Namen für Ihren Webdienst.

4. Wir können „Region“ in Ruhe lassen

5. Belassen Sie „Branch“ als „main“.

6. Als „Stammverzeichnis“ habe ich „Server“ angegeben, da sich alle meine Backend-Informationen in diesem Ordner befinden.

7. Überlassen Sie die Laufzeit dem Knoten, da wir diesen für unser Backend verwendet haben.

8. Befehl erstellen, Sie können ihn als „Garn“ belassen.

9. Mit dem Startbefehl können Sie „npm start“ eingeben.

10. Stellen Sie dann sicher, dass Sie als Instanztyp „Frei“ wählen .

11. Klicken Sie anschließend auf die Schaltfläche „Erweitert“:

Nachdem Sie auf die Schaltfläche geklickt haben, werden unten auf der Seite weitere Auswahlmöglichkeiten angezeigt.

12. Klicken Sie auf „Umgebungsvariable hinzufügen“:

Fügen Sie eine Umgebungsvariable namens „MY_MONGO_URL“ hinzu und fügen Sie die URL Ihrer MongoDB-Verbindung in den Wert ein.

In diesem Schritt erfahren Sie, wie Render eine Verbindung zu Ihrer MongoDB-Datenbank herstellen soll.

13. Klicken Sie anschließend auf „Webdienst erstellen“.

Dann sollte ein Konsolenprotokoll angezeigt werden, das Ihnen mitteilt, dass mit dem Klonen aus Ihrer GitHub-Datei begonnen wird.

Nach ein paar Durchläufen sollte im Protokoll stehen, dass es „mit der Datenbank verbunden ist und Port ### überwacht“.

Testen, ob das Backend funktioniert:

Um zu testen, ob Ihr Backend bereitgestellt ist, klicken Sie auf den Hyperlink oben rechts. Es wird ein Fehler ähnlich diesem angezeigt:

Wenn Sie zum Hyperlink am Ende gehen und „api/(der Endpunkt für Ihre Route)“ zur Abfragezeichenfolge hinzufügen, sollten Ihre Datenbankinformationen im JSON-Format angezeigt werden.

Und voilà, unser Backend wurde bereitgestellt. Um alles abzuschließen, stellen wir nun unser Frontend bereit.

Frontend:

Für Frontend:

1. Klicken Sie auf „Neu“ und wählen Sie im Dropdown-Menü „Statische Site“ aus.

4. Identifizieren Sie einen eindeutigen Namen dafür

5. Belassen Sie Branch als „main“.

6. Geben Sie unter „Stammverzeichnis“ „Client“ ein.

7. Build-Befehl – ​​Garn-Build

8. Geben Sie unter „Verzeichnis veröffentlichen“ „Build“ ein.

9. Klicken Sie auf „Statische Site erstellen“ und eine neue Seite mit dem Konsolenprotokoll sollte erscheinen. Suchen Sie auf der linken Seite nach „Redirects/Rewrites“.

10. Erstellen Sie anschließend zwei Regeln.

Die erste Regel, die darüber hinausgeht, besteht darin, „/api/*“ in Ihrem Code in Ihr neu bereitgestelltes Backend umzuschreiben.

Die zweite Regel besteht darin, „/*“ in die Datei „index.html“ umzuschreiben.

Anschließend sollte die Bereitstellung erneut versucht werden und die Meldung sollte lauten: „Build wird hochgeladen …“ und „Ihre Website ist live“.

Bitte lassen Sie mich wissen, wenn Sie Fragen oder Schwierigkeiten haben. Auf welche anderen Arten können Sie die Full-Stack-MERN-App bereitstellen?

Kontaktieren Sie mich gerne auf LinkedIn:https://www.linkedin.com/in/mai-vang-software-engineer/