Merge pull request #72 from wbobeirne/wo/better-docker

refactor: better docker build & run performance

.github/workflows/gateway-ui.yml

@@ -0,0 +1,30 @@
+name: gateway-ui
+
+on:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - .github/workflows/gateway-ui.yml
+      - apps/gateway-ui/**
+      - packages/**
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: fedimintui
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
+      - name: Build and push gateway-ui
+        uses: docker/build-push-action@v4
+        with:
+          file: Dockerfile.gateway-ui
+          push: true
+          tags: fedimintui/gateway-ui:latest

.github/workflows/ci.yml → .github/workflows/guardian-ui.yml

@@ -1,10 +1,13 @@
-name: ci
+name: guardian-ui
 
 on:
   push:
     branches:
       - 'master'
-
+    paths:
+      - .github/workflows/guardian-ui.yml
+      - apps/guardian-ui/**
+      - packages/**
 jobs:
   docker:
     runs-on: ubuntu-latest
@@ -18,7 +21,7 @@ jobs:
         with:
           username: fedimintui
           password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
-      - name: Build and push
+      - name: Build and push guardian-ui
         uses: docker/build-push-action@v4
         with:
           file: Dockerfile.guardian-ui

Dockerfile.gateway-ui

@@ -0,0 +1,15 @@
+FROM node:lts
+WORKDIR /app 
+COPY . /app
+RUN yarn install
+RUN REACT_APP_FM_GATEWAY_API="{{REACT_APP_FM_GATEWAY_API}}" \
+  REACT_APP_FM_GATEWAY_PASSWORD="{{REACT_APP_FM_GATEWAY_PASSWORD}}" \
+  yarn build:gateway-ui
+RUN npm install -g serve
+COPY scripts/replace-react-env.js scripts/replace-react-env.js
+
+# The following env variables can be given at runtime:
+# - PORT
+# - REACT_APP_FM_GATEWAY_API
+# - REACT_APP_FM_GATEWAY_PASSWORD
+CMD node scripts/replace-react-env.js apps/gateway-ui/build && serve -s apps/gateway-ui/build

Dockerfile.guardian-ui

@@ -2,7 +2,12 @@ FROM node:lts
 WORKDIR /app 
 COPY . /app
 RUN yarn install
-RUN REACT_APP_FM_CONFIG_API="ws://127.0.0.1:8174" yarn build
+RUN REACT_APP_FM_CONFIG_API="{{REACT_APP_FM_CONFIG_API}}" \
+  yarn build:guardian-ui
 RUN npm install -g serve
-CMD if [ ! -z "$REACT_APP_FM_CONFIG_API" ]; then yarn build;fi && serve -s apps/guardian-ui/build/
-EXPOSE 3000
+COPY scripts/replace-react-env.js scripts/replace-react-env.js
+
+# The following env variables can be given at runtime:
+# - PORT
+# - REACT_APP_FM_CONFIG_API
+CMD node scripts/replace-react-env.js apps/guardian-ui/build && serve -s apps/guardian-ui/build

docker-compose.yml

@@ -104,5 +104,32 @@ services:
     volumes:
       - 'bitcoin_datadir:/data'
 
+  # Uncomment me to test out Dockerfile.guardian-ui locally
+  # guardian_ui:
+  #   build:
+  #     context: .
+  #     dockerfile: Dockerfile.guardian-ui
+  #   environment:
+  #     - PORT=3001
+  #     - REACT_APP_FM_CONFIG_API=ws://localhost:18184
+  #   expose:
+  #     - '3001'
+  #   ports:
+  #     - '3001:3001'
+
+  # Uncomment me to test out Dockerfile.gateway-ui locally
+  # gateway_ui:
+  #   build:
+  #     context: .
+  #     dockerfile: Dockerfile.gateway-ui
+  #   environment:
+  #     - PORT=3002
+  #     - REACT_APP_FM_GATEWAY_API=ws://localhost:8175
+  #     - REACT_APP_FM_GATEWAY_PASSWORD=theresnosecondbest
+  #   expose:
+  #     - '3002'
+  #   ports:
+  #     - '3002:3002'
+
 volumes:
   bitcoin_datadir:

package.json

@@ -5,6 +5,8 @@
     "dev:gateway-ui": "turbo run dev --parallel --filter=gateway-ui...",
     "dev:guardian-ui": "turbo run dev --parallel --filter=guardian-ui...",
     "build": "turbo run build",
+    "build:gateway-ui": "turbo run build --parallel --filter=gateway-ui...",
+    "build:guardian-ui": "turbo run build --parallel --filter=guardian-ui...",
     "clean": "turbo run clean",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "lint": "turbo run lint",

scripts/replace-react-env.js

@@ -0,0 +1,64 @@
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = process.argv[2];
+
+if (!targetDir) {
+  console.log('Please provide a directory path.');
+  process.exit(1);
+}
+
+/**
+ * Give a file path, replace all {{REACT_APP_ENV}} in its contents with
+ * their actual environment variable value.
+ */
+function processFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const envVariableRegex = /\{\{REACT_APP_([^}]+)\}\}/g;
+  const matches = content.match(envVariableRegex);
+
+  if (!matches) {
+    return;
+  }
+
+  let replacedContent = content;
+  matches.forEach((match) => {
+    // Trim off {{ and }} from match
+    const variableName = match.slice(2, -2);
+    const envValue = process.env[variableName];
+    if (envValue === undefined) {
+      throw new Error(
+        `File ${filePath} contains missing required environment variable ${variableName}`
+      );
+    }
+    replacedContent = replacedContent.replace(match, envValue);
+  });
+
+  fs.writeFileSync(filePath, replacedContent, 'utf8');
+}
+
+function processDirectory(directoryPath) {
+  const files = fs.readdirSync(directoryPath);
+
+  files.forEach((file) => {
+    const filePath = path.join(directoryPath, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isDirectory()) {
+      processDirectory(filePath);
+    } else {
+      processFile(filePath);
+    }
+  });
+}
+
+try {
+  processDirectory(targetDir);
+  console.log('Environment variables replaced successfully.');
+} catch (error) {
+  console.error(
+    'An error occurred while replacing environment variables:',
+    error
+  );
+  process.exit(1);
+}