Deno Dev Container in GitHub Codespaces einrichten?

Artikel von

18. Juli 2024

0 Min. Lesezeit

Wenn Sie nach Anleitungen und Tutorials für den Einstieg in die Deno-Webentwicklung in einer Cloud-IDE wie GitHub Codespaces gesucht haben, sind Sie hier genau richtig.

In diesem Beitrag tauchen wir in die Welt von Deno, GitHub Codespaces und Dev Containers ein. Sie erfahren, wie Sie Ihre Entwicklungsumgebung in der Cloud effektiv einrichten. Der Beitrag richtet sich an Entwicklerinnen und Entwickler, insbesondere an alle, die mit dem JavaScript- und Node.js-Ökosystem arbeiten.

Was ist Deno? Eine kurze Einführung

Deno ist eine sichere Laufzeitumgebung für JavaScript und TypeScript. Sie wurde mit Rust entwickelt und soll einige Schwächen von Node.js beheben. Entwickelt wurde sie von Ryan Dahl, dem ursprünglichen Entwickler von Node.js. Zu den wesentlichen Unterschieden zählen die integrierte TypeScript-Unterstützung, ein integrierter Paketmanager und eine höhere Sicherheit durch Sandboxing.

1// Example of a simple Deno script
2import { serve } from "https://deno.land/std@0.76.0/http/server.ts";
3const s = serve({ port: 8000 });
4console.log("http://localhost:8000/");
5for await (const req of s) {
6  req.respond({ body: "Hello World\n" });
7}
8

Der obige Code ist ein einfacher HTTP-Server, der mit Deno geschrieben wurde. Beachten Sie, dass wir die Funktion serve direkt über eine URL importieren. Das ist eine der Besonderheiten von Deno: Module werden über URLs eingebunden. Dadurch sind weder eine package.json-Datei noch das Verzeichnis node_modules erforderlich.

Was ist GitHub Codespaces?

GitHub Codespaces ist eine Entwicklungsumgebung, in der Sie vollständig in der Cloud arbeiten können. Sie bietet Ihnen eine voll ausgestattete, in der Cloud gehostete Entwicklungsumgebung, die direkt in GitHub innerhalb weniger Sekunden gestartet wird. So können Sie direkt über Ihren Webbrowser zu Projekten beitragen, Code überprüfen oder Merge-Konflikte beheben, ohne etwas auf Ihrem lokalen Rechner einrichten zu müssen.

Was sind Dev Containers?

Dev Containers (Development Containers) sind Teil der Visual Studio Code-Erweiterung Remote - Containers. Damit können Sie eine Entwicklungsumgebung mithilfe einer Datei namens devcontainer.json als Code definieren und Ihr Projekt anschließend in einem isolierten Docker-Container ausführen. So erhalten Sie eine einheitliche, reproduzierbare Entwicklungsumgebung, die Sie mit Ihrem Team teilen können. Damit gehört das Problem „Bei mir funktioniert es“ der Vergangenheit an. ;-)

// Example of a devcontainer.json file
{
  "name": "My Project",
  "dockerFile": "Dockerfile",
  "appPort": [3000],
  "extensions": ["dbaeumer.vscode-eslint"]
}

Diese Datei devcontainer.json definiert einen Dev Container für ein einfaches JavaScript-Projekt. Sie legt fest, dass zum Erstellen des Containers die Dockerfile im selben Verzeichnis verwendet, Port 3000 weitergeleitet und die ESLint-Erweiterung im Container installiert werden soll.

Hier sehen Sie ein weiteres Beispiel für eine devcontainer.json-Datei, die Sie in das Repository Ihres Projekts committen können.

{
    "name": "My Project",
    "dockerFile": "Dockerfile",
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },
    "extensions": ["dbaeumer.vscode-eslint"],
    "postCreateCommand": "yarn install"
}

Im obigen Beispiel weist die Datei devcontainer.json Visual Studio Code oder GitHub Codespaces an, mithilfe der Dockerfile im selben Verzeichnis einen neuen Docker-Container zu erstellen. Als Standard-Shell für das Terminal wird Bash festgelegt und die Erweiterung eslint installiert. Der Befehl postCreateCommand wird nach dem Erstellen des Containers ausgeführt. In diesem Fall führt er yarn install aus, um die Abhängigkeiten des Projekts zu installieren.

Welche Probleme Dev Containers für Entwickler lösen

