Merge pull request #80 from reginaldbondoc/I-36-use-pre-built-fronten…

…d-image

I-36 Use pre-built frontend image instead of building Next.js app on boot

.github/workflows/docker-image.yml

@@ -3,35 +3,86 @@ name: Push to Docker Hub
 on: [workflow_dispatch]
 
 jobs:
-  docker:
+
+  backend-image:
+    name: Build backend image
     runs-on: ubuntu-latest
+
     steps:
-      - name: Checkout
+      - 
+        name: ☁️ Checkout source
         uses: actions/checkout@v2
       -
-        name: Set up QEMU
+        name: 🔧 Set up QEMU
         uses: docker/setup-qemu-action@v2
       -
-        name: Set up Docker Buildx
+        name: 🔧 Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
       -
-        name: Login to Docker Hub
+        name: 🐋 Login to Docker Hub
         uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       -
-        name: Build and push backend
+        name: 📦 Build backend and export to Docker
         uses: docker/build-push-action@v3
         with:
-          push: true
+          load: true
           context: backend
           tags: infisical/backend:test
       -
-        name: Build and push frontend
+        name: 🧪 Test backend image
+        run: |
+          docker run --rm infisical/backend:test
+      -
+        name: 📦 Build backend and push
         uses: docker/build-push-action@v3
         with:
           push: true
-          file: frontend/Dockerfile.dev
+          context: backend
+          tags: infisical/backend:latest
+          platforms: linux/amd64,linux/arm64
+
+
+  frontend-image:
+    name: Build frontend image
+    runs-on: ubuntu-latest
+
+    steps:
+      - 
+        name: ☁️ Checkout source
+        uses: actions/checkout@v2
+      -
+        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: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      -
+        name: 📦 Build frontend and export to Docker
+        uses: docker/build-push-action@v3
+        with:
+          load: true
           context: frontend
           tags: infisical/frontend:test
+          build-args: |
+            POSTHOG_API_KEY=${{ secrets.PUBLIC_POSTHOG_API_KEY }}
+      -
+        name: 🧪 Test frontend image
+        run: |
+          docker run --rm infisical/frontend:test
+      -
+        name: 📦 Build frontend and push
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          context: frontend
+          tags: infisical/frontend:latest
+          platforms: linux/amd64,linux/arm64

docker-compose.dev.yml

@@ -23,7 +23,6 @@ services:
     build:
       context: ./backend
       dockerfile: Dockerfile
-    image: infisical/backend
     volumes:
       - ./backend/src:/app/src
       - ./backend/nodemon.json:/app/nodemon.json
@@ -43,7 +42,6 @@ services:
     build:
       context: ./frontend
       dockerfile: Dockerfile.dev
-    image: infisical/frontend
     volumes:
       - ./frontend/pages:/app/pages
       - ./frontend/public:/app/public
@@ -52,12 +50,8 @@ services:
     env_file: .env
     environment:
       - NEXT_PUBLIC_ENV=development
-      - NEXT_PUBLIC_WEBSITE_URL=${SITE_URL}
-      - NEXT_PUBLIC_POSTHOG_HOST=${POSTHOG_HOST}
-      - NEXT_PUBLIC_POSTHOG_API_KEY=${POSTHOG_PROJECT_API_KEY}
       - NEXT_PUBLIC_STRIPE_PRODUCT_PRO=${STRIPE_PRODUCT_PRO}
       - NEXT_PUBLIC_STRIPE_PRODUCT_STARTER=${STRIPE_PRODUCT_STARTER}
-      - NEXT_PUBLIC_TELEMETRY_ENABLED=${TELEMETRY_ENABLED}
     networks:
       - infisical-dev
 
@@ -78,6 +72,8 @@ services:
     container_name: infisical-dev-mongo-express
     image: mongo-express
     restart: always
+    depends_on:
+      - mongo
     env_file: .env
     environment:
       - ME_CONFIG_MONGODB_ADMINUSERNAME=${MONGO_USERNAME}
@@ -93,4 +89,4 @@ volumes:
     driver: local
 
 networks:
-  infisical-dev:
+  infisical-dev:

docker-compose.yml

@@ -17,14 +17,10 @@ services:
       - infisical
 
   backend:
-    platform: linux/amd64
     container_name: infisical-backend
     restart: unless-stopped
     depends_on:
       - mongo
-    build:
-      context: ./backend
-      dockerfile: Dockerfile
     image: infisical/backend
     command: npm run start
     env_file: .env
@@ -34,24 +30,17 @@ services:
       - infisical
 
   frontend:
-    platform: linux/amd64
     container_name: infisical-frontend
     restart: unless-stopped
     depends_on:
       - backend
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile.prod
     image: infisical/frontend
     env_file: .env
     environment:
