feat: implemented docker support for nextjs app #255

EkkoKo · 2023-03-31T13:10:21Z

No description provided.

vercel · 2023-03-31T13:33:58Z

@EkkoKo is attempting to deploy a commit to the t3-oss Team on Vercel.

A member of the Team first needs to authorize it.

juliusmarminge

Haven't tested it out myself yet but got some initial thoughts

apps/nextjs/next.config.mjs

juliusmarminge · 2023-04-03T22:14:53Z

apps/nextjs/package.json

+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.31",
+    "tailwindcss": "^3.3.1",
+    "postcss": "^8.4.21",
+    "autoprefixer": "^10.4.14",


im no docker expert but why do these need to be production deps all of a sudden?

when you run pnpm install --prod it only installs dependencies and when nextjs is trying to create to build it fails because it looks for those dependencies.

juliusmarminge · 2023-04-03T22:15:26Z

packages/db/package.json

@@ -12,11 +12,11 @@
    "with-env": "dotenv -e ../../.env --"
  },
  "dependencies": {
+    "prisma": "^4.12.0",


same here - prisma is a devDep, why does it need to be a prod dep now?

in the turbo.json we declare that before build it should run db:generate, db:generate runs prisma and because we only install dependencies I had to add it.

I would recommend leaving the devDependencies and prod dependencies as they are, but limit the number of packages installed with pnpm install --filter @acme/nextjs...

As long as you're using output: "standalone" devDep will not get included on the final image, so imo you don't need --prod when running pnpm install, specially since you're doing prune anyway.

ChristianKuri · 2023-05-15T19:48:26Z

I havent tested it, but im looking forward using it. I think its also a good idea to include a docker compose file.

EkkoKo · 2023-05-15T19:54:14Z

I havent tested it, but im looking forward using it. I think its also a good idea to include a docker compose file.

I have included a docker-compose file, you should definitely check it out :)
It is also mentioned it in the README

hichemfantar · 2023-07-16T22:36:57Z

Any plans to merge this?
What's blocking this from getting approved.

akutruff · 2023-10-24T18:51:42Z

I've burned all day trying to get docker setup and it looks like everything out there is either broken or results in an image size of a GB in size. Anyone have a working docker setup that doesn't alter dependencies?

albertilagan · 2023-10-24T19:53:34Z

I've burned all day trying to get docker setup and it looks like everything out there is either broken or results in an image size of a GB in size. Anyone have a working docker setup that doesn't alter dependencies?

Here,

ARG NODE_VERSION=18.17.1
ARG ALPINE_VERSION=3.17

FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS base

RUN npm i -g pnpm@8.7.5
RUN npm i -g turbo@1.10.14

FROM base AS builder

# Set working directory
WORKDIR /app
COPY . .
RUN turbo prune --scope=test-app --docker

# Add lockfile and package.json's of isolated subworkspace
FROM base AS installer
WORKDIR /app

ARG TURBO_TEAM
ARG TURBO_TOKEN

ENV TURBO_TEAM=$TURBO_TEAM
ENV TURBO_TOKEN=$TURBO_TOKEN

# First install the dependencies (as they change less often)
COPY .gitignore .gitignore
COPY --from=builder /app/out/json/ ./
COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
RUN pnpm install --frozen-lockfile

# Build the project
COPY --from=builder /app/out/full/ ./
RUN CI=true SKIP_ENV_VALIDATION=1 pnpm build --filter=test-app

FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS runner
WORKDIR /app

COPY --from=installer /app/apps/test-app/next.config.mjs .
COPY --from=installer /app/apps/test-app/package.json .

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=installer /app/apps/test-app/.next/standalone ./
COPY --from=installer /app/apps/test-app/.next/static ./apps/test-app/.next/static
COPY --from=installer /app/apps/test-app/public ./apps/test-app/public

CMD node apps/test-app/server.js

you need standalone build for this to work,

akutruff · 2023-10-25T12:56:58Z

@albertilagan Thanks for the reply! A couple of things I found that you may want to add:

