Inhaltsverzeichnis

• Einleitung
• Technologien
  • Verwendete Technologien und Frameworks
• Systemaktualisierung und Softwareinstallation
  • Anaconda Installation
  • Entfernung von Apache2 und Installation von NGINX
  • VSCode CLI Installation
  • Firewall-Einrichtung
  • NVM, Node.js und PM2 Installation
  • GitHub Actions Runner Installation
  • Einrichtung von Let's Encrypt
• Systemeinstellungen
  • NextJS Konfigurationsvariablen
  • Verschlüsselungs- und Docker-Variablen
• Architektur
  • Projektstruktur und Quellcode-Verzeichnis
  • Unterverzeichnisse und wichtige Dateien
    • App
    • App/Admin
    • App/API
    • App/Browse
    • App/Create Task
    • App/Tasks
    • App/Your Tasks

Einleitung

PDF-procesor ist eine Webanwendung, die es Benutzern ermöglicht, druckbare PDF-Dokumente aus ihrer DMS (Dokumentenmanagementsystem) zu erstellen. Dieser Service ist Teil des 17025starter-Programms, das von Konsek Engineering & Consulting GmbH angeboten wird.

Technologien

Verwendete Technologien und Frameworks

• Next.js: React-Framework für serverseitiges Rendering und Routing
• TypeScript: Typisierter Übersatz von JavaScript
• Tailwind CSS: Utility-First CSS-Framework
• NextAuth.js: Authentifizierungslösung für Next.js
• Drizzle ORM: TypeScript ORM für SQL-Datenbanken
• Docker: Containerverwaltung für PostgresSQL Datenbank

Systemaktualisierung und Softwareinstallation

Führen Sie die folgenden Befehle aus, um das System zu aktualisieren und die benötigte Software zu installieren:

sudo apt update -y && sudo apt upgrade -y
sudo apt install -y nano git python3-pip docker.io eza

Anaconda Installation

curl https://repo.anaconda.com/archive/Anaconda3-2024.02-1-Linux-x86_64.sh --output anaconda.sh
bash anaconda.sh

Entfernung von Apache2 und Installation von NGINX

sudo systemctl stop apache2
sudo apt purge apache2 -y
sudo apt autoremove -y
sudo apt install -y nginx

VSCode CLI Installation

curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz
tar -xf vscode_cli.tar.gz

Firewall-Einrichtung

Folgen Sie der Anleitung zur Einrichtung der Firewall: Firewall einrichten

NVM, Node.js und PM2 Installation

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
source ~/.bashrc
nvm install --lts
nvm use --lts
npm install pm2 -g

GitHub Actions Runner Installation

Github Action benötigt ein Standarduser Folgen Sie der Anleitung zur Installation des GitHub Actions Runners:

• GitHub Actions
  • Understanding GitHub Actions
  • Variables
• Managing Deploy Keys

Einrichtung von Let's Encrypt

Folgen Sie der Anleitung zur Einrichtung von Let's Encrypt: Let's Encrypt

Systemeinstellungen

NextJS Konfigurationsvariablen

• DATABASE_URL = URL Ihrer Datenbank
• NEXTAUTH_URL = URL Ihrer Anwendung für NextAuth
• NEXT_PUBLIC_API_URL = URL Ihrer Anwendung für NextAuth
• NEXTAUTH_SECRET = Geheimer Schlüssel für NextAuth
• GOOGLE_CLIENT_ID = Für das Login mit Google.
• GOOGLE_CLIENT_SECRET = Für das Login mit Google.

Verschlüsselungs- und Docker-Variablen

• ENCRYPTION_KEY = Schlüssel für das Verschlüsseln.
• ENCRYPTION_IV = Schlüssel für das Verschlüsseln.
• DB_HOST = Datenbank Host
• DB_NAME = Datenbank Name
• DB_USER = Datenbank Username
• DB_PASSWORD = Datenbank Passwort.

Architektur

Projektstruktur und Quellcode-Verzeichnis

• /src: Enthält den Quellcode der Anwendung
  • /app: Next.js App Router und Seitenkomponenten
  • /components: Wiederverwendbare React-Komponenten
  • /lib: Hilfsfunktionen und Dienstprogramme
  • /data-access: Datenbankzugriff und Datenmodelle

Unterverzeichnisse und wichtige Dateien

App

• layout.tsx - Haupt-Layout-Komponente
• page.tsx - Hauptseiten-Komponente
• header.tsx - Header-Komponente
• not-found.tsx - 404-Seiten-Komponente
• error.tsx - Fehlerseiten-Komponente
• globals.css - Globale CSS-Stile

App/Admin

• actions.ts - Admin-Aktionen
• create-user-form.tsx - Formular zum Erstellen von Benutzern
• page.tsx - Admin-Hauptseite

App/API

• options.ts - NextAuth Optionen
• route.ts - NextAuth API-Route
• route.ts - Download API-Route
• route.ts - Benutzer API-Route

App/Browse

• actions.ts - Browse-Aktionen
• page.tsx - Browse-Hauptseite
• task-card.tsx - Aufgabenkarten-Komponente

App/Create Task

• actions.ts - Aktionen zum Erstellen von Aufgaben
• create-task-form.tsx - Formular zum Erstellen von Aufgaben
• page.tsx - Seite zum Erstellen von Aufgaben

App/Tasks

• TaskView.tsx - Detailansicht einer Aufgabe
• actions.ts - Aufgaben-bezogene Aktionen

App/Your Tasks

• actions.ts - Aktionen für Benutzeraufgaben
• page.tsx - Seite zur Anzeige von Benutzeraufgaben
• user-task-card.tsx - Komponente für Benutzeraufgabenkarten