When running databases like PostgreSQL and MariaDB on a server, ensuring regular backups is crucial for protecting your data from unexpected events such as crashes, human error, or system failure. While there are several ways to create backups, scripting a backup solution gives you complete control and automation.

In this article, we'll show you how to create a simple yet effective backup script for PostgreSQL and MariaDB running in Docker containers on a server. We'll automate the process to ensure that your databases are regularly backed up without you needing to manually intervene.

## Why You Need Backups?

Before diving into the script, let’s take a moment to highlight why having regular backups is essential:

1. Protection Against Data Loss: Regular backups prevent loss of valuable data due to failures or accidents.
2. Disaster Recovery: Having up-to-date backups makes it easier to restore services quickly after a failure.
3. Compliance and Audits: Some industries require maintaining backup copies of data for regulatory compliance.
4. Peace of Mind: Knowing your data is safe provides confidence and good sleep.

## Prerequisites

Before creating the backup script, make sure you have:
- A VPS running a Linux-based operating system.
- Docker installed and running.
- PostgreSQL and MariaDB running inside Docker containers.
- Basic knowledge of using the terminal and running Docker commands.

For the purpose of this tutorial, let’s assume your PostgreSQL and MariaDB containers are named `postgres_container` and `mariadb_container`.

## Create a Backup Directory

Start by creating a directory on your server where the backups will be stored. This will help keep everything organized.

```bash
mkdir -p /home/youruser/backup
```
Replace `/home/youruser/backup` with the location where you'd like to store your backups.

## Create the Backup Script

Now let’s create a bash script that will run daily backups for both PostgreSQL and MariaDB databases. Open your favorite text editor and create a file named `backup_databases.sh`.
```bash
#!/bin/bash
set -euo pipefail

# Backup a PostgreSQL database into a daily file.

BACKUP_DIR="/data/backups"
LOG_FILE="/var/log/db_backup.log"
DAYS_TO_KEEP=30
POSTGRESDATABASES=("db1" "db2") # PostgreSQL DBs to backup
MARIADBDATABASES=("db1") # MariaDB DBs to backup
POSTGRESCONTAINER="postgres_container"
MARIADBCONTAINER="mariadb_container"

# Create necessary directories
mkdir -p "${BACKUP_DIR}"
mkdir -p "$(dirname "${LOG_FILE}")"

# Create backup directory if it doesn't exist
mkdir -p "${BACKUP_DIR}"

# Function to log messages
log() {
 local level="$1"
 local message="$2"
 local timestamp
 timestamp=$(date +"%Y-%m-%d %H:%M:%S")

 # Log to both stdout and a log file
 echo -e "${timestamp} [${level}] ${message}" | tee -a "${LOG_FILE}"
}

for DATABASE in "${POSTGRESDATABASES[@]}"; do
 TIMESTAMP=$(date +"%Y%m%d%H%M")
 FILE="${TIMESTAMP}_${DATABASE}.sql.gz"
 OUTPUT_FILE="${BACKUP_DIR}/${FILE}"

 log "INFO" "Starting backup for database: ${DATABASE}"

 # Perform the backup and compress the output
 if docker exec -i "${POSTGRESCONTAINER}" /usr/bin/pg_dump -U "${USER}" "${DATABASE}" | gzip -9 > "${OUTPUT_FILE}"; then
 log "SUCCESS" "Backup created: ${OUTPUT_FILE}"
 ls -l "${OUTPUT_FILE}" | tee -a "${LOG_FILE}"
 else
 log "ERROR" "Backup failed for database ${DATABASE}" >&2
 continue
 fi

 # Prune old backups
 find "${BACKUP_DIR}" -maxdepth 1 -mtime +"${DAYS_TO_KEEP}" -name "*${DATABASE}.sql.gz" -exec rm -f {} \; \
 && log "INFO" "Old backups deleted for database ${DATABASE}" \
 || log "ERROR" "Failed to delete old backups for ${DATABASE}" >&2
done

## MariaDB Backup
for DATABASE in ${MARIADBDATABASES[@]}; do
 TIMESTAMP=$(date +"%Y%m%d%H%M")
 FILE="${TIMESTAMP}_${DATABASE}.sql.gz"
 OUTPUT_FILE="${BACKUP_DIR}/${FILE}"

 # Perform the database backup (dump)
 if docker exec ${MARIADBCONTAINER} /usr/bin/mariadb-dump -u root --password=yourpassword ${DATABASE} | gzip -9 > ${OUTPUT_FILE}; then
 log "SUCCESS" "Backup created: ${OUTPUT_FILE}"
 ls -l "${OUTPUT_FILE}" | tee -a "${LOG_FILE}"
 else
 log "ERROR" "Backup failed for database ${DATABASE}" >&2
 continue
 fi

 # Prune old backups
 find "${BACKUP_DIR}" -maxdepth 1 -mtime +"${DAYS_TO_KEEP}" -name "*${DATABASE}.sql.gz" -exec rm -f {} \; \
 && log "INFO" "Old backups deleted for database ${DATABASE}" \
 || log "ERROR" "Failed to delete old backups for ${DATABASE}" >&2
done

log "INFO" "Finished database backups!"
```

**Explanation:**
- **Variables:** The script starts by defining a backup directory and more parameters like days to keep backups and individual databases to backup.
- **PostgreSQL Backup:** It uses `docker exec` to run the `pg_dump` command inside the PostgreSQL container to dump previously defined databases.
- **MariaDB Backup:** Similarly, it uses `docker exec` to run the `mysqldump` inside the MariaDB container and backup previously defined databases.
- **Compression:** All backups are compressed using `gzip` to save space.
- **Backup Cleanup:** Finally, the script deletes backups older than `DAYS_TO_KEEP` days to prevent disk space issues.

**Customizing the Script:**
- Change `BACKUP_DIR` to the directory where you want to store your backups.
- Replace `DAYS_TO_KEEP` with the days how long you want to keep backups.
- Replace `POSTGRESDATABASES` with the PostgreSQL databases to backup.
- Replace `MARIADBDATABASES` with the MariaDB databases to backup.
- Replace `POSTGRESCONTAINER` and `MARIADBCONTAINER` with the name of your PostgreSQL and MariaDB containers.
- Replace `yourpassword` with the password for the root user in MariaDB..