Dev Containers bieten unter anderem folgende Vorteile:

Einheitliche Entwicklungsumgebungen – Traditionell mussten Entwickler Software manuell auf ihren Rechnern installieren und konfigurieren, um eine Entwicklungsumgebung einzurichten. Das kann zum sogenannten „Bei mir funktioniert es“-Problem führen: Der Code läuft auf dem Rechner eines Entwicklers einwandfrei, auf dem eines anderen jedoch nicht, weil sich die Entwicklungsumgebungen unterscheiden. Dev Containers lösen dieses Problem, indem sie die Entwicklungsumgebung als Code definieren. Dadurch arbeiten alle am Projekt beteiligten Entwickler in derselben Umgebung.
Einfacheres Onboarding für Entwickler – Neue Entwickler in ein Projekt einzuarbeiten, kann zeitaufwendig sein. Dazu muss ihre Entwicklungsumgebung eingerichtet und sichergestellt werden, dass alle erforderlichen Softwareversionen installiert sind. Mit Dev Containers wird dieser Prozess erheblich vereinfacht. Neue Entwickler müssen lediglich das Projekt klonen und in Visual Studio Code oder GitHub Codespaces öffnen. Anschließend wird die Entwicklungsumgebung anhand der Datei devcontainer.json automatisch eingerichtet.
Optimierte CI/CD-Prozesse – Dev Containers unterstützen nicht nur Entwickler, sondern können auch den Continuous-Integration-/Continuous-Deployment-Prozess (CI/CD) optimieren. Da die Entwicklungsumgebung als Code definiert ist, kann sie als Grundlage für die CI/CD-Umgebung dienen. So wird sichergestellt, dass der Code in einer Umgebung getestet und bereitgestellt wird, die mit der Entwicklungsumgebung identisch ist.

Zusammenfassend lässt sich sagen: Dev Containers sind ein leistungsstarkes Werkzeug, um einheitliche, reproduzierbare Entwicklungsumgebungen sicherzustellen. Wenn Sie Deno in GitHub Codespaces einrichten, ist es wichtig, die Rolle und Vorteile von Dev Containers zu kennen.

Deno in GitHub Codespaces einrichten

Mit Deno in GitHub Codespaces können Sie Ihre Deno-Anwendungen flexibel und effizient direkt im Browser schreiben, ausführen und debuggen.

Voraussetzungen für die Einrichtung von Deno

Stellen Sie vor dem Start sicher, dass Sie Folgendes haben:

Ein GitHub-Konto.
Zugriff auf GitHub Codespaces. Weitere Informationen dazu finden Sie in der Dokumentation zu GitHub Codespaces.
Grundkenntnisse zu Deno und seiner Umgebung. Wenn Sie Deno noch nicht kennen, lesen Sie die offizielle Deno-Dokumentation.
Ein auf GitHub gehostetes Deno-Code-Repository

GitHub Codespace starten

Auch wenn Ihr aktuelles Code-Repository keine Dev-Container-Konfiguration enthält (erkennbar daran, dass sich im Stammverzeichnis kein Verzeichnis .devcontainer/ befindet), können Sie einen GitHub Codespace starten. Dabei wird eine standardmäßige Cloud-Entwicklungsumgebung für Sie erstellt.

Suchen Sie in der GitHub-Weboberfläche auf der Hauptseite des Repositorys die Schaltfläche Code, wechseln Sie zum Untertab Codespaces und wählen Sie die Option zum Erstellen eines Codespace.

devcontainer.json für die Deno-Entwicklung erstellen

Um eine Entwicklungsumgebung für Deno einzurichten, müssen Sie im Verzeichnis .devcontainer Ihres Repositorys eine Datei namens devcontainer.json erstellen.

Leider bietet das Deno-Projekt keine offizielle Unterstützung für Dev Containers, die sich direkt mit VS Code und GitHub Codespaces verwenden ließen. Entwickler haben im März 2023 auf diesen fehlenden Deno Dev Container hingewiesen. Vielleicht wird es ihn irgendwann geben.

Aber geben Sie die Hoffnung nicht auf: Dank einer Entwickler-Community müssen Sie die Dev-Container-Konfigurationsdatei nicht von Grund auf neu schreiben. Sie finden eine von der Community gepflegte Liste mit Features, die Sie hinzufügen können.

