↓Skip to main content

GitLab CI Pipeline - Docker Compose Deployment: Containerize and Deploy Static Website Project and Traefik Reverse Proxy via Docker Compose

1537 words·
GitLab GitLab CI CI Pipeline Docker-Compose Apache Traefik Unprivileged Container
Table of Contents
GitHub Repository Available



Overview
#

In this tutorial I’m using the following setup based on Ubuntu 22.04 servers, GitLab is dockerized:

192.168.70.4 # GitLab
192.168.70.5 # GitLab Runner
192.168.70.6 # Deployment Server with Docker installed



GitLab Repository
#

File and Folder Structure
#

The file and folder structure of the GitLab project looks like this:

GitLab-Repository
├── Docker-Compose
│   └── docker-compose-apache-traefik.tmpl  # Docker Compose manifest template
├── Dockerfiles  # Dockerfiles for Apache and Traefik
│   ├── Dockerfile-Apache
│   └── Dockerfile-Traefik
├── .gitlab-ci.yml  # GitLab CI Pipeline manifest
├── public  # Static website example
│   ├── css
│   │   └── styles.css
│   ├── index.html
│   └── js
│       └── scripts.js
├── README.md
└── traefik
    ├── TLS-certs  # TLS certificates
    │   ├── fullchain.pem
    │   └── privkey.pem
    └── tls-configuration.yaml  # Traefik configuration

CI Pipeline Manifest
#

  • .gitlab-ci.yml
### Variables
variables:
  DEPLOY_IP: "192.168.70.6"  # Deployment server IP
  DEPLOY_USER: "gitlab-deployment"  # Deployment server SSH user

  # Define the image name for Apache, tagging it with the GitLab CI registry and the current commit SHA
  APACHE_IMAGE_SHA: $CI_REGISTRY_IMAGE/apache:$CI_COMMIT_SHA
  # Define the image name for Traefik, tagging it with the GitLab CI registry and the current commit SHA
  TRAEFIK_IMAGE_SHA: $CI_REGISTRY_IMAGE/traefik:$CI_COMMIT_SHA


### Stages
stages:
  - build
  - deploy


### Build Apacher Container
build-apache:
  stage: build
  image: docker:20.10.16
  variables:
    DOCKER_DRIVER: overlay2
    DOCKER_HOST: tcp://docker:2375
    DOCKER_TLS_CERTDIR: ""
  services:
    - docker:20.10.16-dind
  before_script:
    # Log in to the GitLab Container registry using CI credentials
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
  script:
    - docker pull $CI_REGISTRY_IMAGE/apache:latest || true
    # Build the Apache Docker image / enable caching from the previously pulled image / tag the new image with the current commit SHA and as "latest"
    - docker build -f Dockerfiles/Dockerfile-Apache --cache-from $CI_REGISTRY_IMAGE/apache:latest --tag $APACHE_IMAGE_SHA --tag $CI_REGISTRY_IMAGE/apache:latest .
    # Push the newly built image to the GitLab Container registry
    - docker push $APACHE_IMAGE_SHA
    # Push the image tagged as "latest" to the GitLab Container registry
    - docker push $CI_REGISTRY_IMAGE/apache:latest


### Build Traefik Container
build-traefik:
  stage: build
  image: docker:20.10.16
  variables:
    DOCKER_DRIVER: overlay2
    DOCKER_HOST: tcp://docker:2375
    DOCKER_TLS_CERTDIR: ""
  services:
    - docker:20.10.16-dind
  before_script:
    # Log in to the GitLab Container registry using CI credentials
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
  script:
    - docker pull $CI_REGISTRY_IMAGE/traefik:latest || true
    # Build the Traefik Docker image / enable caching from the previously pulled image / tag the new image with the current commit SHA and as "latest"
    - docker build -f Dockerfiles/Dockerfile-Traefik --cache-from $CI_REGISTRY_IMAGE/traefik:latest --tag $TRAEFIK_IMAGE_SHA --tag $CI_REGISTRY_IMAGE/traefik:latest .
    # Push the newly built image to the GitLab Container registry
    - docker push $TRAEFIK_IMAGE_SHA
    # Push the image tagged as "latest" to the GitLab Container registry
    - docker push $CI_REGISTRY_IMAGE/traefik:latest


