From d15409bf2ebb5945b5617e9df1fcb960acc89393 Mon Sep 17 00:00:00 2001 From: Chevdor Date: Wed, 15 Apr 2020 11:15:11 +0200 Subject: [PATCH] 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 | 4 ++++ .gitignore | 3 +++ .travis.yml | 2 +- README.md | 23 +++++++++++++++-------- frontend.Dockerfile | 11 ----------- frontend/.nvmrc | 1 + frontend/Dockerfile | 31 +++++++++++++++++++++++++++++++ frontend/env.sh | 20 ++++++++++++++++++++ frontend/nginx/nginx.conf | 27 +++++++++++++++++++++++++++ frontend/public/index.html | 1 + scripts/build-docker-frontend.sh | 11 +++++++++++ 11 files changed, 114 insertions(+), 20 deletions(-) create mode 100644 .dockerignore delete mode 100644 frontend.Dockerfile create mode 100644 frontend/.nvmrc create mode 100644 frontend/Dockerfile create mode 100755 frontend/env.sh create mode 100644 frontend/nginx/nginx.conf create mode 100755 scripts/build-docker-frontend.sh diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..05eb05e --- /dev/null +++ b/.dockerignore @@ -0,0 +1,4 @@ +build +Dockerfile +node_modules +.git diff --git a/.gitignore b/.gitignore index 073f006..c6ebd67 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,6 @@ build npm-debug.log* yarn-debug.log* yarn-error.log* +.vscode +env-config.js +.nyc diff --git a/.travis.yml b/.travis.yml index fb3f3ee..4645840 100644 --- a/.travis.yml +++ b/.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 diff --git a/README.md b/README.md index 96d3674..1959a01 100644 --- a/README.md +++ b/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 +``` diff --git a/frontend.Dockerfile b/frontend.Dockerfile deleted file mode 100644 index 2ffb8d0..0000000 --- a/frontend.Dockerfile +++ /dev/null @@ -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 diff --git a/frontend/.nvmrc b/frontend/.nvmrc new file mode 100644 index 0000000..48082f7 --- /dev/null +++ b/frontend/.nvmrc @@ -0,0 +1 @@ +12 diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 0000000..08c47eb --- /dev/null +++ b/frontend/Dockerfile @@ -0,0 +1,31 @@ +#### BUILDER IMAGE #### +FROM node:12 as builder +LABEL maintainer="Chevdor " +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 " +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;\""] diff --git a/frontend/env.sh b/frontend/env.sh new file mode 100755 index 0000000..91f967c --- /dev/null +++ b/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 diff --git a/frontend/nginx/nginx.conf b/frontend/nginx/nginx.conf new file mode 100644 index 0000000..dce1ffb --- /dev/null +++ b/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; +} diff --git a/frontend/public/index.html b/frontend/public/index.html index 2b492f9..4ce5295 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -6,6 +6,7 @@ Polkadot Telemetry +