Wie hostet man Frontend und Backend?

In diesem Tutorial bieten wir eine umfassende Anleitung zum Hosten eines Frontends und eines Backends einer Anwendung.

Zu diesem Zweck werden wir eine Full-Stack-App auf Back4app hosten. Wir werden zuerst am Backend arbeiten, dann zum Frontend übergehen und zum Schluss die beiden Komponenten verbinden.

Ziele

Am Ende dieses Artikels werden Sie dazu in der Lage sein:

• Erklären Sie die Unterschiede zwischen Frontend und Backend
• Erstellen Sie ein Backend mit der BaaS-Lösung von Back4app
• Bereitstellen einer Frontend-Anwendung in Back4app Containern
• Verbinden Sie Ihre Frontend-Anwendung mit Ihrer Backend-Anwendung

Was sind die Unterschiede zwischen Frontend und Backend?

Das Backend und das Frontend beziehen sich auf die Trennung von Belangen bei der Entwicklung moderner Web- und Mobilanwendungen. Der einfachste Weg, ihre Unterschiede zu verstehen, ist die Visualisierung eines Eisbergs.

Das Frontend (oder die Client-Seite) ist alles, was der Benutzer sehen und mit dem er interagieren kann. Die Frontends gibt es in verschiedenen Formaten, z. B. als mobile Anwendungen, Webanwendungen, Webschnittstellen oder andere Arten von Clients.

Dieser Anwendungsteil ist für die UI/UX, das Design, die Animationen, die Grafiken und andere Medientypen verantwortlich. Die Client-Seite macht 20 % der Projektarbeit aus und ist nicht wiederholbar.

Auf der anderen Seite ist das Backend (oder die Server-Seite) alles, was der Benutzer nicht sehen kann. Es ist die Brücke zwischen dem Frontend und der Datenbank.

Sie ist für die Geschäftslogik, Hintergrundaufgaben, Datenspeicherung, Skalierung, Integration von Drittanbietern usw. verantwortlich. Auch wenn der Benutzer nicht direkt mit ihr interagieren kann, hat sie dennoch einen großen Einfluss auf die Qualität einer Anwendung.

Sie macht etwa 80 % der Projektarbeit aus und umfasst häufig sich wiederholende Aufgaben wie Benutzerverwaltung, Authentifizierung, Verschlüsselung usw.

Sie können Ihre Frontend- und Backend-Anwendungen auf verschiedenen Plattformen bereitstellen. Einige meiner persönlichen Favoriten habe ich in der folgenden Tabelle zusammengefasst:

In diesem Tutorial lernen Sie, wie Sie Ihr Frontend und Backend auf Back4app bereitstellen können – kostenlos! Lesen Sie weiter, um zu erfahren, wie Sie Backend und Frontend bereitstellen.

Projekt-Einführung

Ich habe eine Full-Stack-Anwendung vorbereitet, um zu zeigen, wie man ein Frontend und ein Backend auf Back4app bereitstellt.

Die App dient als einfacher Markdown-Blog. Die Administratoren können Artikel hinzufügen, bearbeiten und löschen, während die Benutzer sie lesen können.

Das endgültige Projekt wird in etwa so aussehen:

Wie bereits erwähnt, besteht die App aus zwei Teilen: dem Frontend und dem Backend. Wenn wir uns die Architektur der App vorstellen, würde sie in etwa so aussehen:

Wir werden das Backend in Back4app und die Frontend-App in Back4app Containers bereitstellen. Zum Schluss verbinden wir die beiden Komponenten über das Parse SDK.

Ich schlage vor, dass Sie sich zunächst mit dieser Anwendung vertraut machen und später Ihr Wissen durch den Einsatz Ihrer Full-Stack-Anwendungen testen.

Lesen Sie weiter, um zu erfahren, wie Sie Backend und Frontend hosten können.

Wie hostet man ein Backend?