### Deploy Containers to Virtual Machine
deploy_compose_stack:
  stage: deploy
  image: alpine:latest
  before_script:
    # Update the package index, install OpenSSH client and gettext for envsubst
    - apk update && apk add openssh-client gettext
    # If the private SSH key file ($ID_RSA) exists, set secure permissions (read/write for the owner only)
    - if [ -f "$ID_RSA" ]; then chmod og= $ID_RSA; fi
  script:
    # SSH into the deployment server, log in to the GitLab Container registry
    - ssh -i $ID_RSA -o StrictHostKeyChecking=no $DEPLOY_USER@$DEPLOY_IP "docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY"
    # Substitute environment variables in the Docker Compose template to generate final Docker Compose file
    - envsubst < Docker-Compose/docker-compose-apache-traefik.tmpl > docker-compose-apache-traefik.yml
    # Copy generated Docker Compose file to the deployment server
    - scp -i $ID_RSA -o StrictHostKeyChecking=no docker-compose-apache-traefik.yml $DEPLOY_USER@$DEPLOY_IP:/tmp
    # SSH into the deployment server, stop any running containers defined in the Docker Compose file
    - ssh -i $ID_RSA -o StrictHostKeyChecking=no $DEPLOY_USER@$DEPLOY_IP "cd /tmp; docker compose -f docker-compose-apache-traefik.yml down"
    # SSH into the deployment server, start the containers defined in the Docker Compose file
    - ssh -i $ID_RSA -o StrictHostKeyChecking=no $DEPLOY_USER@$DEPLOY_IP "cd /tmp; docker compose -f docker-compose-apache-traefik.yml up -d"
  rules:
    # Rule: Run this job only for main branch
    - if: $CI_COMMIT_BRANCH == "main"



Dockerfiles
#

Apache
#

  • Dockerfiles/Dockerfile-Apache
# Use the Alpine base image
FROM alpine:latest

# Install Apache2
RUN apk update && apk add apache2 && rm -rf /var/cache/apk/*

# Copy website files to the document root
COPY public/ /var/www/localhost/htdocs/

# Set ownership and permissions for Apache directories
RUN chown -R apache:apache /var/www && \
    chown -R apache:apache /run/apache2 && \
    chown -R apache:apache /var/log/apache2 && \
    chmod -R 770 /var/run/apache2 && \
    chmod -R 770 /var/log/apache2 && \
    chown -R apache:apache /etc/apache2

# Start Apache2 using non-root user
USER apache

# Expose the default Apache port
EXPOSE 80

# Start Apache
ENTRYPOINT ["/usr/sbin/httpd", "-D", "FOREGROUND"]

Traefik
#

  • Dockerfiles/Dockerfile-Traefik
# Use the latest Traefik image as base
FROM traefik:v2.10

# Expose ports 80,443,8080
EXPOSE 80
EXPOSE 443
EXPOSE 8080

# Copy the tls-configuration configuration file
COPY traefik/tls-configuration.yaml /etc/traefik/dynamic/tls-configuration.yaml
# Copy the TLS certificates
COPY traefik/TLS-certs/ /etc/certs/

# Specify the command to run on container start
CMD ["traefik", "--configFile=/etc/traefik/traefik.yml"]



Docker Compose Manifest Template
#

  • Docker-Compose/docker-compose-apache-traefik.tmpl
services:
  apache:
    image: ${APACHE_IMAGE_SHA}
    container_name: apache-container # Define container name
    ports:
      - :80
    restart: unless-stopped
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=traefik"
      - "traefik.http.services.apache.loadbalancer.server.port=80"
      # HTTPS Router
      - "traefik.http.routers.apache.entrypoints=websecure"
      - "traefik.http.routers.apache.tls=true"
      - "traefik.http.routers.apache.rule=Host(`apache.jklug.work`)"
      # HTTP Router
      - "traefik.http.routers.apache-http.rule=Host(`apache.jklug.work`)"
      - "traefik.http.routers.apache-http.entrypoints=web"
      - "traefik.http.routers.apache-http.middlewares=redirect-to-https"
      # Middleware for HTTP to HTTPS redirection
      - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
    networks:
      - traefik

  reverse-proxy:
    image: ${TRAEFIK_IMAGE_SHA}
    container_name: traefik-reverse-proxy # Define container name
    restart: unless-stopped
    command:
      - --api.insecure=true
      - --providers.docker
      - --providers.file.directory=/etc/traefik/dynamic
      - --entryPoints.web.address=:80
      - --entryPoints.websecure.address=:443
    ports:
      - "80:80"
      - "443:443"
      #- "8080:8080"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    networks:
      - traefik

networks:
  traefik:
    external: true

Traefik Configuration
#

  • tls-configuration.yaml
tls:
  certificates:
    - certFile: /etc/certs/fullchain.pem
      keyFile: /etc/certs/privkey.pem



Static Website
#

HTML File
#

  • public/index.html
<!DOCTYPE html>
<html>

<head>
    <title>jklug.work</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
    <h1>Some HTML</h1>
    <p>Hi there, click me.</p>
    <!-- Add a button -->
    <button id="myButton">Click Me</button>

    <!-- Link to the JavaScript file -->
    <script src="js/scripts.js"></script>
</body>

</html>

CSS File
#

  • public/css/styles.css
/* General styling for the body */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;

    /* Flexbox centering */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Full viewport height */
}

