j1n
j1n

Dockerimage für eine Hugo Webseite erstellen

Kombination aus Traefik-, Docker- und Hugo-logo

Du hast eine Hugo-Webseite erstellt und möchtest diese nun mithilfe von Docker deployen? Dann wird dir dieser Guide das folgende zeigen.

  • Erstellung des Dockerfile.
  • Image-Erstellung und lokales testen.
  • Prozessautomatisierung mit Gitlab-Pipelines und Docker Hub (optional).

Voraussetzungen

Dockerfile erstellen

Als Erstes brauchen wir ein Dockerfile innerhalb unseres Projektes, mit dem wir ein Image erstellen können. Das Dockerfile muss im Root-Verzeichnis unseres Projektes abgelegt sein.

Vorlage

Ich nutze dieses Dockerfile für eine Hugo-Anwendung, die auf dem Theme doks basiert.

# Wir nutzen ein Image, in dem Hugo bereits vorhanden ist
FROM hugomods/hugo:exts-0.118.2

# Erstelle einen Ordner für unser Projekt
WORKDIR /app

# Kopiere die Dateien in das WORKDIR
COPY . .

# Erstelle ein ARG Argument für die BASE_URL der
# Hugo-Anwendung mit einem Defaultwert
ARG BASE_URL=http://localhost/

# Nutze die BASE_URL, falls als ENV-Parameter vorhanden
ENV BASE_URL=$BASE_URL

# Weil wir Docker nutzen, brauchen wir die postinstall scripts nicht.
# Npm install ist notwendig, wenn man ein hyas-Theme wie doks benutzt.
# Nutzt du kein hyas-Theme muss auch kein npm install ausgeführt werden.
RUN npm install --ignore-scripts

RUN hugo --baseURL=$BASE_URL

FROM nginx:alpine

# Kopiere den generierten Inhalt der Hugo-Website
# in das Nginx-Root-Verzeichnis
COPY --from=0 /app/public /usr/share/nginx/html

# Nginx starten, wenn der Container gestartet wird
CMD ["nginx", "-g", "daemon off;"]

Erstellen und testen des Images

Der folgende Befehl erstellt, anhand des Dockerfile, das Docker-Image.

docker build -t <INSERT-IMAGE-NAME> .

Der nächste Befehl startet einen Container, mit dem vorher erstellten Image als Grundlage, auf deinem localhost.

 docker run -d -p 80:80 <INSERT-IMAGE-NAME>

Besuche mit deinem Browser http://localhost, du wirst auf deine Hugo-Anwendung treffen. Damit bist du im Prinzip fertig. Du hast erfolgreich deine Anwendung in einem Container bereitgestellt 🚀.

Prozessautomatisierung

Um den Prozess der Imageerstellung und des Hochladens bei Docker Hub, nicht jedes Mal manuell ausführen zu müssen, werden wir dies im Folgenden automatisieren. Hier machen wir uns Gitlab-Pipelines zunutze, um diese nutzen zu können müssen die folgenden Bedingungen erfüllt sein.

  • Versionierung des Projekts erfolgt über Gitlab.
  • Im Root-Verzeichnis befindet sich eine .gitlab-ci.yml Datei, mit dem unten aufgeführten Inhalt.
stages:
  - publish_image

variables:
  DOCKER_HUB_USER: "YOUR_DOCKER_USERNAME"
  DOCKER_HUB_REPO: "DOCKER_REPO_NAME"

services:
  # Wir nutzen hier ein "dind" Image (docker in docker),
  # um in der pipeline das Image erstellen zu können
  - docker:dind

publish_image:
  image: docker:stable
  stage: publish_image
  script:
    # Baue das Image
    - docker build -t $DOCKER_HUB_USER/$DOCKER_HUB_REPO .
    # Authentifizierung mit Docker Hub
    - docker login -u $DOCKER_HUB_USER -p $DOCKER_ACCESS_TOKEN
    # Hochladen des Images
    - docker push $DOCKER_HUB_USER/$DOCKER_HUB_REPO

Bei der Variable $DOCKER_ACCESS_TOKEN handelt es sich um ein von Docker Hub generiertes Token, mit dem sich Gitlab gegenüber Docker Hub authentifizieren kann (Tokenerstellung). Damit nicht jeder Zugriff auf das Token hat, hinterlegen wir es in Gitlab als Variable.
Gehe dafür auf die Einstellung des Repositories, dann auf CI/CD und klicke dann auf den Button Expand. Als nächstes klickst du auf Add variable und vergibst DOCKER_ACCESS_TOKEN als Key und das Token als Value. Damit ist das Token über die Variable $DOCKER_ACCESS_TOKEN in .gitlab-ci.yamlabrufbar. Alternativ kannst du die Variable auch einer Gruppe hinzufügen, in der sich dann unser Repo befinden muss.

Davor
Angular-Linting konfigurieren