Better docker for the frontend (#240)

* Exclude vscode local settings

* Switch the image to nginx with ENV support

* Add some doc

* Fix travis config

* Ignore coverage data

* Remove version labels

* Fix the Dockerfile according to the recent refactoring

* Cleanup

* Change maintainer

According to @woss request

* Fix travis config

frontend/.nvmrc

@@ -0,0 +1 @@
+12

frontend/Dockerfile

@@ -0,0 +1,31 @@
+#### BUILDER IMAGE  ####
+FROM node:12 as builder
+LABEL maintainer="Chevdor <chevdor@gmail.com>"
+LABEL description="Polkadot Telemetry frontend builder image"
+
+WORKDIR /opt/builder
+
+COPY . .
+RUN yarn install && \
+    yarn build && \
+    yarn cache clean
+
+
+#### OUTPUT IMAGE ####
+FROM nginx:stable-alpine
+LABEL maintainer="Chevdor <chevdor@gmail.com>"
+LABEL description="Polkadot Telemetry frontend"
+
+ENV SUBSTRATE_TELEMETRY_URL=
+
+WORKDIR /usr/share/nginx/html
+
+COPY --from=builder /opt/builder/env.sh /usr/bin/
+RUN apk add --no-cache bash; chmod +x /usr/bin/env.sh
+
+COPY --from=builder /opt/builder/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /opt/builder/build /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["/bin/bash", "-c", "/usr/bin/env.sh && nginx -g \"daemon off;\""]

frontend/env.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+# This script is used when the docker container starts and does the magic to
+# bring the ENV variables to the generated static UI.
+
+TARGET=./env-config.js
+
+# Recreate config file
+echo -n > $TARGET
+
+declare -a vars=(
+  "SUBSTRATE_TELEMETRY_URL"
+  "SUBSTRATE_TELEMETRY_SAMPLE"
+)
+
+echo "window.process_env = {" >> $TARGET
+for VAR in ${vars[@]}; do
+  echo "  $VAR: \"${!VAR}\"," >> $TARGET
+done
+echo "}" >> $TARGET

frontend/nginx/nginx.conf

@@ -0,0 +1,27 @@
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log warn;
+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;
+    include /etc/nginx/conf.d/*.conf;
+}

frontend/public/index.html

@@ -6,6 +6,7 @@
     <meta name="theme-color" content="#000000">
     <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
     <title>Polkadot Telemetry</title>
+    <script type="text/javascript" src="/env-config.js"></script>
     <style>
       body, html {
         background: #fff;