In diesem Abschnitt werden wir uns um den Backend-Teil der Anwendung kümmern.

Zielsetzungen

1. Erstellen einer Back4app-Anwendung
2. Definieren Sie die Datenbankklassen
3. Datenbank ACLs/CLPs einrichten
4. Befüllen der Datenbank
5. Aktivieren Sie die Admin App

Back4app App erstellen

Sie benötigen ein kostenloses Back4app-Konto, um mitzumachen. Wenn Sie noch nicht registriert sind, können Sie sich kostenlos anmelden!

Um mit Back4app zu arbeiten, müssen Sie zunächst eine Anwendung erstellen. Wenn Sie sich bei Back4app authentifizieren, werden Sie zu Ihrer App-Ansicht weitergeleitet. Klicken Sie auf die Schaltfläche “Neue App erstellen”.

Als Nächstes wählen Sie “Backend as a Service”, da wir ein Backend bereitstellen wollen.

Benennen Sie Ihre Anwendung, wählen Sie “NoSQL”-Datenbank und klicken Sie auf “Erstellen”.

Die Plattform wird eine kleine Weile brauchen, um alles vorzubereiten (z. B. Datenbank, Skalierung, Backups, Anwendungsschicht). In der Zwischenzeit können Sie gerne eine kurze Kaffeepause einlegen.

Sobald Ihre Anwendung fertig ist, wird Ihnen der Datenbankexplorer angezeigt.

Datenbank definieren

In diesem Abschnitt werden wir uns mit den Datenbankklassen beschäftigen.

Da wir eine einfache Anwendung erstellen, benötigen wir nur eine Klasse. Klicken Sie in der Seitenleiste auf “Klasse erstellen”, nennen Sie sie Artikel, lassen Sie alles andere als Standard und klicken Sie auf “Klasse erstellen und Spalten hinzufügen”.

Fügen Sie die folgenden fünf Spalten hinzu:

+-----------+--------------+----------------+----------+
| Data type | Name         | Default value  | Required |
+-----------+--------------+----------------+----------+
| String    | slug         | <leave blank>  | 1        |
+-----------+--------------+----------------+----------+
| String    | title        | <leave blank>  | 1        |
+-----------+--------------+----------------+----------+
| File      | cover        | <leave blank>  | 0        |
+-----------+--------------+----------------+----------+
| String    | shortContent | <leave blank>  | 1        |
+-----------+--------------+----------------+----------+
| String    | content      | <leave blank>  | 1        |
+-----------+--------------+----------------+----------+

Fügen Sie unbedingt Spalten für zusätzliche Daten hinzu, die Sie speichern möchten.

Standardmäßig befinden sich die Datenbankklassen im “geschützten Modus”. Wenn wir von unserer Frontend-Anwendung aus mit ihnen interagieren wollen, müssen wir die Berechtigungen auf Klassenebene (CLPs) leicht ändern. Klicken Sie auf das Schlosssymbol am oberen Rand des Bildschirms und ändern Sie die CLPs wie folgt:

Lesen Sie den folgenden Artikel, um mehr über Parse Security zu erfahren.

Schließlich füllen Sie die Datenbank mit einigen Beispielartikeln.

Wenn Ihnen nichts einfällt, können Sie diesen Datenbankauszug auch importieren. Klicken Sie dazu auf die Option “Mehr” oben rechts auf dem Bildschirm und dann auf “Importieren > Klassendaten” und importieren Sie das JSON.

Ausgezeichnet, das ist es!

Wir haben jetzt einige Testdaten, mit denen wir arbeiten können.

Verwaltungs-App

Derzeit können Sie Artikel nur über die Back4app-Datenbankansicht verwalten. Dies ist nicht optimal, da Sie Ihre Back4app-Anmeldedaten nicht weitergeben oder Nicht-Techniker zu Ihrem Back4app-Dashboard hinzufügen möchten.

