feat: support for setting env variable when running container

.github/workflows/run-publish.yml

@@ -0,0 +1,40 @@
+name: Build image and push to Docker Hub
+
+on:
+  release:
+    types: [released]
+
+jobs:
+  push_to_registry:
+    name: Push Docker Image to Docker Hub
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.HUB_DOCKER_USERNAME }}
+          password: ${{ secrets.HUB_DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: eyevinntechnology/intercom-frontend
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -1,32 +1,22 @@
-FROM node:21-alpine AS base
-
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-# RUN apk add --no-cache libc6-compat g++ cmake tar make
+FROM nginx:1.19.0
+ARG PORT=8080
+ARG MANAGER_URL
+EXPOSE $PORT
+EXPOSE $MANAGER_URL
+
+RUN apt-get update
+RUN apt-get install -y curl
+RUN curl -fsSL https://deb.nodesource.com/setup_21.x | bash -
+RUN apt-get install -y nodejs
+RUN npm install -g yarn
+RUN mkdir /app
 WORKDIR /app
 
-# Install dependencies based on the preferred package manager
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
-RUN yarn --immutable
-
-# Rebuild the source code only when needed
-FROM base AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-
-# Set backed url to empty string to use window.location.origin fallback
-RUN VITE_BACKEND_URL="" yarn build
-
-# Production image, copy all the files and run next
-FROM nginx:1.19.0 AS runner
-WORKDIR /usr/share/nginx/html/app
-RUN rm -rf ./*
-
-ENV NODE_ENV production
+RUN yarn --immutable
 
 COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=builder /app/dist .
+RUN chmod +x /app/scripts/entrypoint.sh
 
-ENTRYPOINT [ "nginx", "-g", "daemon off;" ]
+ENV NODE_ENV production
+ENTRYPOINT [ "/app/scripts/entrypoint.sh" ]

README.md

@@ -16,6 +16,32 @@ To use a local manager instance, set `VITE_BACKEND_URL=http://0.0.0.0:8000/`
 
 `yarn dev` to start a dev server
 
+## Docker Container
+
+Build local Docker image
+
+```
+docker build -t intercom-frontend:dev
+```
+
+Run container on port 8080 and with intercom manager on https://intercom-manager.dev.eyevinn.technology/
+
+```
+docker run --rm -d -p 8080:8080 \
+  -e PORT=8080 \
+  -e MANAGER_URL=https://intercom-manager.dev.eyevinn.technology/ \
+  --name=frontend \
+  intercom-frontend:dev
+```
+
+Then the app is available at http://localhost:8080/
+
+Stop container
+
+```
+docker stop frontend
+```
+
 ## Contributing
 
 Contributions to are welcome.

nginx/nginx.conf

@@ -2,7 +2,7 @@ server {
   listen 8080;
   server_name frontend;
   location / {
-    root /usr/share/nginx/html/app;
+    root /usr/share/nginx/html;
     index index.html;
   }
 }

scripts/entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+sed -i "s/listen\s*8080;/listen $PORT;/" /etc/nginx/conf.d/default.conf
+
+VITE_BACKEND_URL=$MANAGER_URL yarn build && \
+  cp -r /app/dist/* /usr/share/nginx/html/ && \
+  nginx -g 'daemon off;'