Selbst-Hosting einer Astro-Website mit Node.js

Selbst-Hosting einer Astro-Website mit Node.js

Wer nicht die Angebote von Netlify und Co. benutzen möchte, sei es wegen monatlicher Kosten oder einfach nur weil es sich um eine kleine (Test)-Umgebung handelt, kann den erstellten Code auch auf einer vorhandenen Linux-Instanz laufen lassen. Dieses Tutorial beschreibt das lokale Hosting eines solchen Astro-Codes mit Server-Side-Rendering.

Benötigt wird dies immer dann, wenn Astro keine statischen Seiten generiert (SSG), sondern im Server-Side-Rendering-Modus (SSR) betrieben wird:

export default defineConfig({
  output: "server",
...

astro.config.mjs

Dies wird nötig, wenn dynamische Inhalte generiert werden. Astro ist in dieser Domäne nicht so stark wie Next.JS, der Funktionsumfang wird allerdings immer größer.

Um Inhalt für Node.JS generieren zu können, muss dies ebenso in der Astro-Konfiugrationsdatei angegeben werden:

export default defineConfig({
  output: "server",

  adapter: node({
    mode: 'standalone',
  }),
...

astro.config.mjs

Ist dies geschehen, kann der die Codegenerierung mit

$ npm run build

ausgeführt werden. Nun kann entweder der dist-Ordner woandershin verschoben werden oder im gleichen Verzeichnis weitergearbeitet werden. Wir entscheiden uns hier für das Weiterarbeiten im gleichen Verzeichnis. Anhand der Astro-Dokumentation wird nun ein Express-Server konfiguriert:

import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = express();
// Change this based on your astro.config.mjs, `base` option.
// They should match. The default value is "/".
const base = '/';
app.use(base, express.static('dist/client/'));
app.use(ssrHandler);

app.listen(8080, 'localhost');

run-server.mjs

Wichtig hierbei ist das "localhost" hinter dem Port, denn es empfiehlt sich dringend einen Reverse-Proxy mit TLS-Handling einzusetzen. Wie man einen solchen Reverse-Proxy konfiguriert, ist hier beschrieben:

Gitlab mit Reverse-Proxy

Nun wird der Server mit

$ npm run-server.mjs

Gestartet. Möchte man diesen Server dann noch unattended laufen lassen, empfiehlt sich das Paket pm2. Für die Installation wird folgender Befehl ausgeführt:

$ npm install pm2 -g

Damit pm2 beim Systemstart ebenso startet, wird mit

$ pm2 startup

Der Befehl generiert, welcher das Startskript generiert. Dieser wird dann in die Konsole mit sudo eingefügt und ausgeführt. Als letzten Schritt kann nun der Server aufgesetzt werden:

pm2 start run-server.mjs

Nun ist die in Astro generierte Seite immer zu erreichen. Für eine dauernde Weiterentwicklung des Projekts empfiehlt sich ab dem Initial-Release eine Versionsverwaltung mit Git.

Oliver Lott

Oliver Lott

Vielen Dank fürs Lesen! Benötigen Sie Hilfe? Ich helfe Ihnen gerne. Schreiben Sie mir einfach eine Mail oder benutzen Sie das Kontaktformular.