10 Minuten vom ersten Code bis zum Live-Deployment: Ein super-schneller Nest.js Blog-Kurs

Dies ist ein Crashkurs zu Nest.js. In diesem Tutorial bauen wir in nur wenigen einfachen Schritten, in weniger als 10 Minuten, einen Blog vom ersten Code bis zum Deployment.

Der Grund, warum es so schnell geht, ist, dass dieses Tutorial nicht auf detaillierte Erklärungen des Prozesses eingeht. Stattdessen führt es Sie direkt zum Erstellen eines fertigen Produkts. Ich glaube, dass das Erlernen eines Frameworks schneller geht, indem man ein bestehendes Projekt modifiziert, um es an die eigenen Bedürfnisse anzupassen.

Dieser Blog besteht aus 3 funktionalen Modulen, die einen gängigen Technologie-Stack für ein reines Node.js-Backend-Projekt darstellen:

• Nest.js
• PostgreSQL als Datenbank
• ejs zum Rendern von Seiten

Ohne weitere Umschweife, legen wir los:

1. Projekt initialisieren

Nest.js-Projekte sind stark auf das CLI-Tool für die Projektverwaltung angewiesen. Installieren wir zuerst das Nest.js CLI.

$ npm i -g @nestjs/cli

Verwenden Sie das CLI, um ein neues Projekt zu erstellen.

$ nest new personal-blog

Dies erstellt einen neuen Ordner namens personal-blog und installiert alle notwendigen Abhängigkeiten. Öffnen Sie dieses Verzeichnis in Ihrem bevorzugten Editor, um offiziell mit der Bearbeitung zu beginnen.

2. Verbindung zur PostgreSQL-Datenbank herstellen

Als Nächstes integrieren wir eine PostgreSQL-Datenbank. Gemäß der offiziellen Empfehlung verwenden wir TypeORM als ORM. Die Rolle eines ORM ist es, die Datenbank in den Code zu integrieren.

Abhängigkeiten installieren

npm install @nestjs/typeorm typeorm pg

• @nestjs/typeorm: Das offizielle Nest.js-Modul für TypeORM, das TypeORM für Nest.js adaptiert.
• typeorm: Die TypeORM-Bibliothek selbst.
• pg: Der Node.js-Treiber für PostgreSQL, der es Node.js ermöglicht, in PostgreSQL zu lesen und zu schreiben.

Datenbank einrichten

Um das Tutorial zu beschleunigen, überspringen wir den Schritt der Installation und Einrichtung einer Datenbank lokal. Stattdessen provisionieren wir direkt eine Online-Datenbank.

Wir können eine kostenlose Datenbank mit einem Klick auf Leapcell erstellen.

Nachdem Sie ein Konto auf der Website registriert haben, klicken Sie auf "Create Database".

Geben Sie einen Datenbanknamen ein, wählen Sie eine Bereitstellungsregion und Sie können die PostgreSQL-Datenbank erstellen.

Auf der neuen Seite, die erscheint, finden Sie die benötigten Informationen zur Verbindung mit der Datenbank. Unten ist ein Kontrollfeld vorgesehen, mit dem Sie die Datenbank direkt auf der Webseite lesen und ändern können.

Datenbankverbindung konfigurieren

Öffnen Sie die Datei src/app.module.ts und importieren Sie TypeOrmModule.

Füllen Sie die Verbindungsinformationen mit der Datenbankkonfiguration von Leapcell aus. Beachten Sie, dass ssl auf true gesetzt werden muss, sonst schlägt die Verbindung fehl.

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'postgres',
      host: 'your_leapcell_host', // Ersetzen Sie dies durch Ihren Leapcell-Host
      port: 5432,
      username: 'your_postgres_username', // Ersetzen Sie dies durch Ihren PostgreSQL-Benutzernamen
      password: 'your_postgres_password', // Ersetzen Sie dies durch Ihr PostgreSQL-Passwort
      database: 'personal_blog_db', // Ersetzen Sie dies durch Ihren Datenbanknamen
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: true, // Setzen Sie dies in der Entwicklung auf true, es synchronisiert das Datenbankschema automatisch
      ssl: true, // Erforderlich für Dienste wie Leapcell
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Erstellen des Posts-Moduls

Als Nächstes erstellen wir ein Modul zur Verwaltung von Blog-Posts.

Sie können das Nest CLI verwenden, um die benötigten Dateien schnell zu generieren:

nest generate module posts
nest generate controller posts
nest generate service posts

