feat(web): simplify image building by copying static files from host machine

Author: mrcfps

.dockerignore

@@ -5,17 +5,10 @@
 .github
 .vscode
 
-# Rush temp files
-common/deploy/
-common/temp/
-common/autoinstallers/*/.npmrc
-**/.rush/temp/
-*.lock
 *.log
 *.chunks.jsonl
 
 # Build dependencies
-dist
 node_modules
 coverage
 

.github/workflows/build-image.yml

@@ -20,6 +20,26 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+      
+      - uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build:web
+        env:
+          NODE_OPTIONS: '--max_old_space_size=8192'
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3

.github/workflows/upload-web-artifacts.yml

@@ -0,0 +1,42 @@
+name: Upload Web Artifacts
+
+on:
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: 'Environment to build for'
+        required: true
+        type: choice
+        options:
+          - staging
+          - production
+        default: 'staging'
+
+jobs:
+  build:
+    name: Build and Upload
+    uses: ./.github/workflows/build.yml
+    with:
+      environment: ${{ inputs.environment }}
+    secrets: inherit
+
+  upload:
+    name: Upload Artifacts
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: web-dist
+          path: apps/web/dist
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: web-dist
+          path: apps/web/dist
+          retention-days: 5

apps/web/.dockerignore

@@ -1,29 +1,31 @@
-# Builder stage
-FROM node:20-alpine@sha256:b5b9467fe7b33aad47f1ec3f6e0646a658f85f05c18d4243024212a91f3b7554 AS builder
-
-WORKDIR /app
-
-RUN corepack enable
-
-ENV NODE_OPTIONS=--max_old_space_size=8192
-ENV VITE_API_URL=http://localhost:5800
-ENV VITE_COLLAB_URL=http://localhost:5801
-
-COPY . .
-RUN pnpm install
-RUN pnpm build:web
-
 # Nginx stage
 FROM nginx:alpine
 
+# Install envsubst and bash for environment variable substitution
+RUN apk add --no-cache bash
+
 # Copy nginx configuration
 COPY deploy/docker/nginx.conf /etc/nginx/conf.d/default.conf
 
-# Copy built files from builder stage
-COPY --from=builder /app/dist /usr/share/nginx/html
+# Copy static files
+WORKDIR /usr/share/nginx/html
+COPY ./dist .
+
+# Create config.js template
+RUN echo "window.ENV = { \
+  API_URL: '${API_URL:-http://localhost:5800}', \
+  COLLAB_URL: '${COLLAB_URL:-http://localhost:5801}' \
+};" > config.template.js
+
+# Create entrypoint script
+RUN echo '#!/bin/bash\n\
+envsubst < config.template.js > config.js\n\
+exec nginx -g "daemon off;"' > /docker-entrypoint.sh
+
+RUN chmod +x /docker-entrypoint.sh
 
 # Expose port 80
 EXPOSE 80
 
-# Start Nginx
-CMD ["nginx", "-g", "daemon off;"]
+# Start Nginx with our entrypoint script
+ENTRYPOINT ["/docker-entrypoint.sh"]

apps/web/Dockerfile

@@ -43,6 +43,8 @@
       as="font"
       type="font/woff2"
       crossorigin="anonymous" />
+    <!-- Load configuration before the app -->
+    <script src="/config.js"></script>
   </head>
   <script
     async

apps/web/index.html

@@ -0,0 +1,4 @@
+window.ENV = {
+  API_URL: '',
+  COLLAB_URL: ''
+}; 

apps/web/public/config.js

@@ -13,8 +13,17 @@ export const getEnv = () => {
   return env;
 };
 
-export const serverOrigin = import.meta.env.VITE_API_URL;
-export const wsServerOrigin = import.meta.env.VITE_COLLAB_URL;
+declare global {
+  interface Window {
+    ENV?: {
+      API_URL: string;
+      COLLAB_URL: string;
+    };
+  }
+}
+
+export const serverOrigin = import.meta.env.VITE_API_URL || window.ENV?.API_URL;
+export const wsServerOrigin = import.meta.env.VITE_COLLAB_URL || window.ENV?.COLLAB_URL;
 
 let runtime: IRuntime;