Home Explore Help
Sign In
Operations
/
joystream
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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
Chevdor 4 years ago
parent
c5e17d82ba
commit
19f409023c
9 changed files with 76 additions and 11 deletions
Split View Show Diff Stats
  1. 2 0
      .dockerignore
  2. 4 0
      .env-example
  3. 1 0
      .gitignore
  4. 15 6
      Dockerfile
  5. 2 2
      README.md
  6. 27 0
      docker/nginx.conf
  7. 20 0
      env.sh
  8. 4 3
      packages/apps-config/src/settings/endpoints.ts
  9. 1 0
      packages/apps/public/index.html

+ 2 - 0
.dockerignore
View File 

@@ -1 +1,3 @@
 
 node_modules
 
+build
 
+.git

+ 4 - 0
.env-example
View File 

@@ -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

+ 1 - 0
.gitignore
View File 

@@ -18,4 +18,5 @@ npm-debug.log*
 
 yarn-debug.log*
 
 yarn-error.log*
 
 .idea/
 
+env-config.js
 
 NOTES.md

+ 15 - 6
Dockerfile
View File 

@@ -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;\""]

+ 2 - 2
README.md
View File 

@@ -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)

+ 27 - 0
docker/nginx.conf
View File 

@@ -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;
 
+}

+ 20 - 0
env.sh
View File 

@@ -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

+ 4 - 3
packages/apps-config/src/settings/endpoints.ts
View File 

@@ -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
 
   });
 
 }

+ 1 - 0
packages/apps/public/index.html
View File 

@@ -6,6 +6,7 @@
 
     <link rel="manifest" href="manifest.json">
 
     <link rel="shortcut icon" href="favicon.ico">
 
     <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
 
+    <script type="text/javascript" src="/env-config.js"></script>
 
   </head>
 
   <body>
 
     <noscript>