Install libc6-compat to alpine base image. (see comment inline)
Can copy turbo.json and use turbo run build with ellipses to do the build with dependencies.
Added a commented out line to copy an .env file in case the build is not being used with docker compose Full example in the next.js repo here

FROM node:18-alpine AS base
# 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

FROM base AS builder
WORKDIR /app

RUN npm install -g turbo
COPY . .
RUN turbo prune --scope=@acme/nextjs --docker

FROM base as installer
WORKDIR /app

RUN npm install -g pnpm
RUN npm install -g turbo

ARG TURBO_TEAM
ARG TURBO_TOKEN

ENV TURBO_TEAM=$TURBO_TEAM
ENV TURBO_TOKEN=$TURBO_TOKEN

# First install dependencies (as they change less often)
COPY .gitignore .gitignore
COPY --from=builder /app/out/json/ .
COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
RUN pnpm install --frozen-lockfile

# Build the project and its dependencies
COPY --from=builder /app/out/full/ .
COPY turbo.json turbo.json

## This would be useful for browser environment variables that are actually baked at build time and you aren't passing them in otherwise.
# COPY .env.production .env.production  
RUN CI=true SKIP_ENV_VALIDATION=true turbo run build --filter=@acme/nextjs...

FROM base AS runner
WORKDIR /app

EXPOSE 3000
ENV PORT 3000

ENV NODE_ENV production
ENV HOSTNAME localhost

# Don't run production as root
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs

COPY --from=installer /app/apps/nextjs/next.config.mjs .
COPY --from=installer /app/apps/nextjs/package.json .

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=installer --chown=nextjs:nodejs /app/apps/nextjs/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/apps/nextjs/.next/static ./apps/nextjs/.next/static
COPY --from=installer --chown=nextjs:nodejs /app/apps/nextjs/public ./apps/nextjs/public

CMD node apps/nextjs/server.js

For anyone reading this out of context, you also want a .dockerignore in your root

node_modules

# This line is **EXTREMELY** important
# https://github.com/vercel/turbo/issues/1997#issuecomment-1273565773
**/node_modules

You also want standalone as @albertilagan pointed out. Here's a full file that supports multi package:

import "./src/env.mjs";
import "@acme/auth/env.mjs";

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  /** Enables hot reloading for local packages without a build step */
  transpilePackages: ["@acme/api", "@acme/auth", "@acme/db"],
  /** We already do linting and typechecking as separate tasks in CI */
  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
  output: 'standalone',
};

export default config;

albertilagan · 2023-10-25T13:38:55Z

@akutruff

You're welcome :) Yeah feel free to extend it to whatever you need.
we re-use image for different environment hence we're not adding .env files on build time,
- server env are injected when running the image
- browser env are injected on runtime as well using docker ENTRYPOINT with custom env substitution script that modifies the bundle output.

I can't really share the script, but we utilize printenv and envsubst, you can probably figure out the rest. :)

adamspotlite · 2024-03-28T06:04:35Z

@albertilagan great work! are you checking the env at all before the injection? We accidentally shipped an image that ultimately didn't have the proper env vars, but it wasn't picked up until it was already serving traffic..

any chance you know how to check the env before the build to validate it? I currently have the docker setup working and deploying properly but would love to add a pre-build step to ensure that the env that I will be applying to the container will be valid. Any ideas?

albertilagan · 2024-03-28T17:37:10Z

@albertilagan great work! are you checking the env at all before the injection? We accidentally shipped an image that ultimately didn't have the proper env vars, but it wasn't picked up until it was already serving traffic..

any chance you know how to check the env before the build to validate it? I currently have the docker setup working and deploying properly but would love to add a pre-build step to ensure that the env that I will be applying to the container will be valid. Any ideas?

we are not, doesn't really apply to us because we have a good k8s config setup and separation of environments,
all we did on our script is filter out NEXT_PUBLIC

PUBLIC_VARS=$(printenv | grep '^NEXT_PUBLIC' | awk -F= '{print $1}' | sed 's/^/\$/g' | paste -sd "," -)

and apply the envsubst on those as mentioned above.

