Quick Docker & CI/CD

Introduction

In this tutorial, you’ll learn how to dockerize a simple geospatial web application:

• React for frontend
• Flask for backend with SQLite, and a GeoServer instance

we are going to learn how to automate its build and deployment using GitLab CI/CD.

Prerequisites

• Docker ≥ 20.10 to build and run containers

---

1. Frontend Dockerfile (React + Nginx)

# build stage: install deps and produce bundle
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# runtime stage: serve files
FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf:

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

2. Backend Dockerfile (Flask + Gunicorn + SQLite)

FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
EXPOSE 5000
CMD ["gunicorn", "-b", "0.0.0.0:5000", "app:app"]

• Ensure your Flask entrypoint (app.py or wsgi.py) defines app.
• SQLite file will live under /app/data via Docker volume.

3. docker-compose.yml

version: "3.8"
services:
  front:
    build: ./front
    ports:
      - "80:80"
    depends_on:
      - api

  api:
    build: ./back
    ports:
      - "5000:5000"
    volumes:
      - sqlite_data:/app/data

  geoserver:
    image: kartoza/geoserver:latest
    ports:
      - "8080:8080"
    volumes:
      - geodata:/var/local/geoserver_data

volumes:
  sqlite_data:
  geodata:

• Run locally: docker-compose up --build
• Creates volumes (sqlite_data, geodata) for data persistence.

---

4. GitLab CI/CD (.gitlab-ci.yml)

stages:
  - build
  - deploy

variables:
  DOCKER_HOST: tcp://docker:2375/
  DOCKER_TLS_CERTDIR: ""

services:
  - docker:dind

build-images:
  stage: build
  script:
    - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
    - docker build -t $CI_REGISTRY_IMAGE/front:latest front
    - docker build -t $CI_REGISTRY_IMAGE/api:latest back
    - docker push $CI_REGISTRY_IMAGE/front:latest
    - docker push $CI_REGISTRY_IMAGE/api:latest

deploy:
  stage: deploy
  script:
    - apk add --no-cache curl
    - curl -L https://gitlab.com/ihsan/geosyria/-/raw/main/deploy.sh | bash
  only:
    - main

• docker:dind lets the runner build images during CI.
• deploy.sh should pull new images and restart services on your server.

5. Usage

1. Local

   git clone https://gitlab.comwork.io/ihsan/geosyria.git
   cd geosyria
   docker-compose up --build
   • Frontend → http://localhost
   • API → http://localhost:5000
   • GeoServer→ http://localhost:8080

2. CI/CD Push branch → GitLab builds & pushes images → on main, deploy.sh runs automatically.

Feel free to adjust paths, ports, or registry settings as needed.