Führen Sie die folgenden Schritte aus, um den von der Community gepflegten Deno Dev Container hinzuzufügen:

Drücken Sie im GitHub Codespace CMD+SHIFT+P, um die VS Code-Befehlspalette zu öffnen.
Wählen Sie Codespaces: Add a Dev Container Configuration Files… und, falls Sie dazu aufgefordert werden, Create a new configuration.
Nach wenigen Sekunden wird Ihnen eine Liste vorkonfigurierter Dev-Container-Konfigurationen angezeigt.
Wählen Sie „Show all definitions“, dann „Node.js & TypeScript“ und anschließend „bulleyes“ als Docker-Basisimage.
Geben Sie zum Schluss „Deno“ ein, wählen Sie die Option „Deno (via GitHub Releases)“ und danach „Keep defaults“.

Deno-Dev-Container in GitHub Codespaces erstellen

Sobald Sie diese Auswahl bestätigt haben, öffnet die VS Code-IDE im Repository eine neu erstellte Datei unter .devcontainer/devcontainer.json, die folgenden Inhalt hat:

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
	"name": "Node.js & TypeScript",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
	"features": {
		"ghcr.io/devcontainers-contrib/features/deno:1": {}
	}

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

Committen Sie die Datei in das Repository und starten Sie den GitHub Codespace neu, damit die neue Deno-Dev-Container-Entwicklungsumgebung eingerichtet wird:

Öffnen Sie erneut mit CMD+SHIFT+P die VS Code-Befehlspalette.
Wählen Sie Codespaces: Full Rebuild Container.

Bestätigen Sie Ihre Auswahl. Die Seite wird mit der neu eingerichteten Umgebung neu geladen:

Codespace-Einrichtungsbildschirm mit einem gefundenen Image, einem fehlgeschlagenen Container-Build und einem Wiederherstellungsversuch.

Deno Dev Container testen

Sobald die neue Deno-Dev-Container-Entwicklungsumgebung bereit ist, öffnen Sie den Bereich Terminal. Dort können Sie überprüfen, ob die Versionen von Node.js und Deno korrekt eingerichtet und einsatzbereit sind:

Deno-Dev-Container-Entwicklungsumgebung in GitHub Codespaces

Empfohlene VS Code-Erweiterungen für Deno und TypeScript

Wenn Sie VS Code verwenden, kennen Sie wahrscheinlich bereits die zahlreichen Erweiterungen und ihre Vorteile für effizientere Softwareentwicklung. Sie bieten zusätzliche Funktionen, verbessern den Entwicklungsworkflow und können das Programmieren angenehmer und produktiver machen.

Denken Sie daran: VS Code-Erweiterungen sind Plugins, die die Kernfunktionen des Editors ergänzen. Sie werden größtenteils von der Community entwickelt und bereitgestellt und sollten sorgfältig geprüft werden, um Malware und Sicherheitsprobleme zu vermeiden. Ich spreche das an, weil eine Sicherheitsstudie von Snyk aus dem Jahr 2021 zahlreiche Sicherheitslücken in VS Code-Erweiterungen aufgedeckt hat. Installieren Sie IDE-Erweiterungen daher mit Bedacht.

Code-Linter für die Deno-Entwicklung

Das Deno-Ökosystem ist noch relativ jung, hat sich aber rasch weiterentwickelt. Inzwischen gibt es eine wachsende Auswahl an VS Code-Erweiterungen, die auf die besonderen Funktionen von Deno zugeschnitten sind. Hier sind einige Empfehlungen für die Deno-Entwicklung:

Deno (denoland.vscode-deno): Dies ist die offizielle VS Code-Erweiterung für Deno. Sie bietet IntelliSense, Linting, Formatierung und Debugging für Deno-Projekte. Anhand der Datei deno.json oder deno.jsonc im Stammverzeichnis des Arbeitsbereichs erkennt die Erweiterung automatisch die Projektkonfiguration.
```
   {
       "compilerOptions": {
           "lib": ["deno.ns", "deno.unstable"]
       }
   }
```
Am besten fügen Sie der Datei devcontainer.json ein Feld extensions hinzu, um die VS Code-Erweiterung denoland.vscode-deno in einem Dev Container zu verwenden. Ergänzen Sie dann denoland.vscode-deno im Array extensions dieser Datei.

