feat: Add docker image for OSRM frontend

- docker image contains OSRM frontend and nginx

docker-orchestration/README.md

@@ -6,5 +6,11 @@ Base image for telenav osrm-backend development, include all building and runnin
 See details in [osrm-backend-dev docker](./osrm-backend-dev/).    
 
 ### osrm-backend
-Image within built osrm binaries(`osrm-extract/osrm-partition/osrm-customize/...`) and running dependencies.     
+Image within built osrm binaries(`osrm-extract/osrm-partition/osrm-customize/...`) and running dependencies.  
-See details in [osrm-backend docker](./osrm-backend/)
+See details in [osrm-backend docker](./osrm-backend/)
+
+### osrm-frontend
+Image contains web tool to check routing and guidance result.  
+It uses MapBox GL JS and apply routing response on top of Mapbox vector tiles.  
+See details in [osrm-frontend-docker](./osrm-frontend-docker/README.md)
+

docker-orchestration/osrm-frontend-docker/Dockerfile

@@ -0,0 +1,28 @@
+FROM node
+
+RUN apt-get update && apt-get install -y \
+  nginx \
+  git \
+  && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
+
+# forward request and error logs to docker log collector
+RUN ln -sf /dev/stdout /var/log/nginx/access.log \
+	&& ln -sf /dev/stderr /var/log/nginx/error.log
+
+ENV work_dir /app
+WORKDIR ${work_dir}
+
+# install OSRM-front
+RUN git clone https://github.com/Project-OSRM/osrm-frontend.git .
+COPY ./osrm_options.js ./src/leaflet_options.js
+
+RUN npm install
+RUN make
+
+# configure nginx
+COPY ./nginx.conf /etc/nginx/sites-enabled/default
+
+EXPOSE 80
+
+COPY ./start.sh ./start.sh
+CMD ./start.sh

docker-orchestration/osrm-frontend-docker/README.md

@@ -0,0 +1,35 @@
+# Build OSRM frontend
+
+OSRM frontend image has been built from github's code.
+
+<img src="osrm-frontend-backend-arch.png" alt="osrm-frontend-backend-arch" width="600"/>
+
+
+## Build image
+Go to the folder where docker file located  
+```bash
+pwd
+# local-path/osrm-backend/docker-orchestration/osrm-frontend-docker/
+```
+Run following command
+```bash
+docker build -t osrm-frontend-test -f Dockerfile .
+```
+
+## Start container
+
+```bash
+docker run -d --link osrm-api:api --name osrm-ca-front --restart=always -p 8080:80 osrm-front-test 
+```
+
+Notes:  
+- docker run --link combines two docker container together.
+  Latter we could try with [docker bridge network](https://docs.docker.com/network/bridge/)
+
+<br/>
+Visit OSRM front end with
+
+```bash
+http://ipaddress:8080
+```
+<img src="osrm-frontend.png" alt="osrm-frontend" width="600"/>

docker-orchestration/osrm-frontend-docker/nginx.conf

@@ -0,0 +1,24 @@
+include upstream.conf;
+
+server {
+  listen 80;
+
+  charset    utf-8;
+  gzip       on;
+  gzip_types text/plain text/css application/x-javascript;
+  
+  root /app;
+
+  location / {
+    try_files $uri /index.html;
+  }
+  
+  location /api/ {
+      #proxy_set_header X-Real-IP $remote_addr;
+      #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header Host $http_host;
+      #proxy_set_header X-NginX-Proxy true;
+      proxy_pass http://api_server/;
+      proxy_redirect off;
+  }
+}

docker-orchestration/osrm-frontend-docker/osrm_options.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var streets = L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg', {
+    attribution: '<a href="https://www.mapbox.com/about/maps">© Mapbox</a> <a href="http://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="http://mapbox.com/map-feedback/">Improve this map</a>'
+  }),
+  outdoors = L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg', {
+    attribution: '<a href="https://www.mapbox.com/about/maps">© Mapbox</a> <a href="http://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="http://mapbox.com/map-feedback/">Improve this map</a>'
+  }),
+  satellite = L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets-satellite/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg', {
+    attribution: '<a href="https://www.mapbox.com/about/maps">© Mapbox</a> <a href="http://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="http://mapbox.com/map-feedback/">Improve this map</a>'
+  }),
+  osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '© <a href="http://www.openstreetmap.org/copyright/en">OpenStreetMap</a> contributors'
+  }),
+  osm_de = L.tileLayer('http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
+    attribution: '© <a href="http://www.openstreetmap.org/copyright/en">OpenStreetMap</a> contributors'
+  }),
+  small_components = L.tileLayer('http://tools.geofabrik.de/osmi/tiles/routing_i/{z}/{x}/{y}.png', {})
+
+module.exports = {
+  defaultState: {
+    centerLat: 37.399016,
+    centerLng: -121.976676,
+    center: L.latLng(37.399016, -121.976676),
+    zoom: 13,
+    waypoints: [],
+    language: 'en',
+    alternative: true,
+    layer: streets
+  },
+  services: [{
+    label: 'Car (fastest)',
+    path: '/api/route/v1/'
+  }],
+  layer: [{
+    'Mapbox Streets': streets,
+    'Mapbox Outdoors': outdoors,
+    'Mapbox Streets Satellite': satellite,
+    'openstreetmap.org': osm,
+    'openstreetmap.de.org': osm_de
+  }],
+  overlay: {
+    'Small Components': small_components
+  },
+  baselayer: {
+    one: streets,
+    two: outdoors,
+    three: satellite,
+    four: osm,
+    five: osm_de
+  }
+};

docker-orchestration/osrm-frontend-docker/start.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+set -e
+
+echo "upstream api_server { server ${API_PORT_5000_TCP_ADDR}:${API_PORT_5000_TCP_PORT}; }" > /etc/nginx/upstream.conf
+nginx -g "daemon off;"