Glücklicherweise verfügt Back4app über eine dynamische Verwaltungsoberfläche für Ihre Datenbankmodelle. Um sie zu aktivieren, wählen Sie in der Seitenleiste “Mehr > Admin App” und klicken Sie dann auf “Admin App aktivieren”.

Wählen Sie einen Benutzernamen, ein Passwort und eine Subdomain für die Admin-App. Ich werde mit gehen:

username:     admin
password:     verystrongpassword123
admin url:    https://fullstack.admin.back4app.com/

Sie können nun unter der ausgewählten Admin-URL auf Ihr Admin-Panel zugreifen.

Öffnen Sie eine neue Registerkarte und navigieren Sie zu Ihrem Verwaltungsbereich. Verwenden Sie Ihre Anmeldedaten, um sich anzumelden und die Benutzeroberfläche zu erkunden. Sie können einen Artikel erstellen, ihn aktualisieren und dann löschen.

Erfahren Sie mehr über die Back4app Admin App, indem Sie sich die Dokumente ansehen.

Wir haben erfolgreich ein vollwertiges Backend ohne Code erstellt.

Wie hostet man ein Frontend?

In diesem Abschnitt werden wir uns um die Frontend-App kümmern.

Zielsetzungen

1. Einrichten einer lokalen Entwicklungsumgebung
2. Dockerisierung der Anwendung
3. Testen Sie die Docker-Images lokal
4. Veröffentlichen Sie den Quellcode auf GitHub
5. Bereitstellen der Anwendung in Back4app Containern

Lokale Einrichtung

Beginnen Sie mit dem Forken aller Zweige dieses Repositorys und klonen Sie dann den Fork auf Ihren lokalen Rechner:

$ git clone <fork_remote_git_url> --branch dummy
$ cd back4app-heroku-deploy && git branch -m master

Wir haben den Dummy-Zweig geklont, weil er den Backend-Code nicht enthält. Wir werden den Backend-Code im nächsten Abschnitt bearbeiten.

Als nächstes installieren Sie die Abhängigkeiten des Projekts:

$ npm install

Zum Schluss starten Sie den Entwicklungsserver:

$ npm run dev

Öffnen Sie Ihren bevorzugten Webbrowser und navigieren Sie zu http://localhost:3000. Sie sollten die Blog-Indexseite sehen können. Versuchen Sie, auf einen Artikel zu klicken, um zu sehen, ob Sie zur Seite mit den Artikeldetails weitergeleitet werden.

Im Moment ist die Seite mit den Artikeldetails noch hart kodiert. Keine Sorge, wir werden das später ändern.

Dockerize

Um eine Anwendung in Back4app Containern bereitzustellen, müssen Sie sie zunächst andocken.

Bei der Dockerisierung wird der Code in einen Container verpackt, der überall eingesetzt werden kann. Der einfachste Weg, eine Anwendung zu dockerisieren, ist die Verwendung einer Dockerdatei.

Dockerdatei

Ein Dockerfile-Skript enthält Anweisungen zur Erstellung eines Docker-Container-Images. Sie können diese Datei verwenden, um die Umgebung zu definieren, die Abhängigkeiten zu installieren und die Befehle auszuführen, die zum Erstellen und Ausführen einer Anwendung erforderlich sind.

Erstellen Sie eine Dockerdatei im Stammverzeichnis des Projekts mit folgendem Inhalt:

# Dockerfile

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

RUN npm run build
RUN npm install -g next

EXPOSE 3000

CMD ["next", "start", "-p", "3000"]

Dieses Dockerfile basiert auf dem node:18-alpine-Image. Es legt das Arbeitsverzeichnis fest, verwaltet die Abhängigkeiten, kopiert das Projekt und erstellt die Anwendung.

Sobald die Anwendung erstellt ist, gibt sie Port 3000 frei und startet einen Next.js-Server, der auf diesen Port wartet.