-      - NEXT_PUBLIC_ENV=production
-      - NEXT_PUBLIC_WEBSITE_URL=${SITE_URL}
-      - NEXT_PUBLIC_POSTHOG_HOST=${POSTHOG_HOST}
-      - NEXT_PUBLIC_POSTHOG_API_KEY=${POSTHOG_PROJECT_API_KEY}
+      # - NEXT_PUBLIC_POSTHOG_API_KEY=${POSTHOG_PROJECT_API_KEY}
+      - INFISICAL_TELEMETRY_ENABLED=${TELEMETRY_ENABLED}
       - NEXT_PUBLIC_STRIPE_PRODUCT_PRO=${STRIPE_PRODUCT_PRO}
       - NEXT_PUBLIC_STRIPE_PRODUCT_STARTER=${STRIPE_PRODUCT_STARTER}
-      - NEXT_PUBLIC_TELEMETRY_ENABLED=${TELEMETRY_ENABLED}
     networks:
       - infisical
 
@@ -73,4 +62,4 @@ volumes:
     driver: local
 
 networks:
-  infisical:
+  infisical:

docs/self-hosting/configuration/envars.mdx

@@ -9,24 +9,24 @@ Configuring Infisical requires setting some environment variables. There is a fi
 
 | Variable                     | Description                                                                                                 | Default Value    |
 | ---------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------- |
-| `PRIVATE_KEY`                | ❗️ NaCl-generated server secret key                                                                        | `None`           |
-| `PUBLIC_KEY`                 | ❗️ NaCl-generated server public key                                                                        | `None`           |
-| `ENCRYPTION_KEY`             | ❗️ Strong hex encryption key                                                                               | `None`           |
-| `JWT_SIGNUP_SECRET`          | ❗️JWT token secret                                                                                         | `None`           |
-| `JWT_REFRESH_SECRET`         | ❗️ JWT token secret                                                                                        | `None`           |
-| `JWT_AUTH_SECRET`            | ❗️ JWT token secret                                                                                        | `None`           |
+| `PRIVATE_KEY`                | ❗️ NaCl-generated server secret key                                                                         | `None`           |
+| `PUBLIC_KEY`                 | ❗️ NaCl-generated server public key                                                                         | `None`           |
+| `ENCRYPTION_KEY`             | ❗️ Strong hex encryption key                                                                                | `None`           |
+| `JWT_SIGNUP_SECRET`          | ❗️ JWT token secret                                                                                         | `None`           |
+| `JWT_REFRESH_SECRET`         | ❗️ JWT token secret                                                                                         | `None`           |
+| `JWT_AUTH_SECRET`            | ❗️ JWT token secret                                                                                         | `None`           |
 | `JWT_SIGNUP_LIFETIME`        | JWT token lifetime expressed in seconds or a string describing a time span (e.g. 60, "2 days", "10h", "7d") | `15m`            |
 | `JWT_REFRESH_LIFETIME`       | JWT token lifetime expressed in seconds or a string describing a time span (e.g. 60, "2 days", "10h", "7d") | `90d`            |
 | `JWT_AUTH_LIFETIME`          | JWT token lifetime expressed in seconds or a string describing a time span (e.g. 60, "2 days", "10h", "7d") | `10d`            |
 | `EMAIL_TOKEN_LIFETIME`       | Email OTP/magic-link lifetime expressed in seconds                                                          | `86400`          |
-| `MONGO_URL`                  | ❗️ MongoDB instance connection string either to container instance or MongoDB Cloud                        | `None`           |
+| `MONGO_URL`                  | ❗️ MongoDB instance connection string either to container instance or MongoDB Cloud                         | `None`           |
 | `MONGO_USERNAME`             | MongoDB username if using container                                                                         | `None`           |
 | `MONGO_PASSWORD`             | MongoDB password if using container                                                                         | `None`           |
-| `SITE_URL`                   | ❗️ Site URL - should be an absolute URL including the protocol (e.g. `https://app.infisical.com`)          | `None`           |
-| `SMT_HOST`                   | Whether the user joined the community                                                                       | `smtp.gmail.com` |
-| `SMTP_NAME`                  | Hostname to connect to for establishing SMTP connections (e.g. `Team`)                                      | `None`           |
-| `SMTP_USERNAME`              | ❗️ Credential to connect to host (e.g. `[email protected]`)                                               | `None`           |
-| `SMTP_PASSWORD`              | ❗️ Credential to connect to host                                                                           | `None`           |
+| `SITE_URL`                   | ❗️ Site URL - should be an absolute URL including the protocol (e.g. `https://app.infisical.com`)           | `None`           |
+| `SMTP_HOST`                  | Hostname to connect to for establishing SMTP connections                                                    | `smtp.gmail.com` |
+| `SMTP_NAME`                  | Name label to be used in From field (e.g. `Team`)                                                           | `None`           |
+| `SMTP_USERNAME`              | ❗️ Credential to connect to host (e.g. `[email protected]`)                                                | `None`           |
+| `SMTP_PASSWORD`              | ❗️ Credential to connect to host                                                                            | `None`           |
 | `TELEMETRY_ENABLED`          | `true` or `false`. [More](../overview).                                                                     | `true`           |
 | `OAUTH_CLIENT_SECRET_HEROKU` | OAuth client secret for Heroku integration                                                                  | `None`           |
 | `OAUTH_TOKEN_URL_HEROKU`     | OAuth token URL for Heroku integration                                                                      | `None`           |