So können Sie sie konfigurieren:
```
{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
  "extensions": [
    "denoland.vscode-deno"
  ]
}
```
Mit dieser Konfiguration installiert VS Code die Erweiterung denoland.vscode-deno automatisch im Dev Container, wenn Sie Ihr Projekt in einem Container öffnen.
Deno Standard Library Snippets (justjavac.vscode-deno): Diese Erweiterung bietet praktische Code-Snippets für die Deno-Standardbibliothek. Damit können Sie die offiziellen Deno-Module einfacher in Ihrem Projekt verwenden.

Codesicherheit für Deno mit Snyk

Angesichts der zunehmenden Komplexität von Softwareanwendungen und der verbreiteten Nutzung von Open-Source-npm-Bibliotheken bei der Entwicklung mit Node.js und Deno ist Codesicherheit wichtiger denn je. Eine einzige Sicherheitslücke in Ihrem Code kann schwerwiegende Folgen haben, darunter Datenschutzverletzungen, finanzielle Verluste und ein beschädigter Markenruf.

Bei einer sicheren Codebasis geht es nicht nur darum, Angriffe zu verhindern, sondern auch darum, Vertrauen bei Ihren Nutzern aufzubauen. Sie müssen wissen, dass ihre Daten sicher sind und die verwendete Software mit Blick auf ihre Sicherheit entwickelt wurde.

In der JavaScript-Welt – ob Node.js, Deno oder sogar Bun – verwenden Entwickler zahlreiche Bibliotheken und Pakete, um die Entwicklung zu beschleunigen und Anwendungen effizienter zu machen. Doch jede zusätzliche Abhängigkeit von Drittanbietern aus der npm-Registry birgt ein potenzielles Risiko. Hier kommt Snyk ins Spiel.

Snyk ist ein sicherheitsorientiertes Tool für Entwickler, mit dem sich Schwachstellen in Open-Source-Abhängigkeiten und im eigenen Code finden und beheben lassen.

Möchten Sie Sicherheitslücken in Ihrem Deno-Code und seinen verschachtelten Abhängigkeiten finden? Installieren und aktivieren Sie die Snyk VS Code-Erweiterung im Deno Dev Container:

{
  "name": "...",
  "image": "...",
  "extensions": [
    "snyk-security.snyk-vulnerability-scanner"
  ]
}

Anschließend erhalten Sie nahtloses Sicherheits-Linting in Echtzeit direkt in Ihrem Code. Snyk kann darin verwundbare Codepfade erkennen, zum Beispiel die folgende SQL-Injection in einem Node.js-Code:

Wenn Sie mehr über sicheres Programmieren und SQL-Injections erfahren möchten, empfehle ich Ihnen dieses kurze, interaktive Snyk Learn-Tutorial zur Codesicherheit für JavaScript-Entwickler.

Erweiterungen für die Deno-TypeScript-Entwicklung

TypeScript ist eine statisch typisierte Obermenge von JavaScript, die der Sprache optionale Typen, Klassen und Module hinzufügt. Sie wird in der modernen Webentwicklung häufig verwendet, und zahlreiche VS-Code-Erweiterungen unterstützen und verbessern die TypeScript-Entwicklung:

TypeScript Hero (rbbit.typescript-hero): TypeScript Hero bietet erweiterte TypeScript-Funktionen wie automatische Imports, Codegenerierung und Refactoring.
TSLint (ms-vscode.vscode-typescript-tslint-plugin): TSLint ist ein Linter für TypeScript. Es setzt Regeln für den Codierungsstil durch und hilft dabei, häufige Fehler früh im Entwicklungsprozess zu erkennen.
Prettier - Code formatter (esbenp.prettier-vscode): Prettier ist ein meinungsstarker Code-Formatter. Mit TypeScript lässt sich Ihr Code damit automatisch einheitlich formatieren.

Um Prettier für TypeScript zu aktivieren, fügen Sie Ihrer Datei .prettierrc die folgende Konfiguration hinzu:

   {
       "semi": true,
       "trailingComma": "all",
       "singleQuote": true,
       "printWidth": 80,
       "tabWidth": 2
   }

Denken Sie daran: Die von Ihnen ausgewählten Erweiterungen sollten zu den Anforderungen Ihres Projekts und Ihrem Codierungsstil passen. Diese empfohlenen Erweiterungen sind nur ein Ausgangspunkt, um die Möglichkeiten von VS Code, Deno, Snyk und TypeScript zu erkunden.