Um mehr über Dockerfiles zu erfahren, lesen Sie die offiziellen Dokumente.

.dockerignore

Die Größe eines Docker-Images sollte so gering wie möglich gehalten werden. Der einfachste Weg, die Größe eines Docker-Abbilds zu reduzieren, ist die Erstellung einer .dockerignore-Datei. In dieser Datei können Sie angeben, welche Dateien und Ordner aus dem endgültigen Abbild ausgeschlossen werden sollen.

Sie möchten zum Beispiel Ihre IDE-Dateien, Build-, .git- oder node_modules nicht in Ihr Image aufnehmen.

Hier ist ein Beispiel für eine .dockerignore-Datei, die Sie verwenden können:

# .dockerignore

.idea/

/node_modules
/.next/
/out/
/build

.vercel

Stellen Sie sicher, dass Sie die .dockerignore-Datei Ihren Bedürfnissen entsprechend anpassen.

Bauen, ausführen, testen

Es ist immer eine gute Idee, Ihr Docker-Projekt lokal zu testen, bevor Sie es in die Cloud verschieben. Der einfachste Weg, Ihre Dockerdatei zu testen, ist die Installation von Docker Desktop.

Nach der Installation können Sie Ihr Image erstellen:

$ docker build -t blog-frontend:1.0 .

Listen Sie die Bilder auf, um zu sehen, ob das Bild erfolgreich erstellt wurde:

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED             SIZE
blog-frontend     1.0       d361534a68da   2 minutes ago       1.08GB

Starten Sie einen Container mit dem soeben erstellten Image:

$ docker run -p 3000:3000 --name blog-frontend blog-frontend:1.0

Öffnen Sie Ihren bevorzugten Webbrowser und navigieren Sie zu http://localhost:3000. Ihre App sollte dort zu finden sein!

Um den Container zu beenden, drücken Sie STRG + c auf Ihrer Tastatur.

Auf GitHub verschieben

Back4pp Containers ist eng mit GitHub integriert. Es bietet ein automatisches CI/CD-System, das Ihre Anwendung bei jedem Commit neu bereitstellt. Um Ihren Code im nächsten Abschnitt bereitzustellen, müssen Sie die Änderungen zunächst in das VCS übertragen.

Bestätigen Sie alle Änderungen und übertragen Sie sie in die Cloud:

$ git add .
$ git commit -m "dockerized the application"
$ git push origin master

Navigieren Sie zu Ihrem GitHub-Repository und stellen Sie sicher, dass die Dockerdatei im Repository vorhanden ist.

App bereitstellen

Sie benötigen ein kostenloses Back4app-Konto, um mitzumachen. Wenn Sie noch nicht registriert sind, melden Sie sich kostenlos an!

Navigieren Sie zunächst zu Ihrem Back4app-Dashboard und klicken Sie auf “Neue App erstellen”.

Da wir eine Docker-Anwendung bereitstellen, wählen Sie “Container als Dienst”.

Wenn Sie Back4app Containers zum ersten Mal verwenden, werden Sie aufgefordert, Ihr GitHub-Konto mit Ihrem Back4app-Konto zu verbinden. Stellen Sie sicher, dass Sie den Zugriff auf alle Repositories, die Sie bereitstellen möchten, aktivieren.

Als Nächstes suchen Sie das back4app-full-stack-Repository und wählen es aus, indem Sie auf “Auswählen” klicken.

Die Anwendung, die wir bereitstellen, erfordert keine besondere Konfiguration. Alles, was Sie tun müssen, ist einen beschreibenden “App-Namen” anzugeben. Ich werde back4app-full-stack verwenden, um die Dinge zu organisieren.

Klicken Sie abschließend auf “Bereitstellen”.

Back4app Containers benötigt ein paar Minuten, um Ihr Docker-Image zu erstellen und bereitzustellen. Der Status Ihrer App wird auf “Bereit” geändert, sobald sie erfolgreich bereitgestellt wurde.