Sivanwol · 2024-09-10T17:05:09Z

apps/nextjs/Dockerfile

+COPY --from=builder /app/out/json .
+COPY --from=builder /app/out/pnpm-lock.yaml\* ./
+
+RUN yarn global add pnpm && pnpm fetch --prod && pnpm install -r --offline --prod


why mix with yarn and pnpm ??

Sivanwol · 2024-09-10T17:16:58Z

apps/nextjs/Dockerfile

+ENV SKIP_ENV_VALIDATION true
+
+COPY .gitignore .gitignore 
+COPY  --from=builder /app/tsconfig.json ./tsconfig.json


this will not work it on /app/out/tsconfig.ts not in /app/tsconfig.ts i get error as not found when i try run at in server

added docker + README

3588b78

EkkoKo closed this Mar 31, 2023

EkkoKo force-pushed the main branch from 3588b78 to 2338218 Compare March 31, 2023 13:17

Merge branch 'main' of github.com:EkkoKo/create-t3-turbo into main

3a9ad4d

EkkoKo reopened this Mar 31, 2023

EkkoKo mentioned this pull request Mar 31, 2023

feat: Implement docker deployment #111

Open

Merge branch 'main' into main

968d995

juliusmarminge requested changes Apr 3, 2023

View reviewed changes

EkkoKo added 2 commits April 7, 2023 19:49

moved output: standalone to readme

03967d0

updated Dockerfile to use pnpm best practice

15ab276

EkkoKo requested a review from juliusmarminge April 7, 2023 16:58

Sivanwol reviewed Sep 10, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implemented docker support for nextjs app #255

feat: implemented docker support for nextjs app #255

EkkoKo commented Mar 31, 2023

vercel bot commented Mar 31, 2023

juliusmarminge left a comment

juliusmarminge Apr 3, 2023

EkkoKo Apr 7, 2023

juliusmarminge Apr 3, 2023

EkkoKo Apr 7, 2023

Siemko Jul 18, 2023

albertilagan Jul 20, 2023 •

edited

Loading

ChristianKuri commented May 15, 2023

EkkoKo commented May 15, 2023

hichemfantar commented Jul 16, 2023

akutruff commented Oct 24, 2023

albertilagan commented Oct 24, 2023 •

edited

Loading

akutruff commented Oct 25, 2023

albertilagan commented Oct 25, 2023 •

edited

Loading

adamspotlite commented Mar 28, 2024

albertilagan commented Mar 28, 2024

Sivanwol Sep 10, 2024

Sivanwol Sep 10, 2024

feat: implemented docker support for nextjs app #255

Are you sure you want to change the base?

feat: implemented docker support for nextjs app #255

Conversation

EkkoKo commented Mar 31, 2023

vercel bot commented Mar 31, 2023

juliusmarminge left a comment

Choose a reason for hiding this comment

juliusmarminge Apr 3, 2023

Choose a reason for hiding this comment

EkkoKo Apr 7, 2023

Choose a reason for hiding this comment

juliusmarminge Apr 3, 2023

Choose a reason for hiding this comment

EkkoKo Apr 7, 2023

Choose a reason for hiding this comment

Siemko Jul 18, 2023

Choose a reason for hiding this comment

albertilagan Jul 20, 2023 • edited Loading

Choose a reason for hiding this comment

ChristianKuri commented May 15, 2023

EkkoKo commented May 15, 2023

hichemfantar commented Jul 16, 2023

akutruff commented Oct 24, 2023

albertilagan commented Oct 24, 2023 • edited Loading

akutruff commented Oct 25, 2023

albertilagan commented Oct 25, 2023 • edited Loading

adamspotlite commented Mar 28, 2024

albertilagan commented Mar 28, 2024

Sivanwol Sep 10, 2024

Choose a reason for hiding this comment

Sivanwol Sep 10, 2024

Choose a reason for hiding this comment

albertilagan Jul 20, 2023 •

edited

Loading

albertilagan commented Oct 24, 2023 •

edited

Loading

albertilagan commented Oct 25, 2023 •

edited

Loading