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

.dockerignore

@@ -0,0 +1,4 @@
+build
+Dockerfile
+node_modules
+.git

.gitignore

@@ -22,3 +22,6 @@ build
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vscode
+env-config.js
+.nyc

.travis.yml

@@ -29,8 +29,8 @@ before_script:
   - curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -f
 
 script:
+  - cd frontend
   - yarn
-  - cd frontend && yarn
   - yarn test
   - yarn check
   - yarn build

README.md

@@ -52,15 +52,22 @@ Follow up installation instructions from the [Polkadot repo](https://github.com/
 ### Run via Docker
 
 To run via docker make sure that you have Docker Desktop
-
-- If you dont you can download for you OS here [Docker Desktop](https://www.docker.com/products/docker-desktop)
-
-```sh
+  - If you don't you can download for you OS here [Docker Desktop](https://www.docker.com/products/docker-desktop)
+```
 docker-compose up --build -d
 ```
-
-- -d stands for detach, if you would like to see logs i recommend using [Kitmatic](https://kitematic.com/) or don't use the -d
-- --build will build the images and rebuild, but this is not required every time
-- If you want to makes UI changes, there is no need to rebuild the image as the files are being copied in via volumes.
+ - `-d` stands for detach, if you would like to see logs I recommend using [Kitmatic](https://kitematic.com/) or don't use the -d
+ - `--build` will build the images and rebuild, but this is not required every time
+ - If you want to makes UI changes, there is no need to rebuild the image as the files are being copied in via volumes.
 
 Now navigate to localhost:3000 in your browser to view the app.
+
+## Docker
+
+### Build & Publish the Frontend docker image
+
+The building process is standard. You just need to notice that the Dockerfile is in ./packages/frontend/ and tell docker about it. The context must remain the repository's root though.
+
+```
+DOCKER_USER=chevdor ./scripts/build-docker-frontend.sh 
+```

frontend.Dockerfile

@@ -1,11 +0,0 @@
-FROM node:10-alpine
-
-WORKDIR /app
-
-RUN apk add --no-cache python make g++
-
-COPY ./scripts ./scripts
-COPY ./packages ./packages
-COPY ./package.json ./yarn.lock ./tsconfig.json ./
-
-RUN yarn && yarn cache clean

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;

scripts/build-docker-frontend.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+cd `git rev-parse --show-toplevel`
+
+IMAGE=telemetry-frontend
+DOCKER_USER=${DOCKER_USER:-paritytech} 
+echo "Publishing $IMAGE as $DOCKER_USER"
+
+docker build -t $IMAGE -f packages/frontend/Dockerfile .
+docker tag $IMAGE $DOCKER_USER/$IMAGE
+docker push $DOCKER_USER/$IMAGE