Merge pull request #159 from developmentseed/feat/stac-browser-tiler

- add stac browser to docker deployment
- make use of radiant earth browser config to have control over which tiler is used
- create a separate settings object for the browser for readability

Author: emileten

docker-compose.custom.yml

@@ -1,6 +1,18 @@
 version: '3'
 
 services:
+  stac-browser:
+    profiles:
+      - gunicorn
+    build:
+      context: dockerfiles
+      dockerfile: Dockerfile.browser
+    ports:
+      - "${MY_DOCKER_IP:-127.0.0.1}:8085:8085"
+    depends_on:
+      - stac
+      - database
+      - raster
   stac:
     container_name: eoapi.stac
     profiles:

docker-compose.yml

@@ -1,6 +1,19 @@
 version: '3'
 
 services:
+
+  # change to official image when available https://github.com/radiantearth/stac-browser/pull/386
+  stac-browser:
+    build:
+      context: dockerfiles
+      dockerfile: Dockerfile.browser
+    ports:
+      - "${MY_DOCKER_IP:-127.0.0.1}:8085:8085"
+    depends_on:
+      - stac-fastapi
+      - titiler-pgstac
+      - database
+      
   stac-fastapi:
     # Note:
     # the official ghcr.io/stac-utils/stac-fastapi-pgstac image uses python 3.8 and uvicorn

dockerfiles/Dockerfile.browser

@@ -0,0 +1,34 @@
+# Copyright Radiant Earth Foundation
+
+FROM node:lts-alpine3.18 AS build-step
+ARG DYNAMIC_CONFIG=true
+
+WORKDIR /app
+
+RUN apk add --no-cache git
+RUN git clone https://github.com/radiantearth/stac-browser.git .
+# remove the default config.js
+RUN rm config.js
+RUN npm install
+# replace the default config.js with our config file
+COPY ./browser_config.js ./config.js
+RUN \[ "${DYNAMIC_CONFIG}" == "true" \] && sed -i 's/<!-- <script defer="defer" src=".\/config.js"><\/script> -->/<script defer="defer" src=".\/config.js"><\/script>/g' public/index.html
+RUN npm run build
+
+
+FROM nginx:1-alpine-slim
+
+COPY --from=build-step /app/dist /usr/share/nginx/html
+COPY --from=build-step /app/config.schema.json /etc/nginx/conf.d/config.schema.json
+
+# change default port to 8084
+RUN apk add jq pcre-tools && \
+    sed -i 's/\s*listen\s*80;/    listen 8084;/' /etc/nginx/conf.d/default.conf && \
+    sed -i 's/\s*location \/ {/    location \/ {\n        try_files $uri $uri\/ \/index.html;/' /etc/nginx/conf.d/default.conf
+
+EXPOSE 8084
+
+STOPSIGNAL SIGTERM
+
+# override entrypoint, which calls nginx-entrypoint underneath
+COPY --from=build-step /app/docker/docker-entrypoint.sh ./docker-entrypoint.d/40-stac-browser-entrypoint.sh

dockerfiles/browser_config.js

@@ -0,0 +1,39 @@
+module.exports = {
+    catalogUrl: "http://0.0.0.0:8081",
+    catalogTitle: "eoAPI STAC Browser",
+    allowExternalAccess: true, // Must be true if catalogUrl is not given
+    allowedDomains: [],
+    detectLocaleFromBrowser: true,
+    storeLocale: true,
+    locale: "en",
+    fallbackLocale: "en",
+    supportedLocales: [
+        "de",
+        "es",
+        "en",
+        "fr",
+        "it",
+        "ro"
+    ],
+    apiCatalogPriority: null,
+    useTileLayerAsFallback: true,
+    displayGeoTiffByDefault: false,
+    buildTileUrlTemplate: ({href, asset}) => "http://0.0.0.0:8082/cog/tiles/{z}/{x}/{y}@2x?url=" + encodeURIComponent(asset.href.startsWith("/vsi") ? asset.href : href),
+    stacProxyUrl: null,
+    pathPrefix: "/",
+    historyMode: "history",
+    cardViewMode: "cards",
+    cardViewSort: "asc",
+    showThumbnailsAsAssets: false,
+    stacLint: true,
+    geoTiffResolution: 128,
+    redirectLegacyUrls: false,
+    itemsPerPage: 12,
+    defaultThumbnailSize: null,
+    maxPreviewsOnMap: 50,
+    crossOriginMedia: null,
+    requestHeaders: {},
+    requestQueryParameters: {},
+    preprocessSTAC: null,
+    authConfig: null
+};