Um Ihre Anwendung zu besuchen, klicken Sie auf die grüne URL, wie in der Abbildung unten gezeigt.

Großartig, Sie haben erfolgreich eine Dummy-Frontend-Applikation in Back4app Containers implementiert.

Wie kann man das Frontend mit dem Backend verbinden?

In diesem Abschnitt werden wir unser Frontend mit unserem Back4app-Backend verbinden.

Zielsetzungen

1. Parse SDK installieren
2. Parse SDK konfigurieren
3. Abrufen von Daten (z. B. mit ParseQuery)

Parse SDK installieren

Installieren Sie zunächst das Parse SDK:

$ npm install parse

Parse SDK konfigurieren

Um Parse SDK zu initialisieren, müssen Sie Ihre Back4app “Application ID” und Ihren “JavaScript-Schlüssel” angeben. Um diese zu erhalten, navigieren Sie zu Ihrer Back4app-Anwendung und wählen Sie “App Settings > Security & Keys” in der Seitenleiste.

Da wir diese Geheimnisse nicht im Quellcode preisgeben wollen, erstellen Sie eine .env.local-Datei:

# .env.local

NEXT_PUBLIC_PARSE_APPLICATION_ID=<your_parse_app_id>
NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY=<your_parse_js_key>

Stellen Sie sicher, dass Sie die Platzhalter durch die tatsächlichen Werte ersetzen.

Parse SDK initialisieren

Navigieren Sie anschließend zu Ihrer providers.js und initialisieren Sie Parse wie folgt:

// src/app/providers.js

// ...

import Parse from "parse/dist/parse";

const PARSE_APPLICATION_ID = process.env.NEXT_PUBLIC_PARSE_APPLICATION_ID;
const PARSE_JAVASCRIPT_KEY = process.env.NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY;
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "https://parseapi.back4app.com/";

export function Providers({children}) {
    return (
        // ...
    );
}

Um in allen unseren Ansichten auf die Parse-Instanz zugreifen zu können. Wir werden React-Kontext verwenden.

Erstellen Sie eine neue Datei namens context/parseContext.js und fügen Sie den folgenden Code ein:

// src/app/context/parseContext.js

"use client";

import {createContext} from "react";

const ParseContext = createContext();

export default ParseContext;

Als Nächstes verpacken Sie Ihre gesamte Anwendung mit dem ParseContext und stellen ihm die Parse-Instanz zur Verfügung:

// src/app/providers.js

// ...

import ParseContext from "@/app/context/parseContext";

export function Providers({children}) {
  return (
    <CacheProvider>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <ChakraProvider theme={theme}>
        <ParseContext.Provider value={Parse}>
          {children}
        </ParseContext.Provider>
      </ChakraProvider>
    </CacheProvider>
  );
}

Das war’s! Wir können nun auf die Parse-Instanz zugreifen, indem wir den useContext()-Hook verwenden.

Daten abrufen

Das letzte, was wir tun müssen, ist, Daten aus dem Backend abzurufen. Hierfür verwenden wir Parse.Query. Diese Klasse ist im Grunde ein ORM für Parse-basierte Datenbanken.

Ersetzen Sie zunächst src/app/page.jsx durch den folgenden Text:

// src/app/page.jsx

"use client";

import NextLink from "next/link";
import {useContext, useEffect, useState} from "react";
import ParseContext from "@/app/context/parseContext";
import {Card, CardBody, Heading, Link, Spinner, Stack, Text} from "@chakra-ui/react";