## Make the Script Executable

After saving the script, make it executable:
```bash
chmod +x /path/to/backup_databases.sh
```

## Automate the Backup with Cron

To schedule automatic backups, set up a cron job.

- Open the crontab editor:
```bash
crontab -e
```
- Add the following line to run the backup script daily at 2:00 AM:
```bash
0 2 * * * /path/to/backup_databases.sh
```

This will execute the backup script every day at 2:00 AM.

Make sure to adjust the path ```/path/to/backup_databases.sh``` to the correct location of your script.

## Verify the Backup

It’s always a good idea to manually run the backup script once to ensure everything is working correctly.
```bash
/path/to/backup_databases.sh
```
Check the backup directory to ensure that the backup files have been created and compressed.

## Restore from Backup (Bonus)

In case you need to restore a backup, you can use the following commands to load the backups back into your PostgreSQL and MariaDB containers.

**PostgreSQL Restore:**
```bash
docker exec -i postgres_container psql -U postgres -d database < /home/youruser/backup/DATE_DATABASE.sql
```

**MariaDB Restore:**
```bash
docker exec -i mariadb_container mariadb u root --password=yourpassword database < /home/youruser/backup/DATE_DATABASE.sql
```

Replace `DATE` and `DATABASE` with the appropriate backup file’s date and database name

By following these steps, you've created a simple and automated backup solution for your PostgreSQL and MariaDB databases running inside Docker containers. Regular backups are essential for protecting your data, and this script ensures that your backups run smoothly without manual intervention. You can also use this script to backup databases e.g. in Unraid with the `User Script`plugin.

You can further enhance this backup strategy by sending notifications, backing up to remote storage (e.g., AWS S3 or Google Cloud), or setting up encryption for additional security.

With your databases securely backed up, you can rest easy knowing your data is safe and easily recoverable in case of an emergency.

Learn how to automate backups for PostgreSQL and MariaDB running in Docker containers on a server. Protect your data with this simple, customizable backup script, ensuring regular backups with minimal effort.

How to Create a Backup Script for PostgreSQL and MariaDB Containers on a Server

Many developers rely on Google’s Static Maps API to generate map images, but this has limitations such as:
- API rate limits
- Cost for high-volume usage
- Potential data privacy concerns
- Dependency on an external service

For a long time I was looking for an alternative to Maps Static API from Google which can be selfhosted but I couldn't find anything which seemed to fit my needs.

