Jump to content

Docker

Stack ten możesz skonteneryzować i zdeploy’ować jako pojedynczy kontener korzystając z Dockera, czy też jako część grupy kontenerów korzystając z docker-compose. Po przykładowe repozytorium bazowane na tym dokumencie, zobacz ajcwebdev/ct3a-docker.

Konfiguracja Projektu z Dockerem

Należy pamiętać, że Next.js wymaga innego procesu na czas budowania (dostępnego na frontendzie, z prefiksem NEXT_PUBLIC) a innego dla środowiska na czas działania, tylko po stronie serwera, oraz zmiennych. W poniższym demo korzystamy z dwóch zmiennych, zwróć uwagę na ich umiejscowienie w pliku Dockerfile, argumenty w konsoli i plik docker-compose.yml:

  • DATABASE_URL (używany przez serwer)
  • NEXT_PUBLIC_CLIENTVAR (używany przez klienta)

1. Konfiguracja Next.js

W swoim pliku next.config.js, dodaj opcję konfiguracji outputu standalone aby zredukować rozmiar zdjęć poprzez automatyczne wykorzystanie danych wyjściowych:

export default defineNextConfig({
  reactStrictMode: true,
  swcMinify: true,
+ output: "standalone",
});

2. Stwórz plik dockerignore

Kliknij tutaj i dodaj poniższą zawartość do pliku .dockerignore:
.env
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
.git

3. Stwórz plik Dockerfile

Jako iż nie pobieramy serwerowych zmiennych środowiskowych do naszego kontenera, walidacja zmiennych środowiskowych wyrzuci błąd. Aby mu zapobiec, musimy dodać flagę SKUP_ENV_VALIDATION=1 do komendy budowania projektu - schemat zmiennych środ. nie zostanie wtedy sprawdzony podczas budowania.

Kliknij tutaj i dodaj poniższą zawartość do pliku Dockerfile:
##### DEPENDENCIES

FROM --platform=linux/amd64 node:16-apline3.17 AS deps
RUN apk add --no-cache libc6-compat openssl1.1-compat
WORKDIR /app

# Install Prisma Client - remove if not using Prisma

COPY prisma ./

# Install dependencies based on the preferred package manager

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./

RUN \
 if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
 elif [ -f package-lock.json ]; then npm ci; \
 elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
 else echo "Lockfile not found." && exit 1; \
 fi

##### BUILDER

FROM --platform=linux/amd64 node:16-apline3.17 AS builder
ARG DATABASE_URL
ARG NEXT_PUBLIC_CLIENTVAR
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
 if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \
 elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \
 elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \
 else echo "Lockfile not found." && exit 1; \
 fi

##### RUNNER

FROM --platform=linux/amd64 node:16-apline3.17 AS runner
WORKDIR /app

ENV NODE_ENV production

# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

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"]

Uwagi

Zbuduj oraz Uruchom Obraz Lokalnie

Zbuduj i uruchom ten obraz lokalnie korzystając z następujących komend:

docker build -t ct3a-docker --build-arg NEXT_PUBLIC_CLIENTVAR=clientvar .
docker run -p 3000:3000 -e DATABASE_URL="database_url_goes_here" ct3a-docker

Otwórz localhost:3000 aby zobaczyć uruchomioną aplikację.

Docker Compose

Możesz także skorzystać z narzędzia Docker Compose, aby zbudować obraz i uruchomić kontener.

Podążaj za krokami 1-4 powyżej, kliknij tutaj i dodaj poniższą zawartość do pliku docker-compose.yml:
version: "3.9"
services:
  app:
    platform: "linux/amd64"
    build:
      context: .
      dockerfile: Dockerfile
      args:
        NEXT_PUBLIC_CLIENTVAR: "clientvar"
    working_dir: /app
    ports:
      - "3000:3000"
    image: t3-app
    environment:
      - DATABASE_URL=database_url_goes_here

Uruchom aplikację za pomocą komendy docker compose up:

docker compose up

Otwórz localhost:3000 aby zobaczyć uruchomioną aplikację.

Deployment na Railway’a

Możesz użyć usługi PaaS (“platforma jako usługa”), takiej jak zautomatyzowany deployment Dockerfile’a od Railway’a, aby zdeploy’ować swoją aplikację. Jeżeli zainstalowałeś CLI Railway’a, możesz zdeploy’ować aplikację korzystając z poniższych komend.

railway login
railway init
railway link
railway up
railway open

Przejdź do zakładki “Zmienne” (“Variables”) i dodaj tam swój DATABASE_URL. Następnie przejdź do ustawień (“Settings”) i wybierz opcję “Wygeneruj Domenę.” (“Generate Domain.”). Aby zobaczyć działający przykład na Railway, odwiedź stronę ct3a-docker.up.railway.app.

Przydatne Zasoby

Nazwa odnośnikaLink
Odnośnik do pików Dockerfilehttps://docs.docker.com/engine/reference/builder/
Odnośnik do plików “Compose file” w wersji 3https://docs.docker.com/compose/compose-file/compose-file-v3/
Odnośnik do Docker CLIhttps://docs.docker.com/engine/reference/commandline/docker/
Odnośnik do Docker Compose CLIhttps://docs.docker.com/compose/reference/
Wdrażanie aplikacji Next.js z obrazem Dockerahttps://nextjs.org/docs/deployment#docker-image
Next.js z Dockeremhttps://benmarte.com/blog/nextjs-in-docker/
Przykład Next.js z Dockeremhttps://github.com/vercel/next.js/tree/canary/examples/with-docker
Stwórz obraz Dockera aplikacji Next.jshttps://blog.tericcabrel.com/create-docker-image-nextjs-application/