From 19f409023cceb2f777b88ac9e36ec7890e85e3f1 Mon Sep 17 00:00:00 2001 From: Chevdor Date: Sat, 25 Apr 2020 08:29:59 +0200 Subject: [PATCH] Add ENV support to the generated site (#2450) * WIP Add ENV support to the generated site * At that point, the ENV make it as JS script inside the container but are not picked up yet * Fix code to fetch WS_URL from our imported ENV * Cleanup * Fix Dockerfile and add doc * Cleanup of the shell script --- .dockerignore | 2 ++ .env-example | 4 +++ .gitignore | 1 + Dockerfile | 21 ++++++++++----- README.md | 4 +-- docker/nginx.conf | 27 +++++++++++++++++++ env.sh | 20 ++++++++++++++ .../apps-config/src/settings/endpoints.ts | 7 ++--- packages/apps/public/index.html | 1 + 9 files changed, 76 insertions(+), 11 deletions(-) create mode 100644 .env-example create mode 100644 docker/nginx.conf create mode 100755 env.sh diff --git a/.dockerignore b/.dockerignore index 3c3629e647f5..1c8c93fa2d17 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1 +1,3 @@ node_modules +build +.git diff --git a/.env-example b/.env-example new file mode 100644 index 000000000000..0b0cd09dcfc3 --- /dev/null +++ b/.env-example @@ -0,0 +1,4 @@ +# You can define all your ENV in such a file and run docker as: +# docker run ... --env-file .env ... +WS_URL=ws://localhost:9944 +POLKADOT_UI_SAMPLE=42 diff --git a/.gitignore b/.gitignore index fc68f750578b..28329430fa78 100644 --- a/.gitignore +++ b/.gitignore @@ -18,4 +18,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* .idea/ +env-config.js NOTES.md diff --git a/Dockerfile b/Dockerfile index 02bfc440e82e..360b2dbb3dfc 100644 --- a/Dockerfile +++ b/Dockerfile @@ -11,15 +11,24 @@ WORKDIR /apps COPY . . RUN npm install yarn -g -RUN yarn -RUN NODE_ENV=production yarn build:www +RUN yarn && NODE_ENV=production yarn build:www +CMD ["ls", "-al", "build"] -FROM ubuntu:18.04 +# =========================================================== +FROM nginx:stable-alpine -RUN apt-get update && apt-get -y install nginx +# The following is mainly for doc purpose to show which ENV is supported +ENV WS_URL= -COPY --from=builder /apps/packages/apps/build /var/www/html +WORKDIR /usr/share/nginx/html + +COPY env.sh . + +RUN apk add --no-cache bash; chmod +x env.sh + +COPY docker/nginx.conf /etc/nginx/nginx.conf +COPY --from=builder /apps/packages/apps/build /usr/share/nginx/html EXPOSE 80 -CMD ["nginx", "-g", "daemon off;"] +CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""] diff --git a/README.md b/README.md index d79a7ca50aa7..71efafe898e8 100644 --- a/README.md +++ b/README.md @@ -62,10 +62,10 @@ Be sure to follow the [page-123code/README.md](packages/page-123code/README.md) You can run a docker container via - - docker run --rm -it --name polkadot-ui -p 80:80 chevdor/polkadot-ui:latest + docker run --rm -it --name polkadot-ui -e WS_URL=ws://someip:9944 -p 80:80 chevdor/polkadot-ui:latest To build a docker container containing local changes - - docker build -t chevdor/polkadot-ui:latest . + docker build -t chevdor/polkadot-ui . When using these Docker commands, you can access the UI via http://localhost:80 (or just http://localhost) diff --git a/docker/nginx.conf b/docker/nginx.conf new file mode 100644 index 000000000000..dce1ffbd6168 --- /dev/null +++ b/docker/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/env.sh b/env.sh new file mode 100755 index 000000000000..e01e134aad9b --- /dev/null +++ b/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=( + "WS_URL" + "SAMPLE" +) + +echo "window.process_env = {" >> $TARGET +for VAR in ${vars[@]}; do + echo " $VAR: \"${!VAR}\"," >> $TARGET +done +echo "}" >> $TARGET diff --git a/packages/apps-config/src/settings/endpoints.ts b/packages/apps-config/src/settings/endpoints.ts index f8c5a774fc69..9ed64c3a09c8 100644 --- a/packages/apps-config/src/settings/endpoints.ts +++ b/packages/apps-config/src/settings/endpoints.ts @@ -13,12 +13,13 @@ const DEV: Option[] = [ ]; const ENV: Option[] = []; +const WS_URL = process.env.WS_URL || (window as any).process_env.WS_URL; -if (process.env.WS_URL) { +if (WS_URL) { ENV.push({ info: 'WS_URL', - text: 'WS_URL: ' + process.env.WS_URL, - value: process.env.WS_URL + text: 'WS_URL: ' + WS_URL, + value: WS_URL }); } diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html index f3991a767d25..e6f1ea004556 100644 --- a/packages/apps/public/index.html +++ b/packages/apps/public/index.html @@ -6,6 +6,7 @@ <%= htmlWebpackPlugin.options.PAGE_TITLE %> +