export default function Home() {

  const parse = useContext(ParseContext);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const [articles, setArticles] = useState([]);

  useEffect(() => {
    (async () => {
      try {
        const query = new parse.Query("Article");
        query.descending("createdAt");
        const articles = await query.find();
        setArticles(articles);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    })();
  }, [parse.Query]);

  if (loading) {
    return <Spinner size="lg"/>;
  }

  if (error) {
    return <Text color="red">{error}</Text>;
  }

  return (
    <>
      <Stack>
        {articles.map((article) => (
          <Card key={article.get("slug")}>
            <CardBody>
              <Stack>
                <Heading size="lg">
                  <Link as={NextLink} href={article.get("slug")}>
                    {article.get("title")}
                  </Link>
                </Heading>
                <Text>{article.get("shortContent")}</Text>
              </Stack>
            </CardBody>
          </Card>
        ))}
      </Stack>
    </>
  );
}

1. Wir haben die Parse-Instanz über den useContext()-Hook erhalten.
2. Wir haben einige Status erstellt, darunter Laden, Fehler und Artikel.
3. Wir haben den useEffect()-Hook verwendet, um die Parse.Query auszuführen, wenn die Seite geöffnet wird.
4. Die Parse.Query holt alle Artikel, die nach createdAt geordnet sind.
5. Wir haben die Return-Anweisung geändert, um die Daten zu rendern.

Ersetzen Sie anschließend src/app/[slug]/page.js durch diese Datei:

// src/app/[slug]/page.js

"use client";

import {formatDate} from "@/app/util/date-util";
import {useContext, useEffect, useState} from "react";
import ParseContext from "@/app/context/parseContext";
import {Card, CardBody, Heading, Image, Spinner, Stack, Text} from "@chakra-ui/react";
import ReactMarkdown from "react-markdown";
import ChakraUIRenderer from "chakra-ui-markdown-renderer";

export default function Article({params}) {

  const parse = useContext(ParseContext);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const [article, setArticle] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const query = new parse.Query("Article");
        query.equalTo("slug", params.slug);
        const article = await query.first();
        if (!article) {
          setError("This article does not exist.");
        } else {
          setArticle(article);
        }
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    })();
  }, [params.slug, parse.Query]);

  if (loading) {
    return <Spinner size="lg"/>;
  }

  if (error) {
    return <Text color="red">{error}</Text>;
  }

  return (
    <>
      {article && (
        <Stack>
          <Card>
            <CardBody>
              <Stack>
                <Heading as="h2" size="lg">{article.get("title")}</Heading>
                <Text>Posted on {formatDate(article.get("createdAt"))}</Text>
                {article.get("cover") && (
                  <Image 
                      src={article.get("cover").url()} 
                      alt={`${article.get("title")} cover`} 
                      borderRadius="lg"
                  />
                )}
                <ReactMarkdown 
                    components={ChakraUIRenderer()} 
                    children={article.get("content")} 
                    skipHtml
                />
              </Stack>
            </CardBody>
          </Card>
        </Stack>
      )}
    </>
  );
}

Wir haben die gleichen Konzepte wie im obigen Code verwendet. Der Hauptunterschied zwischen den beiden Codeschnipseln besteht darin, dass wir einen bestimmten Artikel abrufen und nicht alle Artikel in diesem Code.

Und wir sind fertig! Machen Sie weiter und testen Sie das Projekt lokal:

$ next dev

Sobald Sie sicher sind, dass alles funktioniert, übertragen Sie es auf das VCS:

$ git add .
$ git commit -m "connected the frontend with the backend"
$ git push origin master

Back4app Containers wird Ihre Anwendung automatisch mit den neuesten Änderungen neu verteilen.

Schlussfolgerung

Abschließend haben wir erfolgreich eine Full-Stack-Anwendung bei Back4app implementiert. Durch diesen Prozess haben Sie wertvolle Erfahrungen mit dem Hosting des Frontends und des Backends einer Anwendung gesammelt. Sie sollten nun keine Probleme mehr haben, Ihre eigenen Full-Stack-Apps bereitzustellen.

Der endgültige Quellcode ist auf dem back4app-full-stack repo verfügbar und Sie haben gelernt, wo Sie Frontend und Backend hosten können.