However I found [staticmaps](https://www.npmjs.com/package/staticmaps "staticmaps") which is a Node.JS library for creating map images with markers, polylines, polygons and text. But the library doesn't provide a web interface so I decided to built one on top of it with [express](https://github.com/expressjs/express "express") and containerized the staticmaps API.

## Docker Static Maps API

[docker-staticmaps](https://github.com/dietrichmax/docker-staticmaps "Docker Static Maps API") is a containerized web version for [staticmaps](https://www.npmjs.com/package/staticmaps) with [express](https://github.com/expressjs/express).

In general `docker-staticmaps` provides a self-hosted alternative that allows you to generate static map images on your own server without relying on third-party APIs.

## Usage

To get a static map from the endpoint `/staticmaps` several prameters have to be provided.

Parameter	Description	Example
center	Latitude,Longitude of map center	48.8588443,2.2943506
zoom	Zoom level (1-20)	12
size	Image size in pixels	600x400
marker	Add a marker at a location	48.8588,2.2943,red
polyline	Draw a line on the map	48.85,2.29;48.86,2.30,blue,2

- `center` - Center coordinates of the map in the format `lon, lat`
- `zoom` - Set the zoom level for the map.
- `width` - default `300` - Width in pixels of the final image
- `height` - default `300` - Height in pixels of the final image
- `format` - default `png` (e.g. `png`, `jpg` or `webp`)
- `basemap` - default `osm` - Map base layer

### Basemaps

For different basemaps docker-staticmaps is using exisiting tile-services from various providers. Be sure to check their Terms of Use for your use case or use a `custom` tileserver with the `tileUrl` parameter!

- `basemap` - default "osm" - Select the basemap
 - `osm` - default - [Open Street Map](https://www.openstreetmap.org/)
 - `streets` - [Esri street basemap](https://www.arcgis.com/home/webmap/viewer.html?webmap=7990d7ea55204450b8110d57e20c99ab)
 - `satellite` - Esri's [satellite basemap](https://www.arcgis.com/home/webmap/viewer.html?webmap=d802f08316e84c6592ef681c50178f17&center=-71.055499,42.364247&level=15)
 - `hybrid` - Satellite basemap with labels
 - `topo` - Esri [topographic map](https://www.arcgis.com/home/webmap/viewer.html?webmap=a72b0766aea04b48bf7a0e8c27ccc007)
 - `gray` - Esri gray canvas with labels
 - `gray-background` - Esri [gray canvas](https://www.arcgis.com/home/webmap/viewer.html?webmap=8b3d38c0819547faa83f7b7aca80bd76) without labels
 - `oceans` - Esri [ocean basemap](https://www.arcgis.com/home/webmap/viewer.html?webmap=5ae9e138a17842688b0b79283a4353f6&center=-122.255816,36.573652&level=8)
 - `national-geographic` - [National Geographic basemap](https://www.arcgis.com/home/webmap/viewer.html?webmap=d94dcdbe78e141c2b2d3a91d5ca8b9c9)
 - `otm` - [OpenTopoMap](https://www.opentopomap.org/)
 - `stamen-toner` - [Stamen Toner](http://maps.stamen.com/toner/) black and white map with labels
 - `stamen-toner-background` - [Stamen Toner](http://maps.stamen.com/toner-background/) map without labels
 - `stamen-toner-lite` - [Stamen Toner Light](http://maps.stamen.com/toner-lite/) with labels
 - `stamen-terrain` - [Stamen Terrain](http://maps.stamen.com/terrain/) with labels
 - `stamen-terrain-background` - [Stamen Terrain](http://maps.stamen.com/terrain-background/) without labels
 - `stamen-watercolor` - [Stamen Watercolor](http://maps.stamen.com/watercolor/)
 - `carto-light` - [Carto](https://carto.com/location-data-services/basemaps/) Free usage for up to 75,000 mapviews per month, non-commercial services only.
 - `carto-dark` - [Carto](https://carto.com/location-data-services/basemaps/) Free usage for up to 75,000 mapviews per month, non-commercial services only.
 - `carto-voyager` - [Carto](https://carto.com/location-data-services/basemaps/) Free usage for up to 75,000 mapviews per month, non-commercial services only.
 - `custom` - Pass through the tile URL using parameter `tileurl`

### Polylines

With the parameter `polyline` you can add a polyline to the map in the following format:

`polyline=polylineStyle|polylineCoord1|polylineCoord2|...`

- `polylineCoord` - required - in format `lat,lon` and seperated by `|`. Atleast two locations are needed to draw a polyline.

The `polylineStyle` consists of the following two parameters separated by `|`.

- `weight` - default `5` - Weight of the polyline in pixels, e.g. `weight:5`
- `color` - default `blue` -24-Bit-color hex value, e.g. `color:0000ff`

If no `center` is specified, the polyline will be centered.

<details>
 <summary>Polyline with no `zoom`, `weight:6` and `color:0000ff`</summary>
 http://localhost:3000/staticmaps?width=600&height=600&polyline=weight:6|color:0000ff|48.726304979176675,-3.9829935637739382|48.72623035828412,-3.9829726446543385|48.726126671101639,-3.9829546542797467|48.725965124843256,-3.9829070729298808|48.725871429380568,-3.9828726793245273|48.725764250990267,-3.9828064532306628|48.725679557682362,-3.9827385375789146|48.72567025076134,-3.9827310750289113|48.725529844164292,-3.9826617613709225|48.725412537198615,-3.9826296635284164|48.725351694726704,-3.9826201452878531|48.725258599474508,-3.9826063049230411|48.725157520450125,-3.9825900299314232|48.725077863838543,-3.9825779905509102|48.724930435729831,-3.9825514102373938|48.724815578113535,-3.9825237355887291|48.724760905376989,-3.9825013965800564|48.724677938456551,-3.9824534296566916|48.724379435330384,-3.9822469276001118|48.724304509274596,-3.9821850264836076|48.7242453124599,-3.9821320570321772|48.724206187829317,-3.9821063430223207|48.724117073204575,-3.9820862134785551
 </details>

![polylinepath.png](https://cms.mxd.codes/uploads/polylinepath_d9f50f216a.png)

### Polygons

With the parameter `polygon` you can add a polygon to the map in the following format:

`polygon=polygonStyle|polygonCoord1|polygonCoord2|...`

- `polygonCoord` - required - in format `lat,lon` and seperated by `|`. First and last locations have to be the same to close the polygon.

The `polygonStyle` consists of the following two parameters separated by `|`.

- `color` - default `blue` -24-Bit-color hex value, e.g. `color:4874db`
- `weight` - default `5` - Weight of the polygon in pixels, e.g. `weight:5`
- `fill` - default `green` -24-Bit-color hex value, e.g. `fill:eb7a34`

If no `center` is specified, the polygon will be centered.

<details>
 <summary>Polygon with no `zoom`, `color:4874db`,`weight:7` and `fill:eb7a3`</summary>
 http://localhost:3000/staticmaps?width=600&height=600&polygon=color:4874db|weight:7|fill:eb7a34|41.891169,12.491691|41.890633,12.493697|41.889012,12.492989|41.889467,12.490811|41.891169,12.491691
 </details>

![polygonexample.png](https://cms.mxd.codes/uploads/polygonexample_a8167c572c.png)


### Markers

With the parameter `markers` you can draw one or multiple markers depending on how much pair of coordinates you pass to the parameter

`markers=markerCoord1|markerCoord2|...`

- `markerCoord` - required - in format `lat,lon` and separated by `|`. Atleast one coordinate is needed to draw a marker.

If no `center` is specified, the markers will be centered.

<details>
 <summary>Markers</summary>
 http://localhost:3000/staticmaps?width=600&height=600&markers=48.726304979176675,-3.9829935637739382|48.724117073204575,-3.9820862134785551
 </details>

![markers.png](https://cms.mxd.codes/uploads/markers_e3060a2b45.png)

### Circles

With the parameter `circle` you can add a circle to the map in the following format:

`circle=circleStyle|circleCoord`

- `circleCoord` - required - in format `lat,lon` and separated by `|`. Atleast one locations is needed to draw a marker.

The `circleStyle` consists of the following parameters seperated by `|`.

- `radius` - required - Circle radius in meter, e.g. `radius:500`
- `color` - default `#0000bb` - Stroke color of the circle, e.g. `color:#0000bb`
- `width` - default `3` - Stroke width of the circle, e.g. `width:3`
- `fill` - default `#AA0000` - Fill color of the circle, e.g. `fill:#AA0000`

If no `center` is specified, the circle will be centered.

<details>
 <summary>Circle with no zoom</summary>
 http://localhost:3000/staticmaps?width=600&height=600&basemap=osm&circle=radius:100|48.726304979176675,-3.9829935637739382
 </details>

![circle.png](https://cms.mxd.codes/uploads/circle_646b7609a9.png)

### More usage Examples

<details>
 <summary>Minimal example: `center` and `zoom`</summary>
 http://localhost:3000/staticmaps?center=-119.49280,37.81084&zoom=9
</details>

![minimalexample.png](https://cms.mxd.codes/uploads/minimalexample_ce216c4b8e.png)

<details>
 <summary>`width=500`, `height=500`, `center=-73.99515,40.76761`, `zoom=10`, `format=webp`, `basemap=carto-voyager`</summary>
 http://localhost:3000/staticmaps?width=500&height=500&center=-73.99515,40.76761&zoom=10&format=webp&basemap=carto-voyager
</details>

![example2.webp](https://cms.mxd.codes/uploads/example2_2e3cbb505b.webp)

<details>
 <summary>Markers and Polyline</summary>
 http://localhost:3000/staticmaps?width=600&height=600&polyline=weight:6|color:0000ff|48.726304979176675,-3.9829935637739382|48.72623035828412,-3.9829726446543385|48.726126671101639,-3.9829546542797467|48.725965124843256,-3.9829070729298808|48.725871429380568,-3.9828726793245273|48.725764250990267,-3.9828064532306628|48.725679557682362,-3.9827385375789146|48.72567025076134,-3.9827310750289113|48.725529844164292,-3.9826617613709225|48.725412537198615,-3.9826296635284164|48.725351694726704,-3.9826201452878531|48.725258599474508,-3.9826063049230411|48.725157520450125,-3.9825900299314232|48.725077863838543,-3.9825779905509102|48.724930435729831,-3.9825514102373938|48.724815578113535,-3.9825237355887291|48.724760905376989,-3.9825013965800564|48.724677938456551,-3.9824534296566916|48.724379435330384,-3.9822469276001118|48.724304509274596,-3.9821850264836076|48.7242453124599,-3.9821320570321772|48.724206187829317,-3.9821063430223207|48.724117073204575,-3.9820862134785551&markers=48.726304979176675,-3.9829935637739382|48.724117073204575,-3.9820862134785551
 </details>

![markersandpolyline.png](https://cms.mxd.codes/uploads/markersandpolyline_04626a7660.png)



## Deployment

**with Docker**

```bash
docker run -d \
 --name='static-maps-api' \
 -p '3003:3000/tcp' \
 'mxdcodes/docker-staticmaps:latest'
```

**with Node.js**

```bash
git clone https://github.com/dietrichmax/docker-staticmaps
npm i
npm run start
```

**Links**
* GitHub: [https://github.com/dietrichmax/docker-staticmaps](https://github.com/dietrichmax/docker-staticmaps)
* Docker Hub: [https://hub.docker.com/r/mxdcodes/docker-staticmaps](https://hub.docker.com/r/mxdcodes/docker-staticmaps)

A containerized web version for staticmaps with express.

docker-staticmaps: A selfhosted Static Maps API

 In this article, we'll explore how to Dockerize a Next.js application and automate its deployment using GitHub Actions, thereby simplifying the deployment workflow and enhancing development productivity.

## Prerequisites

Before we dive into Dockerizing our Next.js application and setting up GitHub Actions for deployment, ensure you have the following prerequisites:

1. A Next.js project.
2. [Docker installed on your local machine](https://docs.docker.com/engine/install/).
3. A GitHub repository for your Next.js project.

## Setting up Docker

Docker allows you to package your application and its dependencies into a container, ensuring consistency across different environments. Start by creating a `Dockerfile` in the root of your Next.js project:

```docker
FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD ["node", "server.js"]
```

This Dockerfile is the default Dockerfile [provided by Vercel](https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile) to set up a Node.js environment, install dependencies, build the Next.js application, and exposing port 3000.

You have to ensure you are using `output: "standalone"` in your `next.config.js`.

```javascript
const nextConfig = {
  output: "standalone",
}
```

The `standalone` mode in Next.js builds a self-contained application that includes all necessary files, libraries, and dependencies required to run the application. This contrasts with the default mode ("experimental-serverless-trace"), which generates smaller bundles but relies on additional runtime steps.

Before proceeding further, it's crucial to test our Dockerized Next.js application locally to ensure everything functions as expected. Open a terminal in the project directory and execute the following commands:

```bash
# Build the Docker image
docker build -t my-nextjs-app .

# Run the Docker container
docker run -p 3000:3000 my-nextjs-app
```

Visit `http://localhost:3000` in your web browser to verify that your Next.js application is running within the Docker container.

## Setting up GitHub Actions for Continuous Deployment:

GitHub Actions automate the CI/CD pipeline directly from your GitHub repository.  Basically the pipeline looks like this:

- **Code Commit & Push**:
  Developer writes code and pushes changes to a GitHub repository.
This triggers the GitHub Actions workflow, defined in .github/workflows/docker-ci.yml.
```yaml
name: Build and Deploy Next.js

on:
  push:
    branches:
      - main # Triggers when code is pushed to the main branch
```
Once the workflow is triggered, the following steps occur:

- **Checkout Repository**:
  Pulls the latest code from GitHub.
  ```yaml
  jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
  ```
- **Install Dependencies & Build Next.js**:
  Installs project dependencies and builds the Next.js app in standalone mode.
  ```yaml
      - name: Install dependencies
        run: npm install

      - name: Build Next.js app
        run: npm run build
  ```
- **Run Tests** (optional but highly recommended):
  Ensures the application works before deployment.
  ```yaml
      - name: Run tests
        run: npm run test
  ```
- **Build and Tag Docker Image**:
  Creates a Docker image with the Next.js app.
  ```yaml
      - name: Build Docker Image
        run: docker build -t myapp:latest .
  ```
- **Push Docker Image to Registry**:
  Authenticates and pushes the image to Docker Hub or GitHub Container Registry.
  ```yaml
        - name: Log in to Docker Hub
        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin

      - name: Push
  ```

Putting it together: Create a `.github/workflows/pipeline.yml` file with the following content if you want to publish your docker images to [Docker Hub](https://hub.docker.com/) and [GitHub](https://ghcr.io). If you just want to use one of them you have to remove the according login step and remove the according tags.

```yaml
name: Docker Build & Publish

on:
  push:
    branches: [main]

jobs:
  push_to_registries:
    name: Push Docker image to multiple registries
    runs-on: ubuntu-latest
    permissions:
      packages: write
      contents: read
      attestations: write
      id-token: write

    steps:
      - name: Check out repository code 🛎️
        uses: actions/checkout@v4

      - name: Set up Docker Buildx 🚀
        uses: docker/setup-buildx-action@v3

      - name: Login to Docker Hub 🚢
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_HUB_USERNAME}}
          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN}}

      - name: Log in to the Container registry
        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
          
      - name: Build and push 🏗️
        uses: docker/build-push-action@v2
        with:
          context: .
          file: ./Dockerfile
          push: true
          tags: |
            ${{ secrets.DOCKER_HUB_USERNAME}}/{docker_repository}:${{ github.sha }}
            ${{ secrets.DOCKER_HUB_USERNAME}}/{docker_repository}:latest
            ghcr.io/${{ github.repository }}:${{ github.sha }}
            ghcr.io/${{ github.repository }}:latest
```

If you want to publish to Docker Hub you have to store secrets `${{ secrets.DOCKER_USERNAME }}` and `${{ secrets.DOCKER_PASSWORD }}` in your repository's under `settings` -> `Secrets and variables` -> `Actions` -> `Repository secrets`.

This workflow will build your container from your GitHub repositiory and push it to your Docker Container registry with two tags:
- `:latest` and
- `:{github.sha}`

## Passing environment variables to the Workflow

In case you need some environment variables you have to adjust the `Dockerfile` with some additional parameters. To be able to use environment variables which are stored in your repository as secrets you will need to mount and export every environment variable like the following to your `npm run build` command.

```bash
RUN --mount=type=secret,id=NEXT_PUBLIC_CMS_URL \
  export NEXT_PUBLIC_CMS_URL=$(cat /run/secrets/NEXT_PUBLIC_CMS_URL) && \
  npm run build
```
You can have a look at the Dockerfile for my site for a example: [personal website Dockerfile](https://gist.github.com/dietrichmax/a511236223a5ce83dd268e951b23007c).

Also you will need to modify the step `Build and push` in the workflow like this:

```yaml
- name: Build and push 🏗️
  uses: docker/build-push-action@v2
  with:
      context: .
      file: ./Dockerfile
      push: true
      tags: |
        ${{ secrets.DOCKER_HUB_USERNAME}}/personal-website:${{ github.sha }}
        ${{ secrets.DOCKER_HUB_USERNAME}}/personal-website:latest
      secrets: |
        "NEXT_PUBLIC_STRAPI_API_URL=${{ secrets.NEXT_PUBLIC_CMS_URL }}"
```

## Conclusion

With this setup, every push to the main branch of your GitHub repository triggers the CI/CD pipeline. Continuous Integration and Continuous Deployment for Dockerized Next.js applications provide a streamlined and efficient development process, ensuring that your application is always in a deployable state. By combining GitHub Actions with Docker, you can automate the deployment process and focus on building and improving your Next.js application.

In this article, we'll explore how to Dockerize a Next.js application and automate its deployment using GitHub Actions, thereby simplifying the deployment workflow and enhancing development productivity.

Dockerizing a Next.js Application with GitHub Actions

[MapProxy](https://mapproxy.org/ "MapProxy") is a powerful open-source proxy for geospatial data that allows for efficient caching and serving of map tiles. Combining MapProxy with Docker and Nginx can provide a scalable and easily manageable solution for serving cached map tiles. This guide will walk you through the process of setting up MapProxy using Docker and configuring Nginx to serve cached tiles.

**Prerequisites:**

1. Docker installed on your system
2. Basic understanding of Docker
3. Basic understanding of Nginx

If you don't meet this prerequisites yet I recommend to have a look at the following guides first:
- [Nginx Beginner’s Guide](https://nginx.org/en/docs/beginners_guide.html "Nginx Beginner’s Guide")
- [Docker overview](https://docs.docker.com/get-started/overview/ "Docker overview")
- [Install Docker Engine](https://docs.docker.com/engine/install/ "Install Docker Engine")

##  Set Up MapProxy with Docker

Start by creating a Network in Docker with:

```bash
sudo docker create network nginx
```

By adding the network nginx to the Nginx Container and the Mapproxy container the containers can communicate with each other without exposing ports on the server.

Create a Docker Compose file `docker-compose.yml` with the following content:

```docker
networks:
  default:
    external: true
    name: nginx
    
services:
  mapproxy:
    image: kartoza/mapproxy
    container_name: mapproxy
    restart: always
    environment:
      PRODUCTION: true
      PROCESSES: 4
      CHEAPER: 2
      THREADS: 8
      MULTI_MAPPROXY: true
      MULTI_MAPPROXY_DATA_DIR: /multi_mapproxy/configurations
      ALLOW_LISTING: true
    volumes:
      - /data/containers/mapproxy/data:/multi_mapproxy
```

Save the file and run:

```bash
docker-compose up -d
```

This will pull the MapProxy Docker image and start a container. MapProxy will be accessible on the container with `http://localhost:8080`.

## Set Up Nginx with Docker

Afterwards you need to create a Docker Compose file `docker-compose.yml` for Nginx. Here's a example:

```docker
version: '3'

networks:
  default:
    external: true
    name: nginx
    
services:
  nginx:
    image: nginx:latest
    container_name: nginx
    restart: always
    ports:
      - "80:80"
      - "443:443"
    volumes:
      ## Config
      - /data/containers/nginx/config/:/etc/nginx/
      ## SSL
      - /etc/letsencrypt/:/etc/letsencrypt/
      - /etc/ssl/:/etc/ssl/
      ## Logs
      - /data/containers/nginx/logs/:/var/log/nginx
      ## Cache
      - /data/containers/nginx/cache:/var/cache/nginx
```

Then you can create a virtual host for mapproxy under `/data/containers/nginx/config/sites-available/mapproxy` with:

```bash
sudo nano /data/containers/nginx/config/sites-available/mapproxy
```

Copy and paste the following virtual host configuration for your Mapproxy Container :

```nginx
upstream mapproxy_upstream {
  server mapproxy:8080;
}

server {

  server_name mapproxy.domain.com;

  listen 80;

  ## Mapproxy default
  location / {
    proxy_pass http://mapproxy_upstream/;
    proxy_set_header Host $http_host;
  }
}
```

After you created your configuration you need to create a symlink to `/data/containers/nginx/config/sites-enabled/` with:

```bash
sudo ln -S /data/containers/nginx/config/sites-available/mapproxy /data/containers/nginx/config/sites-enabled/
```

In order that your domain gets resolved you have to create a A-record for your Domain under which you want to publish MapProxy which points to your server ip.
Then you need to restart your Nginx Container and now should be able to access http://mapproxy.domain.com where you will be greeted by your MapProxy Instance.

![Screenshot_2024_01_25_154515_63e86fb113.png](https://cms.mxd.codes/uploads/Screenshot_2024_01_25_154515_63e86fb113_aed92b8f04.png)

## Step 3: Caching the Tiles with MapProxy

So far you have set up Nginx and MapProxy with Docker and MapProxy will cache by default all served tiles with the default configuration.
However there are some limitations to the MapProxy caching process because each time a tile gets requested from MapProxy, MapProxy will save the tile to it's cache. But it won't check by default if the tile is old and a newer tile could be served.

E.g. I am serving tiles from MapProxy which visualize my locations where I have ever been to. So I don't want to cache the tiles infinite because they change probably every day

But you can force MapProxy to refresh tiles from the source while serving if they are found to be expired.
The validity conditions are the same as for seeding:

```yaml
#Explanation
  # absolute as ISO time
  refresh_before:
    time: 2010-10-21T12:35:00
  # relative from the time of the tile request
  refresh_before:
    weeks: 1
    days: 7
    hours: 4
    minutes: 15
  # modification time of a given file
  refresh_before:
    mtime: path/to/file
```

So to stay at my example i added:

```yaml
refresh_before:
      days 1
```

This way MapProxy will refresh tiles everyday. This of course only makes sense for data where you want always latest data

So edit your `mapproxy.yaml` like this:

```yaml
services:
  demo:
  tms:
    use_grid_names: true
    # origin for /tiles service
    origin: 'nw'
  kml:
      use_grid_names: true
  wmts:
  wms:
    md:
      title: MapProxy WMS Proxy
      abstract: This is a minimal MapProxy example.

layers:
  - name: osm
    title: Omniscale OSM WMS - osm.omniscale.net
    sources: [osm_cache]

caches:
  osm_cache
    grids: [webmercator]
    sources: [osm_wms]
    refresh_before:
      days: 1

sources:
  osm_wms:
    type: wms
    req:
      url: https://maps.omniscale.net/v2/demo/style.default/service?
      layers: osm

grids:
    webmercator:
        base: GLOBAL_WEBMERCATOR

globals:
```

Save the file and restart your MapProxy Container.

Now MapProxy will always refresh tiles everyday.

## Step 4: Access the MapProxy Tiles

Visit `http://mapproxy.domain.com` in your browser, and you should see MapProxy serving tiles through Nginx. 

By following these steps, you've successfully set up MapProxy with Docker and configured Nginx to serve cached map tiles. This scalable solution allows for efficient geospatial data delivery with the added benefit of easy container management. Adjust the configurations based on your specific requirements and integrate this setup into your mapping projects.

If you decide to to take use of [MultiMapProxy](https://mapproxy.org/docs/nightly/deployment.html "MultiMapProxy")(scroll down to MultiMapProxy) you can just create more configuration files for MapProxy in `/data/containers/mapproxy/data/configurations` and  append the cache path and location blocks like in your existing Nginx configuration for MapProxy.

MapProxy is a powerful open-source proxy for geospatial data that allows for efficient caching and serving of map tiles. Combining MapProxy with Docker and Nginx can provide a scalable and easily manageable solution for serving cached map tiles.

 Setting Up MapProxy with Docker and Serving Cached Tiles via Nginx

[Next.js](https://nextjs.org/ "Next.js") Image Component [next-image](https://nextjs.org/docs/pages/api-reference/components/image "next-image") is a feature introduced in Next.js version 10.0.0 to optimize images and improve the performance of your web-application.

When you use the Next.js Image Component, it automatically optimizes and serves images in modern image formats that improves the performance of your web application. It supports various image sources, such as local images, images from the web, and third-party sources.

However you cannot transform image, e.g. crop images, which is the reason I was looking for a solution which enables my personal website [mxd.codes](https://mxd.codes "mxd.codes") to resize images to my needs.

## imgproxy

[imgproxy](https://imgproxy.net/ "imgproxy") is an open-source image processing server designed to simplify the resizing, cropping, and manipulation of images on the fly. It is often used as part of a web application's infrastructure to ensure efficient delivery of images with optimized sizes and quality. 

Key features of imgproxy include:

1. **On-the-Fly Image Processing:** Imgproxy allows you to resize, crop, rotate, and perform other image manipulations on the fly, based on the URL parameters. This enables efficient delivery of images in various sizes and formats without having to store multiple versions of the same image.

2. **Security:** Imgproxy provides security features such as URL signature generation. This helps prevent unauthorized access and abuse of the image manipulation service.

3. **Performance:** Imgproxy is designed to be performant and can efficiently handle high loads of image processing requests.

4. **Integration with Existing Storage:** Imgproxy can be integrated with various storage solutions, including Amazon S3, Google Cloud Storage, and more.

## Deploy imgproxy with Docker Compose

While searching for a way to deploy imgproxy with docker I found a [imgproxy Docker Compose Project on GitHub](https://github.com/shinsenter/docker-imgproxy/blob/main/docker-compose.yml "imgproxy docker compose") where I changed minor things like the volumes and the web-server configuration.

You can copy this ```docker-compose.yml```file and paste it into Portainer or save it manually in a folder on your server.

```docker
version: '3'

################################################################################
# Ultra Image Server
# A production grade image processing server setup powered by imgproxy and nginx
#
# Author: Mai Nhut Tan <shin@shin.company>
# Copyright: 2021-2023 SHIN Company https://code.shin.company/
# URL: https://shinsenter.github.io/docker-imgproxy/
################################################################################

networks:
################################################################################
 default:
 driver: bridge


services:
################################################################################
 web:
 image: nginx:alpine
 container_name: imgproxy-nginx
 restart: always
 volumes:
 - /data/containers/imgproxy:/var/www/html:ro
 - /etc/imgproxy/imgproxy-nginx.conf:/etc/nginx/conf.d/default.conf:ro
 ports:
 - 8080:80
 links:
 - imgproxy:imgproxy
 environment:
 NGINX_ENTRYPOINT_QUIET_LOGS: 1

################################################################################
 imgproxy:
 restart: unless-stopped
 image: darthsim/imgproxy:${IMGPROXY_TAG:-latest}
 container_name: imgproxy_app
 security_opt:
 - no-new-privileges:true
 volumes:
 - /data/containers/imgproxy:/var/www/html:ro
 expose:
 - 8080
 healthcheck:
 test: ["CMD", "imgproxy", "health"]
 environment:
 ### See:
 ### https://docs.imgproxy.net/configuration/options

 ### log and debug
 IMGPROXY_LOG_LEVEL: "warn"
 IMGPROXY_ENABLE_DEBUG_HEADERS: "false"
 IMGPROXY_DEVELOPMENT_ERRORS_MODE: "false"
 IMGPROXY_REPORT_DOWNLOADING_ERRORS: "false"

 ### timeouts
 IMGPROXY_READ_TIMEOUT: 10
 IMGPROXY_WRITE_TIMEOUT: 10
 IMGPROXY_DOWNLOAD_TIMEOUT: 10
 IMGPROXY_KEEP_ALIVE_TIMEOUT: 300
 IMGPROXY_MAX_SRC_FILE_SIZE: 33554432 # 32MB
 IMGPROXY_MAX_SRC_RESOLUTION: 48

 ### image source
 IMGPROXY_TTL: 2592000 # client-side cache time is 30 days
 IMGPROXY_USE_ETAG: "false"
 IMGPROXY_SO_REUSEPORT: "true"
 IMGPROXY_IGNORE_SSL_VERIFICATION: "true"
 IMGPROXY_LOCAL_FILESYSTEM_ROOT: /home
 IMGPROXY_SKIP_PROCESSING_FORMATS: "svg,webp,avif"

 ### presets
 IMGPROXY_AUTO_ROTATE: "true"
 #IMGPROXY_WATERMARK_PATH: /home/noimage_thumb.jpg
 IMGPROXY_PRESETS: default=resizing_type:fit/gravity:sm,logo=watermark:0.5:soea:10:10:0.15,center_logo=watermark:0.3:ce:0:0:0.3

 ### compression
 IMGPROXY_STRIP_METADATA: "true"
 IMGPROXY_STRIP_COLOR_PROFILE: "true"
 IMGPROXY_FORMAT_QUALITY: jpeg=80,webp=70,avif=50
 IMGPROXY_JPEG_PROGRESSIVE: "false"
 IMGPROXY_PNG_INTERLACED: "false"
 IMGPROXY_PNG_QUANTIZATION_COLORS: 128
 IMGPROXY_PNG_QUANTIZE: "false"
 IMGPROXY_MAX_ANIMATION_FRAMES: 64
 IMGPROXY_GZIP_COMPRESSION: 0
 IMGPROXY_AVIF_SPEED: 8

 ### For URL signature
 IMGPROXY_KEY: IMGPROXY_KEY_KEY
 IMGPROXY_SALT: IMGPROXY_KEY_SALT
 IMGPROXY_SIGNATURE_SIZE: 32
 network_mode: "host" 
```

You will also need a nginx-configuration file for imgproxy which should be saved to ```/etc/imgproxy/imgproxy-nginx.conf```. Of course you can also store the file anywhere else but be sure to change the volume in the docker-compose.yml.


```nginx
upstream upstream_imgproxy {
 server imgproxy:8080;
 keepalive 16;
}

server {
 server_name _;

 location / {
 proxy_pass http://upstream_imgproxy;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 }

}
```

Now you can deploy the stack with

```bash
docker-compose up -d --build --remove-orphans --force-recreate
```
or on Portainer. 

Your imgproxy instance should be now running on http://localhost:8080 which you already can use.

![Screenshot 2024-01-12 113947.png](/uploads/Screenshot_2024_01_12_113947_ed6e757944.png)

But I wanted to integrate it within my personal site built with Next.js so I also had to modify the nginx-configuration for my personal site.
So i used the existing configuration [Nginx reverse proxy with caching for Next.js with imgproxy](https://gist.github.com/hlubek/02955a3f28db168417884b5397ce07c0 "") and copied it to /etc/nginx/sites-available/default.

```nginx
# Based on https://steveholgado.com/nginx-for-nextjs/

# - /var/cache/nginx sets a directory to store the cached assets
# - levels=1:2 sets up a two‑level directory hierarchy as file access speed can be reduced when too many files are in a single directory
# - keys_zone=STATIC:10m defines a shared memory zone for cache keys named “STATIC” and with a size limit of 10MB (which should be more than enough unless you have thousands of files)
# - inactive=7d is the time that items will remain cached without being accessed (7 days), after which they will be removed
# - use_temp_path=off tells NGINX to write files directly to the cache directory and avoid unnecessary copying of data to a temporary storage area first
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;

upstream nextjs_upstream {
 server localhost:3000;
}

upstream imgproxy_upstream {
 server localhost:8080;
}

server {
 listen 80 default_server;

 server_name _;

 server_tokens off;

 gzip on;
 gzip_proxied any;
 gzip_comp_level 4;
 gzip_types text/css application/javascript image/svg+xml;

 proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;

 # Imgproxy paths can contain multiple slashes (e.g. local:///image/file.jpg)
 merge_slashes off;

 location /img/ {

 proxy_cache STATIC;

 proxy_pass http://imgproxy_upstream/;

 # For testing cache - remove before deploying to production
 add_header X-Cache-Status $upstream_cache_status;
 }

 location /_next/static {
 proxy_cache STATIC;
 proxy_pass http://nextjs_upstream;

 # For testing cache - remove before deploying to production
 add_header X-Cache-Status $upstream_cache_status;
 }

 location /static {
 proxy_cache STATIC;

 # Ignore cache control for Next.js assets from /static, re-validate after 60m
 proxy_ignore_headers Cache-Control;
 proxy_cache_valid 60m;

 proxy_pass http://nextjs_upstream;

 # For testing cache - remove before deploying to production
 add_header X-Cache-Status $upstream_cache_status;
 }

 location / {
 proxy_pass http://nextjs_upstream;
 }
}
```
With this configuration all requests with the path `/img/` will be redirected to the imgproxy instance and all other paths to my personal-website.

You can test the configuration with `sudo nginx -t` and restart nginx when the test is successfull with `sudo systemctl restart nginx`.

Now when you access [https://mxd.codes/img/](https://mxd.codes/img/ "imgproxy instance link") you will be redirected to the imgroxy instance and when you access [https://mxd.codes](https://mxd.codes "personal website link") you will be redirected to my personal website.

The last missing piece is a custom image loader for the Next.js site.

## Custom image loader for imgproxy

You can configure a custom `loaderFile` in your `next.config.js` like the following:

```javascript
images: {
 loader: "custom",
 loaderFile: "./src/utils/loader.js",
}
```

This must point to a file relative to the root of your Next.js application. The file must export a default function that returns a string:

```javascript
export default function imgproxyLoader({ src, width, height, quality }) {

 const path =
 `/size:${width ? width : 0}:${height ? height : 0}` +
 `/resizing_type:fill` +
 (quality ? `/quality:${quality}` : "") +
 `/sharpen:0.5` +
 `/plain/${src}` +
 `@webp`

 const host = process.env.NEXT_PUBLIC_IMGPROXY_URL

 const imgUrl = `${host}/insecure${path}`

 return imgUrl
}
```

Now all images you serve with `next/image` will use your custom loader which will be using imgproxy to transform and optimize your images for your Next.js site.

Recently I also started to deploy my personal site with docker so the whole docke-compose.yml now looks like the following, while the nginx configuration file remains the same:

```yaml
version: "3"
 
services:
 nextjs:
 image: mxdcodes/personal-website:latest
 container_name: personal-website
 restart: always
 ports:
 - "3000:3000"
 environment:
 NODE_ENV: production
 network_mode: "host" 
 
 imgproxy:
 restart: unless-stopped
 image: darthsim/imgproxy:${IMGPROXY_TAG:-latest}
 container_name: imgproxy_app
 security_opt:
 - no-new-privileges:true
 volumes:
 - /data/containers/imgproxy/www:/home:cached
 ports:
 - "8080:8080"
 healthcheck:
 test: ["CMD", "imgproxy", "health"]
 environment:
 ### See:
 ### https://docs.imgproxy.net/configuration/options

 ### options
 IMGPROXY_ALLOWED_SOURCES: https://mxd.codes/
 
 ### log and debug
 IMGPROXY_LOG_LEVEL: "warn"
 IMGPROXY_ENABLE_DEBUG_HEADERS: "false"
 IMGPROXY_DEVELOPMENT_ERRORS_MODE: "false"
 IMGPROXY_REPORT_DOWNLOADING_ERRORS: "false"

 ### timeouts
 IMGPROXY_READ_TIMEOUT: 10
 IMGPROXY_WRITE_TIMEOUT: 10
 IMGPROXY_DOWNLOAD_TIMEOUT: 10
 IMGPROXY_KEEP_ALIVE_TIMEOUT: 300
 IMGPROXY_MAX_SRC_FILE_SIZE: 33554432 # 32MB
 IMGPROXY_MAX_SRC_RESOLUTION: 48

 ### image source
 IMGPROXY_TTL: 2592000 # client-side cache time is 30 days
 IMGPROXY_USE_ETAG: "false"
 IMGPROXY_SO_REUSEPORT: "true"
 IMGPROXY_IGNORE_SSL_VERIFICATION: "false"
 IMGPROXY_LOCAL_FILESYSTEM_ROOT: /home
 IMGPROXY_SKIP_PROCESSING_FORMATS: "svg,webp,avif"

 ### presets
 IMGPROXY_AUTO_ROTATE: "true"
 #IMGPROXY_WATERMARK_PATH: /home/noimage_thumb.jpg
 IMGPROXY_PRESETS: default=resizing_type:fit/gravity:sm,logo=watermark:0.5:soea:10:10:0.15,center_logo=watermark:0.3:ce:0:0:0.3

 ### compression
 IMGPROXY_STRIP_METADATA: "true"
 IMGPROXY_STRIP_COLOR_PROFILE: "true"
 IMGPROXY_FORMAT_QUALITY: jpeg=80,webp=70,avif=50
 IMGPROXY_JPEG_PROGRESSIVE: "false"
 IMGPROXY_PNG_INTERLACED: "false"
 IMGPROXY_PNG_QUANTIZATION_COLORS: 128
 IMGPROXY_PNG_QUANTIZE: "false"
 IMGPROXY_MAX_ANIMATION_FRAMES: 64
 IMGPROXY_GZIP_COMPRESSION: 0
 IMGPROXY_AVIF_SPEED: 8

 ### For URL signature
 IMGPROXY_KEY: KEY
 IMGPROXY_SALT: SALT
 IMGPROXY_SIGNATURE_SIZE: 32
 network_mode: "host" 
```

How to transform and optimize images with imgproxy hosted with docker for your Next.js application.

Optimizing images for Next.js sites with imgproxy and docker

This guide is designed for people who want to learn docker infrastructure. Not just how to use docker, but how to stand up docker services in a robust and secure manner. This guide is about standing up a single node docker environment with backups, IP whitelisting, non-root containers (where supported), single sign-on and reverse proxying.

Docker

How to Create a Backup Script for PostgreSQL and MariaDB Containers on a Server

docker-staticmaps: A selfhosted Static Maps API

Dockerizing a Next.js Application with GitHub Actions

Setting Up MapProxy with Docker and Serving Cached Tiles via Nginx

Optimizing images for Next.js sites with imgproxy and docker

Doing More with Docker