frontend/Dockerfile

@@ -0,0 +1,64 @@
+ARG POSTHOG_HOST=https://app.posthog.com
+ARG POSTHOG_API_KEY=posthog-api-key
+
+FROM node:16-alpine AS deps
+# Install dependencies only when needed. 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
+WORKDIR /app
+
+# Copy over dependency files 
+COPY package.json package-lock.json next.config.js ./
+
+# Install dependencies
+RUN npm ci --only-production
+
+
+# Rebuild the source code only when needed
+FROM node:16-alpine AS builder
+WORKDIR /app
+
+# Copy dependencies
+COPY --from=deps /app/node_modules ./node_modules
+# Copy all files 
+COPY . .
+
+ENV NODE_ENV production
+ENV NEXT_PUBLIC_ENV production
+ARG POSTHOG_HOST
+ENV NEXT_PUBLIC_POSTHOG_HOST $POSTHOG_HOST
+ARG POSTHOG_API_KEY
+ENV NEXT_PUBLIC_POSTHOG_API_KEY $POSTHOG_API_KEY
+
+# Build
+RUN npm run build
+
+
+# Production image
+FROM node:16-alpine AS runner
+WORKDIR /app
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+RUN mkdir -p /app/.next/cache/images && chown nextjs:nodejs /app/.next/cache/images
+VOLUME /app/.next/cache/images
+
+ARG POSTHOG_API_KEY
+ENV NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY \
+    BAKED_NEXT_PUBLIC_POSTHOG_API_KEY=$POSTHOG_API_KEY
+
+COPY --chown=nextjs:nodejs --chmod=555 scripts ./scripts
+COPY --from=builder /app/public ./public
+RUN chown nextjs:nodejs ./public/data
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV NEXT_TELEMETRY_DISABLED 1
+
+
+CMD ["/app/scripts/start.sh"]

frontend/components/analytics/posthog.js

@@ -4,12 +4,11 @@ import {
   ENV,
   POSTHOG_API_KEY,
   POSTHOG_HOST,
-  TELEMETRY_ENABLED,
 } from "../utilities/config";
 
 export const initPostHog = () => {
   if (typeof window !== "undefined") {
-    if (ENV == "production" && TELEMETRY_ENABLED) {
+    if (ENV == "production" && TELEMETRY_CAPTURING_ENABLED) { // eslint-disable-line
       posthog.init(POSTHOG_API_KEY, {
         api_host: POSTHOG_HOST,
       });

frontend/components/utilities/attemptLogin.js

@@ -4,11 +4,10 @@ import login2 from "~/pages/api/auth/Login2";
 import getOrganizations from "~/pages/api/organization/getOrgs";
 import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
 
-import { initPostHog } from "../analytics/posthog";
 import pushKeys from "./secrets/pushKeys";
-import { ENV } from "./config";
 import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
 import SecurityClient from "./SecurityClient";
+import Telemetry from "./telemetry/Telemetry";
 
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
@@ -33,6 +32,8 @@ const attemptLogin = async (
   isLogin
 ) => {
   try {
+    const telemetry = new Telemetry().getInstance();
+
     client.init(
       {
         username: email,
@@ -125,16 +126,9 @@ const attemptLogin = async (
               env: "Development",
             });
           }
-          try {
-            if (email) {
-              if (ENV == "production") {
-                const posthog = initPostHog();
-                posthog.identify(email);
-                posthog.capture("User Logged In");
-              }
-            }
-          } catch (error) {
-            console.log("posthog", error);
+          if (email) {
+            telemetry.identify(email);
+            telemetry.capture("User Logged In");
           }
 
           if (isLogin) {

frontend/components/utilities/config/index.ts

@@ -4,14 +4,11 @@ const POSTHOG_HOST =
   process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
-const TELEMETRY_ENABLED =
-  process.env.NEXT_PUBLIC_TELEMETRY_ENABLED! !== "false";
 
 export {
   ENV,
   POSTHOG_API_KEY,
   POSTHOG_HOST,
   STRIPE_PRODUCT_PRO,
   STRIPE_PRODUCT_STARTER,
-  TELEMETRY_ENABLED,
 };