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) which can be easily selfhosted.

## Usage

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

- `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:

```yaml
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",
}
```

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. 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.

```yaml
RUN --mount=type=secret,id=NEXT_PUBLIC_CMS_URL \
  export NEXT_PUBLIC_CMS_URL=$(cat /run/secrets/NEXT_PUBLIC_CMS_URL) && \
  npm run build
```

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")

##  Step 1: Set Up MapProxy with Docker

Start by creating a Docker Compose file ```docker-compose.yml``` with the following content:

```yaml
services:
  mapproxy:
    image: mxdcodes/mapproxy-docker:latest
    container_name: mapproxy
    restart: always
    volumes:
      - /data/containers/mapproxy/config:/mapproxy/config
      - /data/containers/mapproxy/cache_data:/mapproxy/cache_data
```

Save the file and run:

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

This will pull the MapProxy Docker image ([https://github.com/dietrichmax/mapproxy-docker](https://github.com/dietrichmax/mapproxy-docker)) and start the container. MapProxy will be accessible with `http://localhost:80` because in the docker image is already Nginx which is used as proxy for MapProxy.

You can store config files in `/data/containers/mapproxy/config`which will be available for MapProxy.

If you want to create a example configuration from Mapproxy you can do it with:

```bash
docker exec -ti mapproxy mapproxy-util create -t base-config /mapproxy/config
```

Afterwards you should see the following if you open `localhost:80`

![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.

Here’s the translation of your text:

Generally, there are two ways to use cache:
- Server Side Caching and
- Client Side Caching

For the server side part I strongly recommend to have a look at the documentation at [https://mapproxy.github.io/mapproxy/latest/caches.html](https://mapproxy.github.io/mapproxy/latest/caches.html). There you will find everything about how you can configure cache with MapProxy. 

Additionally you can set `Cache-Control` and `expires` headers with the global paramater `expires_hours`. 

**expires_hours**

>The number of hours a Tile is valid. TMS clients like web browsers will cache the tile for this time. Clients will try to refresh the tiles after that time. MapProxy supports the ETag and Last-Modified headers and will respond with the appropriate HTTP ‘304 Not modified’ response if the tile was not changed.

Nginx in the docker image will pass these headers to the client so the client will also know how long a tile should be valid. Thats possible with the following Nginx configuration in case you are curious.
```conf
    location / {
        ....
        # Cache
        add_header Cache-Control $upstream_http_cache_control;
        expires $upstream_http_expires;
    }
```

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. However to reduce server load I decided to keep the tiles valid for one hour with the following `global` configuration:

```yaml
globals:
  # cache options
  tiles:
    expires_hours: 168
```

If you restart the MapProxy container after setting the configuration and open the URL of your MapProxy service you will find the according headers:

![cache headers mapproxy.png](https://cms.mxd.codes/uploads/cache_headers_mapproxy_3cc80303ea.png)

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/config:/mapproxy/config` .

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.

```yaml
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.


```conf
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.

```conf
# 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

From Docker to Kubernetes

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

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

From Docker to Kubernetes

Doing More with Docker