fix: docker build and image optimization

.env.example

@@ -15,6 +15,14 @@ NEXT_PUBLIC_NODE_ENV=development
 ENTERPRISE_API_URL=http://localhost:8080
 CONSOLE_BASE_URL=http://localhost:3000
 
+
+## Auth
+CLIENT_ID=
+SECRET_ID=
+DOMAIN=mgmt-20.kubefirst
+NEXTAUTH_SECRET=mgmt-20.kubefirst
+NEXTAUTH_URL=http://locahost:3000
+
 ##### Cypress config env ############ 
 
 # Cypress - Git Provider values

Dockerfile

@@ -1,9 +1,12 @@
-FROM node:18 AS builder
+FROM node:18-alpine AS base
 
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache python3 make g++
 RUN npm i -g node-gyp
-
 WORKDIR /app
 
+
 COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
 RUN \
   if [ -f yarn.lock ]; then yarn --production --frozen-lockfile; \
@@ -12,21 +15,41 @@ RUN \
   else echo "Lockfile not found." && exit 1; \
   fi
 
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+
 COPY . .
 
+ENV NEXT_TELEMETRY_DISABLED 1
+
 RUN yarn build
 
-FROM node:18
+# Production image, copy all the files and run next
+FROM base AS runner
 
 WORKDIR /app
 
-COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/.next ./.next
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/package*.json ./
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# 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
+COPY --from=builder --chown=nextjs:nodejs /app/next.config.js ./next.config.js
+# COPY --from=builder --chown=nextjs:nodejs /app/static ./.next/static
+# COPY --from=builder --chown=nextjs:nodejs /app/server.js ./server.js
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/public ./.next/static
+
+USER nextjs
 
 EXPOSE 8080
 
 ENV PORT 8080
 
-CMD ["yarn", "start"]
+CMD ["node", "server.js"]

app/auth/signin/page.tsx

@@ -3,23 +3,33 @@ import React from 'next';
 import { signIn } from 'next-auth/react';
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
 
 import { Background, Container, ExternalLink, Form, Header, Panel, Title } from './signin.styled';
 
+import Ray from '@/assets/ray.svg';
+import TitleDark from '@/assets/titleDark.svg';
+import Vault from '@/assets/vault.svg';
 import Button from '@/components/button';
 import Typography from '@/components/typography';
 import { VOLCANIC_SAND } from '@/constants/colors';
 
 export default function SignIn() {
   const searchParams = useSearchParams();
-  const callbackUrl = searchParams?.get('callbackUrl');
+  const callbackUrlParam = searchParams?.get('callbackUrl');
+
+  const callbackUrl = useMemo(
+    () =>
+      callbackUrlParam && callbackUrlParam.includes('error') ? location.origin : callbackUrlParam,
+    [callbackUrlParam],
+  );
 
   return (
     <Container>
       <Background>
         <Header>
           <Title variant="h3">Get started with your instant Kubernetes Platforms!</Title>
-          <Image alt="k1-ray-image" src="/static/ray.svg" height={280} width={320} />
+          <Image alt="k1-ray-image" src={Ray} height={280} width={320} />
         </Header>
         <Typography color="white" variant="labelLarge" sx={{ width: '445px', textAlign: 'center' }}>
           By using the Kubefirst platform, you agree to our{' '}
@@ -38,7 +48,7 @@ export default function SignIn() {
       </Background>
       <Panel>
         <Form component="form">
-          <Image alt="k1-image" src={'/static/titleDark.svg'} height={40} width={160} id="ray" />
+          <Image alt="k1-image" src={TitleDark} height={40} width={160} id="ray" />
           <Typography variant="subtitle1" color={VOLCANIC_SAND} sx={{ mt: 10, mb: 4 }}>
             Welcome
           </Typography>
@@ -56,7 +66,7 @@ export default function SignIn() {
               });
             }}
           >
-            <Image src="/static/vault.svg" alt="vault-icon" width={20} height={20} />
+            <Image src={Vault} alt="vault-icon" width={20} height={20} />
             <Typography color={VOLCANIC_SAND} sx={{ ml: 1 }}>
               Log in with Vault
             </Typography>

app/layout.tsx

@@ -15,7 +15,7 @@ export const metadata = {
     initialScale: 1.0,
   },
   icons: {
-    shortcut: '/static/ray.svg',
+    shortcut: 'https://assets.kubefirst.com/console/ray.svg',
   },
 };