Use pre-built frontend image in prod compose file

docker-compose.yml

@@ -39,9 +39,6 @@ services:
     restart: unless-stopped
     depends_on:
       - backend
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile.prod
     image: infisical/frontend
     env_file: .env
     environment:
@@ -73,4 +70,4 @@ volumes:
     driver: local
 
 networks:
-  infisical:
+  infisical:

frontend/Dockerfile

@@ -0,0 +1,49 @@
+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 . .
+
+# Build
+RUN npm run build
+
+
+# Production image, copy all the files and run next
+FROM node:16-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+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
+
+
+CMD ["node", "server.js"]

frontend/next.config.js

@@ -1,16 +1,12 @@
 // next.config.js
 
 const ContentSecurityPolicy = `
-	default-src ${process.env.NEXT_PUBLIC_WEBSITE_URL};
+	default-src 'self';
-	script-src ${
+	script-src 'self' https://app.posthog.com https://infisical.com https://assets.calendly.com/ https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
-    process.env.NEXT_PUBLIC_WEBSITE_URL
-  } https://app.posthog.com https://infisical.com https://assets.calendly.com/ https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
 	style-src 'self' https://rsms.me 'unsafe-inline';
 	child-src https://infisical.com https://api.stripe.com;
 	frame-src https://js.stripe.com/ https://api.stripe.com;
-	connect-src ws://${process.env.NEXT_PUBLIC_WEBSITE_URL?.split("//")[1]} ${
+	connect-src 'self' ws: wss: https://api.github.com/repos/Infisical/infisical-cli https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://infisical.com https://api.stripe.com https://vitals.vercel-insights.com/v1/vitals;
-  process.env.NEXT_PUBLIC_WEBSITE_URL
-} https://api.github.com/repos/Infisical/infisical-cli https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://infisical.com https://api.stripe.com https://vitals.vercel-insights.com/v1/vitals;
 	img-src 'self' https://*.stripe.com https://i.ytimg.com/ data:;
 	media-src;
 	font-src 'self' https://maxcdn.bootstrapcdn.com https://rsms.me https://fonts.gstatic.com;