Danach müssen wir die Post-Entitätsdatei erstellen, um sie mit der Datenbank zu verbinden. Erstellen Sie im Verzeichnis src/posts eine Datei namens post.entity.ts:

// src/posts/post.entity.ts
import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn } from 'typeorm';

@Entity()
export class Post {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column()
  title: string;

  @Column('text')
  content: string;

  @CreateDateColumn()
  createdAt: Date;
}

Als Nächstes müssen wir die Verbindung zur Datenbank herstellen.

Registrieren Sie TypeOrmModule im PostsModule: Öffnen Sie src/posts/posts.module.ts und importieren Sie TypeOrmModule.forFeature([Post]).

// src/posts/posts.module.ts
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { PostsController } from './posts.controller';
import { PostsService } from './posts.service';
import { Post } from './post.entity';

@Module({
  imports: [TypeOrmModule.forFeature([Post])],
  controllers: [PostsController],
  providers: [PostsService],
})
export class PostsModule {}

Gehen Sie zur Seite mit den Datenbankdetails auf Leapcell und führen Sie den folgenden Befehl im Web-Editor aus, um die entsprechende Tabelle zu generieren.

CREATE TABLE "post" (
    "id" UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    "title" VARCHAR NOT NULL,
    "content" TEXT NOT NULL,
    "createdAt" TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

Schließlich müssen wir den PostsService erstellen. Der PostsService ist für die gesamte Geschäftslogik im Zusammenhang mit Posts zuständig. Öffnen Sie src/posts/posts.service.ts und fügen Sie den folgenden Code hinzu:

// src/posts/posts.service.ts
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Post } from './post.entity';

@Injectable()
export class PostsService {
  constructor(
    @InjectRepository(Post)
    private postsRepository: Repository<Post>
  ) {}

  findAll(): Promise<Post[]> {
    return this.postsRepository.find({
      order: {
        createdAt: 'DESC',
      },
    });
  }

  findOne(id: string): Promise<Post> {
    return this.postsRepository.findOneBy({ id });
  }

  async create(post: Partial<Post>): Promise<Post> {
    const newPost = this.postsRepository.create(post);
    return this.postsRepository.save(newPost);
  }
}

EJS für die Seiten-Renderung einrichten

Jetzt richten wir EJS ein, damit wir dynamische HTML-Seiten rendern können.

Abhängigkeiten installieren

npm install ejs

Die View-Engine integrieren

Öffnen Sie die Datei src/main.ts und ändern Sie sie wie folgt:

// src/main.ts
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('ejs');

  await app.listen(3000);
}
bootstrap();

Erstellen Sie im Stammverzeichnis des Projekts (auf derselben Ebene wie src) die Ordner views und public:

- personal-blog
    - src
    - views
    - public

Frontend-Seiten implementieren

Erstellen Sie die folgenden Dateien im Ordner views:

• _header.ejs (Wiederverwendbarer Header)

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title><%= title %></title>
      <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>
      <header>
        <h1><a href="/">My Blog</a></h1>
        <a href="/posts/new" class="new-post-btn">New Post</a>
      </header>
      <main></main>
    </body>
  </html>

• _footer.ejs (Wiederverwendbarer Footer)

      </main>
      <footer>
          <p>&copy; 2025 My Blog</p>
      </footer>
  </body>
  </html>

• index.ejs (Blog-Homepage)

  <%- include('_header', { title: 'Home' }) %>
  
  <div class="post-list">
    <% posts.forEach(post => { %>
    <article class="post-item">
      <h2><a href="/posts/<%= post.id %>"><%= post.title %></a></h2>
      <p><%= post.content.substring(0, 150) %>...</p>
      <small><%= new Date(post.createdAt).toLocaleDateString() %></small>
    </article>
    <% })
    %>
  </div>
  
  <%- include('_footer') %>

• post.ejs (Detailseite des Posts)

  <%- include('_header', { title: post.title }) %>
  
  <article class="post-detail">
    <h1><%= post.title %></h1>
    <small><%= new Date(post.createdAt).toLocaleDateString() %></small>
    <div class="post-content"><%- post.content.replace(/\n/g, '<br />') %></div>
  </article>
  <a href="/" class="back-link">&larr; Zurück zur Startseite</a>
  
  <%- include('_footer') %>

• new-post.ejs (Seite für neue Posts)

  <%- include('_header', { title: 'New Post' }) %>
  
  <form action="/posts" method="POST" class="post-form">
    <div class="form-group">
      <label for="title">Titel</label>
      <input type="text" id="title" name="title" required />
    </div>
    <div class="form-group">
      <label for="content">Inhalt</label>
      <textarea id="content" name="content" rows="10" required></textarea>
    </div>
    <button type="submit">Absenden</button>
  </form>
  
  <%- include('_footer') %>

