Build image with env vars

Author: Rub21

.github/workflows/docker-publish.yaml

@@ -2,11 +2,14 @@ name: Build Docker Image, Push to GHCR
 
 on:
   push:
+    # Publish HEAD of main branch as :latest image tag
     branches: [ "main", "ohm" ]
+    # Publish semver tags as named image tags
+    tags: [ 'v*.*.*' ]
 
 env:
   REGISTRY: ghcr.io
-  IMAGE_NAME: openhistoricalmap/osmcha-frontend
+  IMAGE_NAME: opnhistoricalmap/osmcha-frontend
   REACT_APP_PAGE_SIZE: "25"
   REACT_APP_OVERPASS_BASE: "//overpass-api.openhistoricalmap.org/api/interpreter"
   REACT_APP_MAPBOX_ACCESS_TOKEN: "pk.eyJ1Ijoib3Blbmhpc3RvcmljYWxtYXAiLCJhIjoiY202a3ZqcHN1MDJnYzJpcHhlczVqbXBuNiJ9.DvNrZEF1ISEluA9k-MSHtA"
@@ -22,54 +25,49 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
+    - name: Checkout code
+      uses: actions/checkout@v4
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
+    # Enable BuildKit for docker builds. This enables building
+    # multi-platform images and exporting the layer cache
+    # https://github.com/docker/setup-buildx-action
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
 
-      - name: Install dependencies
-        run: yarn install
+    # https://github.com/docker/login-action
+    - name: Login to Registry ${{ env.REGISTRY }}
+      uses: docker/login-action@v3
+      with:
+        registry: ${{ env.REGISTRY }}
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build React App with Environment Variables
-        run: |
-          echo "REACT_APP_PAGE_SIZE=${{ env.REACT_APP_PAGE_SIZE }}" >> .env
-          echo "REACT_APP_OVERPASS_BASE=${{ env.REACT_APP_OVERPASS_BASE }}" >> .env
-          echo "REACT_APP_MAPBOX_ACCESS_TOKEN=${{ env.REACT_APP_MAPBOX_ACCESS_TOKEN }}" >> .env
-          echo "REACT_APP_OSM_URL=${{ env.REACT_APP_OSM_URL }}" >> .env
-          echo "REACT_APP_OSM_API=${{ env.REACT_APP_OSM_API }}" >> .env
-          echo "REACT_APP_NOMINATIM_URL=${{ env.REACT_APP_NOMINATIM_URL }}" >> .env
-          echo "REACT_APP_DEFAULT_FROM_DATE=${{ env.REACT_APP_DEFAULT_FROM_DATE }}" >> .env
-          echo "REACT_APP_DEFAULT_TO_DATE=${{ env.REACT_APP_DEFAULT_TO_DATE }}" >> .env
-          echo "REACT_APP_DISABLE_REAL_CHANGESETS=${{ env.REACT_APP_DISABLE_REAL_CHANGESETS }}" >> .env
+    # Extract metadata (tags, labels) for Docker
+    # https://github.com/docker/metadata-action
+    - name: Extract Docker metadata
+      id: meta
+      uses: docker/metadata-action@v5
+      with:
+        images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
-          cat .env  # Debugging: check if env variables are set correctly
-          yarn build
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+    # https://github.com/docker/build-push-action
+    - name: Build and push Docker image
+      uses: docker/build-push-action@v5
+      with:
+        context: .
+        push: true
+        tags: ${{ steps.meta.outputs.tags }}
+        labels: ${{ steps.meta.outputs.labels }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+        build-args: |
+          REACT_APP_PAGE_SIZE=${{ env.REACT_APP_PAGE_SIZE }}
+          REACT_APP_OVERPASS_BASE=${{ env.REACT_APP_OVERPASS_BASE }}
+          REACT_APP_MAPBOX_ACCESS_TOKEN=${{ env.REACT_APP_MAPBOX_ACCESS_TOKEN }}
+          REACT_APP_OSM_URL=${{ env.REACT_APP_OSM_URL }}
+          REACT_APP_OSM_API=${{ env.REACT_APP_OSM_API }}
+          REACT_APP_NOMINATIM_URL=${{ env.REACT_APP_NOMINATIM_URL }}
+          REACT_APP_DEFAULT_FROM_DATE=${{ env.REACT_APP_DEFAULT_FROM_DATE }}
+          REACT_APP_DEFAULT_TO_DATE=${{ env.REACT_APP_DEFAULT_TO_DATE }}
+          REACT_APP_DISABLE_REAL_CHANGESETS=${{ env.REACT_APP_DISABLE_REAL_CHANGESETS }}
+