From 6e5f0fb312c53d14cdc99942dc67c46976a94dc6 Mon Sep 17 00:00:00 2001 From: Gulum Date: Mon, 30 Oct 2023 23:13:17 +0100 Subject: [PATCH] Docker nextjs --- README.md | 4 + docker-compose.yml | 10 +- gerbil-manager-nextjs/Dockerfile | 63 +++++++ gerbil-manager-nextjs/README.md | 4 + gerbil-manager-nextjs/next.config.js | 4 +- gerbil-manager-nextjs/src/app/page.tsx | 220 +++++++++++++------------ 6 files changed, 197 insertions(+), 108 deletions(-) create mode 100644 gerbil-manager-nextjs/Dockerfile diff --git a/README.md b/README.md index ae116f0..fd6a246 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,10 @@ dotnet ef database update ## Create an migration script dotnet ef migrations add +## Docker +### force compose rebuild +docker-compose build --no-cache + TODO: - Backup docker volume database diff --git a/docker-compose.yml b/docker-compose.yml index 152447f..b50417f 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -4,7 +4,15 @@ version: '3.4' services: -# frontend: + frontend: + image: gerbilmanagernextjs + build: + context: . + dockerfile: gerbil-manager-nextjs/Dockerfile + ports: + - 3000:3000 + networks: + - net1 backend: image: gerbilmanagerwebapi diff --git a/gerbil-manager-nextjs/Dockerfile b/gerbil-manager-nextjs/Dockerfile new file mode 100644 index 0000000..587d96a --- /dev/null +++ b/gerbil-manager-nextjs/Dockerfile @@ -0,0 +1,63 @@ +FROM node:18-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 +WORKDIR /app + +# Install dependencies based on the preferred package manager +COPY gerbil-manager-nextjs/package.json gerbil-manager-nextjs/package-lock.json* ./ +RUN \ + if [ -f package-lock.json ]; then npm ci; \ + 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 gerbil-manager-nextjs/ . + +# Next.js collects completely anonymous telemetry data about general usage. +# Learn more here: https://nextjs.org/telemetry +# Uncomment the following line in case you want to disable telemetry during the build. +ENV NEXT_TELEMETRY_DISABLED 1 + +# RUN yarn build + +# If using npm comment out above and use below instead +RUN npm run build + +# Production image, copy all the files and run next +FROM base AS runner +WORKDIR /app + +ENV NODE_ENV production +# Uncomment the following line in case you want to disable telemetry during runtime. +# ENV NEXT_TELEMETRY_DISABLED 1 + +RUN addgroup --system --gid 1001 nodejs +RUN adduser --system --uid 1001 nextjs + +COPY --from=builder /app/public ./public + +# Set the correct permission for prerender cache +RUN mkdir .next +RUN chown nextjs:nodejs .next + +# 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 +# set hostname to localhost +ENV HOSTNAME "0.0.0.0" + +CMD ["node", "server.js"] \ No newline at end of file diff --git a/gerbil-manager-nextjs/README.md b/gerbil-manager-nextjs/README.md index c403366..b707bcf 100644 --- a/gerbil-manager-nextjs/README.md +++ b/gerbil-manager-nextjs/README.md @@ -34,3 +34,7 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. + +## Inspiration + +[SideBar](https://tailwindcomponents.com/component/sub-menu-sidebar) \ No newline at end of file diff --git a/gerbil-manager-nextjs/next.config.js b/gerbil-manager-nextjs/next.config.js index 767719f..a7ef223 100644 --- a/gerbil-manager-nextjs/next.config.js +++ b/gerbil-manager-nextjs/next.config.js @@ -1,4 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = {} -module.exports = nextConfig +module.exports = { + output: 'standalone' +} diff --git a/gerbil-manager-nextjs/src/app/page.tsx b/gerbil-manager-nextjs/src/app/page.tsx index e38c626..7fba245 100644 --- a/gerbil-manager-nextjs/src/app/page.tsx +++ b/gerbil-manager-nextjs/src/app/page.tsx @@ -2,112 +2,120 @@ import Image from 'next/image' export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{' '} - Vercel Logo - +
+ + ) }