2. CSS-Stile hinzufügen

Fügen Sie einige einfache Stile in public/css/style.css hinzu:

/* public/css/style.css */
body {
  font-family: sans-serif;
  line-height: 1.6;
  margin: 0;
  background-color: #f4f4f4;
  color: #333;
}
header {
  background: #333;
  color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header a {
  color: #fff;
  text-decoration: none;
}
main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  background: #fff;
  border-radius: 5px;
}
.post-item {
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}
.post-item h2 a {
  text-decoration: none;
  color: #333;
}
.post-detail .post-content {
  margin-top: 1rem;
}
.new-post-btn {
  background: #5cb85c;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}
.post-form .form-group {
  margin-bottom: 1rem;
}
.post-form label {
  display: block;
  margin-bottom: 0.5rem;
}
.post-form input,
.post-form textarea {
  width: 100%;
  padding: 0.5rem;
}
.post-form button {
  background: #337ab7;
  color: #fff;
  padding: 0.7rem 1.5rem;
  border: none;
  cursor: pointer;
}
footer p {
  text-align: center;
}

Backend mit den Frontend-Seiten verbinden

Aktualisieren Sie src/posts/posts.controller.ts, um HTTP-Anfragen zu bearbeiten und EJS-Templates zu rendern.

// src/posts/posts.controller.ts
import { Controller, Get, Render, Param, Post, Body, Res } from '@nestjs/common';
import { PostsService } from './posts.service';
import { Response } from 'express';

@Controller('posts')
export class PostsController {
  constructor(private readonly postsService: PostsService) {}

  @Get()
  @Render('index')
  async root() {
    const posts = await this.postsService.findAll();
    return { posts };
  }

  @Get('new')
  @Render('new-post')
  newPostForm() {
    return;
  }

  @Post()
  async create(@Body() body: { title: string; content: string }, @Res() res: Response) {
    await this.postsService.create(body);
    res.redirect('/posts');
  }

  @Get(':id')
  @Render('post')
  async post(@Param('id') id: string) {
    const post = await this.postsService.findOne(id);
    return { post };
  }
}

Aktualisieren Sie als Nächstes src/app.controller.ts, um den Root-Pfad / auf die Blog-Homepage umzuleiten.

// src/app.controller.ts
import { Controller, Get, Res } from '@nestjs/common';
import { Response } from 'express';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  root(@Res() res: Response) {
    return res.redirect('/posts');
  }
}

Den Blog ausführen

Führen Sie den folgenden Befehl in Ihrem Terminal aus, um den Blog zu starten:

npm run start:dev

Öffnen Sie http://localhost:3000 in Ihrem Browser, um die Blog-Seite zu sehen. Sie können versuchen, einen neuen Beitrag zu schreiben!

Jetzt können Sie die Website und die API nach Belieben ändern und dabei Ihr Verständnis von Nest.js vertiefen.

Den Blog online bereitstellen

Jetzt denken Sie vielleicht: Wie kann ich die von mir erstellte Website anderen zeigen, damit jeder darauf zugreifen kann?

Erinnern Sie sich an Leapcell, das wir zuvor verwendet haben, um die Datenbank zu erstellen? Leapcell kann mehr als nur Datenbanken erstellen; es ist auch eine Web-App-Hosting-Plattform, die Projekte in verschiedenen Sprachen und Frameworks hosten kann, einschließlich Nest.js.

Befolgen Sie die unten stehenden Schritte:

1. Committen Sie Ihr Projekt auf GitHub. Sie können sich auf die offizielle Dokumentation von GitHub für die Schritte beziehen. Leapcell wird den Code später aus Ihrem GitHub-Repository ziehen.
2. Klicken Sie auf der Leapcell-Seite auf "Create Service".
3. Nachdem Sie Ihr Nest.js-Repository ausgewählt haben, sehen Sie, dass Leapcell die notwendigen Konfigurationen automatisch ausgefüllt hat.
4. Klicken Sie unten auf "Submit", um die Bereitstellung zu starten. Das Deployment wird schnell abgeschlossen und Sie werden zur Deployment-Homepage zurückgeleitet. Hier sehen wir, dass Leapcell eine Domain bereitgestellt hat. Dies ist die Online-Adresse Ihres Blogs.

Jetzt können Sie diesen Link mit Ihren Freunden teilen, und jeder kann Ihren Blog online sehen!