infrastructure/aws/cdk/app.py

@@ -16,6 +16,7 @@
     eoAPISettings,
     eoDBSettings,
     eoRasterSettings,
+    eoStacBrowserSettings,
     eoSTACSettings,
     eoVectorSettings,
 )
@@ -242,10 +243,9 @@ def __init__(  # noqa: C901
                 },
             )
 
-            if eostac_settings.stac_api_custom_domain_name is not None:
-                assert (
-                    eostac_settings.stac_browser_github_tag is not None
-                ), "stac_browser_github_tag must be set if stac_api_custom_domain_name is not None."
+            if "browser" in eoapi_settings.functions:
+                eobrowser_settings = eoStacBrowserSettings()
+
                 stac_browser_bucket = s3.Bucket(
                     self,
                     "stac-browser-bucket",
@@ -268,10 +268,11 @@ def __init__(  # noqa: C901
                 StacBrowser(
                     self,
                     "stac-browser",
-                    github_repo_tag=eostac_settings.stac_browser_github_tag,
-                    stac_catalog_url=eostac_settings.stac_api_custom_domain_name,
+                    github_repo_tag=eobrowser_settings.stac_browser_github_tag,
+                    stac_catalog_url=eobrowser_settings.stac_catalog_url,
                     website_index_document="index.html",
                     bucket_arn=stac_browser_bucket.bucket_arn,
+                    config_file_path=eobrowser_settings.config_file_path,
                 )
 
         # eoapi.vector

infrastructure/aws/cdk/browser_config.example.js

@@ -0,0 +1,39 @@
+module.exports = {
+    catalogUrl: null,
+    catalogTitle: "eoAPI STAC Browser",
+    allowExternalAccess: true, // Must be true if catalogUrl is not given
+    allowedDomains: [],
+    detectLocaleFromBrowser: true,
+    storeLocale: true,
+    locale: "en",
+    fallbackLocale: "en",
+    supportedLocales: [
+        "de",
+        "es",
+        "en",
+        "fr",
+        "it",
+        "ro"
+    ],
+    apiCatalogPriority: null,
+    useTileLayerAsFallback: true,
+    displayGeoTiffByDefault: false,
+    buildTileUrlTemplate: ({href, asset}) => "https://raster.dev/cog/tiles/{z}/{x}/{y}@2x?url=" + encodeURIComponent(asset.href.startsWith("/vsi") ? asset.href : href),
+    stacProxyUrl: null,
+    pathPrefix: "/",
+    historyMode: "history",
+    cardViewMode: "cards",
+    cardViewSort: "asc",
+    showThumbnailsAsAssets: false,
+    stacLint: true,
+    geoTiffResolution: 128,
+    redirectLegacyUrls: false,
+    itemsPerPage: 12,
+    defaultThumbnailSize: null,
+    maxPreviewsOnMap: 50,
+    crossOriginMedia: null,
+    requestHeaders: {},
+    requestQueryParameters: {},
+    preprocessSTAC: null,
+    authConfig: null
+};

infrastructure/aws/cdk/config.py

@@ -13,6 +13,7 @@ class functionName(str, Enum):
     raster = "raster"
     vector = "vector"
     ingestor = "ingestor"
+    browser = "browser"  # not actually a function, but this keeps things clean.
 
 
 class eoAPISettings(BaseSettings):
@@ -57,10 +58,6 @@ class eoSTACSettings(BaseSettings):
 
     timeout: int = 10
     memory: int = 256
-    stac_browser_github_tag: None | str = "v3.1.0"
-    stac_api_custom_domain_name: None | str = (
-        None  # if not none, will try to deploy a browser with the above tag
-    )
     model_config = {
         "env_prefix": "CDK_EOAPI_STAC_",
         "env_file": ".env",
@@ -115,3 +112,15 @@ class eoVectorSettings(BaseSettings):
         "env_prefix": "CDK_EOAPI_VECTOR_",
         "env_file": ".env",
     }
+
+
+class eoStacBrowserSettings(BaseSettings):
+    """STAC browser settings"""
+
+    stac_browser_github_tag: None | str = "v3.1.0"
+    stac_catalog_url: None | str = None
+    config_file_path: None | str = None
+    model_config = {
+        "env_prefix": "CDK_EOAPI_BROWSER_",
+        "env_file": ".env",
+    }

infrastructure/aws/requirements-cdk.txt

@@ -7,4 +7,4 @@ boto3==1.28.71
 # pydantic settings
 pydantic~=2.0
 pydantic-settings~=2.0
-eoapi-cdk==6.0.0
+eoapi-cdk==6.1.0