/* Header styling */
h1 {
    color: #333;
    margin: 0 0 10px 0; /* Remove default margin and add spacing */
}

/* Paragraph styling */
p {
    color: #666;
    font-size: 18px;
    margin: 10px 0; /* Add some spacing */
}

/* Button styling */
button {
    background-color: #d2691e;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px; /* Add space above the button */
}

/* Button hover effect */
button:hover {
    background-color: #8b4513;
}

JavaScript File
#

  • public/js/scripts.js
// Function to handle button clicks
function handleButtonClick() {
    const paragraph = document.querySelector("p");
    // Toggle text between text
    if (paragraph.textContent === "Hi there, click me.") {
        paragraph.textContent = "Button was clicked.";
    } else {
        paragraph.textContent = "Hi there, click me.";
    }
}

// Attach event listener when the DOM is ready
document.addEventListener("DOMContentLoaded", () => {
    const button = document.querySelector("#myButton");
    button.addEventListener("click", handleButtonClick);
});



Deployment Server Prerequisites
#

Create SSH Key Pair
#

Create a SSH key pair on the server where GitLab is deployed:

# Create SSH key pair
ssh-keygen -t rsa -b 2048

Create a User for the Container Deployment
#

On the deployment server, create a new user “gitlab-deployment” that is used by the deploy_container job of the GitLab CI pipeline:

# Create user for the GitLab deployment
sudo adduser gitlab-deployment

# Add the user to the Docker group
sudo usermod -aG docker gitlab-deployment

Add Public Key & Fingerprint
#

Copy the public SSH key to the authorized keys file of the Deployment servers:

# Copy the public SSH key: Default "id_rsa.pub" key
ssh-copy-id gitlab-deployment@192.168.70.6

# Copy the public SSH key: Define specific key
ssh-copy-id -i ~/.ssh/filename.pub gitlab-deployment@192.168.70.6

SSH into the deployment server to add the fingerprint:

# SSH into deployment server
ssh gitlab-deployment@192.168.70.6

DNS Entry
#

Make sure the deployment server can resolve the DNS names of GitLab and the GitLab Registry:

# Add the following DNS entry
192.168.70.4 gitlab.jklug.work gitlab-registry.jklug.work

Add SSH Key as CI/CD Variable
#

Add the previously created private SSH key as variable to the simple-static-website-pipeline project:

  • Go to: (Project) “Settings” > “CI/CD”

  • Expand the “Variables” section

  • Select “Type”: “File”

  • Define “Key”: ID_RSA

  • Paste the private SSH key as “Value”

  • Click “Add variable” to add a variable for your private SSH Key.

Note: Remove the “Protect variable” option so that it can be used in different branches.


Docker Network
# 

# Create network used for Traefik to communicate with other Docker containers
sudo docker network create traefik



Verify the Deployment
#

DNS Entry
#

Make sure the hosts can resolv the domain name defined via the labels in the Docker Compose manifest:

# Create DNS entry
192.168.70.6 apache.jklug.work

List Containers
#

SSH into the deployment server:

# List containers
docker ps

# Shell output:
CONTAINER ID   IMAGE                                                                                                                               COMMAND                  CREATED          STATUS          PORTS                                                                                NAMES
63a970d00b2f   gitlab-registry.jklug.work/static-websites/simple-static-website-traefik-compose/apache:9c396f4f59ae175c2de97452f7b32b17abb6ca46    "/usr/sbin/httpd -D …"   13 seconds ago   Up 12 seconds   0.0.0.0:32772->80/tcp, [::]:32772->80/tcp                                            apache-container
9fc2fb8868cb   gitlab-registry.jklug.work/static-websites/simple-static-website-traefik-compose/traefik:9c396f4f59ae175c2de97452f7b32b17abb6ca46   "/entrypoint.sh --ap…"   13 seconds ago   Up 12 seconds   0.0.0.0:80->80/tcp, :::80->80/tcp, 0.0.0.0:443->443/tcp, :::443->443/tcp, 8080/tcp   traefik-reverse-proxy

Verify Apache Webserver
#

Curl the Apache webserver:

# Curl the container
curl https://apache.jklug.work

# Shell output:
<!DOCTYPE html>
<html>

<head>
    <title>jklug.work</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

Or open the URL in a browser: https://apache.jklug.work



Links #

jueklu/simple-static-website-with-traefik-compose

GitLab CI Pipeline - Docker Compose Deployment - Containerize and Deploy Static Website Project with Apache and Traefik Reverse Proxy

CSS
0
0