From 1507625e57639220a06cd17ac96f5cd9a2fbc510 Mon Sep 17 00:00:00 2001 From: Yuri Astrakhan Date: Sat, 26 Aug 2023 09:52:43 -0400 Subject: [PATCH] Fix demo (#841) This fixes Demo https://martin.maplibre.org/ site (the new code is already in production there). Main fixes: * uses HTTPS again, just like the previous site * uses nginx * fixes all the relative paths, maplibre, minor other things --- demo/docker-compose.yml | 5 +- demo/frontend/.dockerignore | 4 + demo/frontend/Dockerfile | 4 +- demo/frontend/dev.Dockerfile | 12 +++ demo/frontend/nginx.conf | 93 +++++++++++++++++++ .../Components/Map/Filters/Layers/Layers.jsx | 2 +- demo/frontend/src/Components/Map/Map.tsx | 22 ++--- demo/frontend/src/config/layers.ts | 12 +-- demo/justfile | 4 + docs/src/introduction.md | 2 + nginx.conf | 81 ---------------- 11 files changed, 138 insertions(+), 103 deletions(-) create mode 100644 demo/frontend/dev.Dockerfile create mode 100644 demo/frontend/nginx.conf delete mode 100644 nginx.conf diff --git a/demo/docker-compose.yml b/demo/docker-compose.yml index 8eb4edae..d86f40bd 100644 --- a/demo/docker-compose.yml +++ b/demo/docker-compose.yml @@ -9,7 +9,10 @@ services: depends_on: - tiles ports: - - "80:8080" + - "80:80" + - "443:443" + volumes: + - ./certs:/etc/ssl/certs tiles: image: ghcr.io/maplibre/martin diff --git a/demo/frontend/.dockerignore b/demo/frontend/.dockerignore index 62d1323d..c8b2f50f 100644 --- a/demo/frontend/.dockerignore +++ b/demo/frontend/.dockerignore @@ -1,3 +1,7 @@ +*Dockerfile +.dockerignore +.vscode + ### Node template # Logs logs diff --git a/demo/frontend/Dockerfile b/demo/frontend/Dockerfile index 41d9d398..d234f8ad 100644 --- a/demo/frontend/Dockerfile +++ b/demo/frontend/Dockerfile @@ -9,4 +9,6 @@ RUN yarn install COPY . . RUN yarn run build -CMD ["yarn", "run", "preview"] +FROM nginx:alpine +COPY nginx.conf /etc/nginx/nginx.conf +COPY --from=builder /usr/src/app/dist /usr/share/nginx/html diff --git a/demo/frontend/dev.Dockerfile b/demo/frontend/dev.Dockerfile new file mode 100644 index 00000000..41d9d398 --- /dev/null +++ b/demo/frontend/dev.Dockerfile @@ -0,0 +1,12 @@ +FROM node:alpine as builder + +WORKDIR /usr/src/app + +COPY package.json . +COPY yarn.lock . +RUN yarn install + +COPY . . +RUN yarn run build + +CMD ["yarn", "run", "preview"] diff --git a/demo/frontend/nginx.conf b/demo/frontend/nginx.conf new file mode 100644 index 00000000..e9803800 --- /dev/null +++ b/demo/frontend/nginx.conf @@ -0,0 +1,93 @@ +user nginx; +worker_processes auto; +worker_cpu_affinity auto; +pid /run/nginx.pid; + +events { + worker_connections 4086; + use epoll; + multi_accept on; +} + +http { + sendfile on; + tcp_nopush on; + tcp_nodelay on; + keepalive_timeout 65; + keepalive_requests 1000; + types_hash_max_size 2048; + + include /etc/nginx/mime.types; + default_type application/octet-stream; + + access_log /var/log/nginx/access.log; + error_log /var/log/nginx/error.log; + + gzip on; + gzip_vary on; + gzip_proxied any; + gzip_comp_level 6; + gzip_buffers 16 8k; + gzip_http_version 1.1; + gzip_min_length 256; + gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml + application/javascript application/json application/x-protobuf; + + proxy_cache_path /var/cache/nginx/ + levels=1:2 + max_size=10g + inactive=60m + use_temp_path=off + keys_zone=backend_cache:10m; + + upstream tiles_upstream { + server tiles:3000; + } + + server { + # listen 80; + listen 443 ssl default_server; + listen [::]:443 ssl default_server; + + ssl_certificate /etc/ssl/certs/cert.pem; + ssl_certificate_key /etc/ssl/certs/private.pem; + + server_name localhost martin.maplibre.org maplibre.org cloudflare.com; + resolver 127.0.0.1; + + location / { + root /usr/share/nginx/html; + try_files $uri /index.html; + } + + location ~ /tiles/(?.*) { + proxy_set_header Host $host; + proxy_set_header X-Forwarded-Proto "https"; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Host $host; + proxy_set_header X-Rewrite-URL $uri; + proxy_redirect off; + + proxy_connect_timeout 5m; + proxy_send_timeout 5m; + proxy_read_timeout 5m; + send_timeout 5m; + + proxy_cache backend_cache; + proxy_cache_lock on; + proxy_cache_revalidate on; + proxy_cache_valid 200 204 302 1d; + proxy_cache_valid 404 1m; + proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504; + add_header X-Cache-Status $upstream_cache_status; + + proxy_pass http://tiles_upstream/$fwd_path$is_args$args; + } + + error_page 500 502 503 504 /50x.html; + location = /50x.html { + root /usr/share/nginx/html; + } + } +} diff --git a/demo/frontend/src/Components/Map/Filters/Layers/Layers.jsx b/demo/frontend/src/Components/Map/Filters/Layers/Layers.jsx index 711d90b9..2aa0786e 100644 --- a/demo/frontend/src/Components/Map/Filters/Layers/Layers.jsx +++ b/demo/frontend/src/Components/Map/Filters/Layers/Layers.jsx @@ -18,7 +18,7 @@ class Layers extends PureComponent { return ( layers.map((layer) => { const isLayerVisible = visibleLayer === layer.id; - const [fromColor, toColor] = getColorsFromLayer(layer.mapboxLayer, 'fill-extrusion-color'); + const [fromColor, toColor] = getColorsFromLayer(layer.maplibreLayer, 'fill-extrusion-color'); return ( { +class Map extends PureComponent<{}, {visibleLayer: any, range: any, hour: any}> { map: any; nav: any; - constructor(props) { + constructor(props: {} | Readonly<{}>) { super(props); this.state = { visibleLayer: 'trips', @@ -39,33 +39,29 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> { }); this.nav = new maplibregl.NavigationControl(); - this.map.addControl(this.nav, 'top-right'); this.map.on('load', this.mapOnLoad); } componentDidUpdate() { - const queryParams = this.getQueryParams(); - const newStyleUrl = `http://localhost:3000/get_trips?${queryParams}`; const newStyle = this.map.getStyle(); - - newStyle.sources['public.get_trips'].url = newStyleUrl; + newStyle.sources['trips_source'].url = `/tiles/get_trips?${this.getQueryParams()}`; this.map.setStyle(newStyle); } mapOnLoad = () => { const queryParams = this.getQueryParams(); - this.map.addSource('public.get_trips', { + this.map.addSource('trips_source', { type: 'vector', - url: `http://localhost:3000/get_trips?${queryParams}` + url: `/tiles/get_trips?${queryParams}` }); - layers.forEach(({ mapboxLayer }) => { - this.map.addLayer(mapboxLayer, 'place_town'); + layers.forEach(({ maplibreLayer }) => { + this.map.addLayer(maplibreLayer, 'place_town'); }); }; - changeFilter = (filter, value) => { + changeFilter = (filter: string, value: any) => { this.setState(state => ({ ...state, [filter]: value @@ -81,7 +77,7 @@ class Map extends PureComponent<{}, {visibleLayer, range, hour}> { return encodeURI(`date_from=${dateFrom}&date_to=${dateTo}&hour=${hour}`); }; - toggleLayer = (layerId) => { + toggleLayer = (layerId: string) => { layers.forEach(({ id }) => { if (layerId === id) { this.map.setLayoutProperty(id, 'visibility', 'visible'); diff --git a/demo/frontend/src/config/layers.ts b/demo/frontend/src/config/layers.ts index d236679f..23f902dc 100644 --- a/demo/frontend/src/config/layers.ts +++ b/demo/frontend/src/config/layers.ts @@ -1,10 +1,10 @@ export default [ { id: 'trips', - mapboxLayer: { + maplibreLayer: { id: 'trips', type: 'fill-extrusion', - source: 'public.get_trips', + source: 'trips_source', 'source-layer': 'trips', layout: { visibility: 'visible' @@ -78,10 +78,10 @@ export default [ }, { id: 'trips_price', - mapboxLayer: { + maplibreLayer: { id: 'trips_price', type: 'fill-extrusion', - source: 'public.get_trips', + source: 'trips_source', 'source-layer': 'trips', layout: { visibility: 'none' @@ -133,10 +133,10 @@ export default [ }, { id: 'trips_duration', - mapboxLayer: { + maplibreLayer: { id: 'trips_duration', type: 'fill-extrusion', - source: 'public.get_trips', + source: 'trips_source', 'source-layer': 'trips', layout: { visibility: 'none' diff --git a/demo/justfile b/demo/justfile index f39e9a4e..a5e2207b 100644 --- a/demo/justfile +++ b/demo/justfile @@ -19,3 +19,7 @@ up-backend: frontend *ARGS: docker-compose up frontend {{ ARGS }} + +[no-exit-message] +frontend-sh: + docker-compose run --interactive --entrypoint sh frontend diff --git a/docs/src/introduction.md b/docs/src/introduction.md index d588689e..c9c0b95e 100644 --- a/docs/src/introduction.md +++ b/docs/src/introduction.md @@ -2,6 +2,8 @@ Martin is a tile server able to generate and serve [vector tiles](https://github.com/mapbox/vector-tile-spec) on the fly from large [PostGIS](https://github.com/postgis/postgis) databases, [PMTiles](https://protomaps.com/blog/pmtiles-v3-whats-new), and [MBTiles](https://github.com/mapbox/mbtiles-spec) files, allowing multiple tile sources to be dynamically combined into one. Martin optimizes for speed and heavy traffic, and is written in [Rust](https://github.com/rust-lang/rust). +See also [Martin demo site](https://martin.maplibre.org/) + --- [![Book](https://img.shields.io/badge/docs-Book-informational)](https://maplibre.org/martin) diff --git a/nginx.conf b/nginx.conf deleted file mode 100644 index 86c724d4..00000000 --- a/nginx.conf +++ /dev/null @@ -1,81 +0,0 @@ - -user nginx; -worker_processes auto; - -error_log /var/log/nginx/error.log notice; -pid /var/run/nginx.pid; - - -events { - worker_connections 1024; -} - - -http { - include /etc/nginx/mime.types; - default_type application/octet-stream; - - log_format main '$remote_addr - $remote_user [$time_local] "$request" ' - '$status $body_bytes_sent "$http_referer" ' - '"$http_user_agent" "$http_x_forwarded_for"'; - - access_log /var/log/nginx/access.log main; - - sendfile on; - tcp_nopush on; - - keepalive_timeout 65; - - gzip on; - gzip_vary on; - gzip_proxied any; - gzip_comp_level 6; - gzip_buffers 16 8k; - gzip_http_version 1.1; - gzip_min_length 256; - gzip_types text/plain text/css text/xml text/javascript application/x-javascript - application/xml application/javascript application/json application/x-protobuf; - - proxy_cache_path /var/cache/nginx/ - levels=1:2 - max_size=10g - inactive=60m - use_temp_path=off - keys_zone=tiles_cache:10m; - - upstream martin_upstream { - server martin:3000; - } - - server { - listen 80; - resolver 127.0.0.11; - - location ~ /tiles/(?.*) { - proxy_set_header Host $host; - proxy_set_header X-Real-IP $remote_addr; - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header X-Forwarded-Host $host; - proxy_set_header X-Rewrite-URL $uri; - proxy_redirect off; - - proxy_connect_timeout 15m; - proxy_send_timeout 15m; - proxy_read_timeout 15m; - send_timeout 15m; - - proxy_cache tiles_cache; - proxy_cache_lock on; - proxy_cache_revalidate on; - - # Set caching time for responses - proxy_cache_valid 200 204 302 1h; - proxy_cache_valid 404 1m; - - proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504; - add_header X-Cache-Status $upstream_cache_status; - - proxy_pass http://martin_upstream/$fwd_path$is_args$args; - } - } -}