Melabuhkan Aplikasi Next.js menggunakan Binaan Kendiri

pengenalan

Docker telah mendapat populariti dalam beberapa tahun kebelakangan ini kerana membolehkan aplikasi diletakkan di dalam bekas. Bekas ini boleh digunakan ke mana-mana persekitaran dan akan berfungsi dengan cara yang sama dalam kesemuanya, memberikan gelagat seragam tanpa mengira platform tempat aplikasi dijalankan. Bekas ini menggunakan imej, yang merupakan salinan atau termampat syot kilat aplikasi. Dengan meletakkannya di dalam bekas, ia dipaparkan sama seperti keadaannya. Ini adalah salah satu teknologi yang terdesak oleh sesetengah orang, manakala yang lain tidak menyedari bahawa mereka memerlukannya sehingga mereka mendengar tentangnya.

Bagi pihaknya, Next.js ialah rangka kerja React yang paling popular. Seperti mana-mana aplikasi JavaScript lain yang menggunakan pengikat seperti webpack atau Vite, untuk pengeluaran versi terkumpul projek digunakan. Ini dikenali sebagai bina. Binaan bertujuan untuk menyediakan jumlah kod minimum yang diperlukan untuk aplikasi berfungsi sama seperti dalam pembangunan. Ini memastikan bahawa fail JavaScript adalah sangat ringan, membolehkan penyemak imbas mengambil dan mentafsirnya dalam masa yang sesingkat mungkin untuk memaparkan antara muka pengguna atau melaksanakan apa sahaja tugas yang diperlukan oleh aplikasi."

Next.js, khususnya, menawarkan versi yang mengurangkan lagi saiz binaan: Binaan Kendiri. Jika kami menggunakan Docker untuk mencipta imej untuk aplikasi Next.js kami, kami boleh menggunakan aplikasi hebat yang telah kami bina ke mana-mana persekitaran dengan mudah tanpa perlu risau tentang keserasian atau konfigurasi tambahan. Dalam artikel ini, kita akan melihat cara untuk mencapainya.

Pengurus pakej

Dalam kes saya, saya suka menggunakan pnpm untuk mengurangkan saiz cakera folder node_modules. Oleh itu, contoh imej Next.js Docker menggunakan pengurus pakej ini, tetapi anda boleh membuat sedikit pelarasan untuk menggunakan npm atau benang jika anda mahu.

Konfigurasi Next.js

Dalam fail next.config.js, kami perlu menentukan bahawa jenis binaan yang terhasil akan berdiri sendiri apabila aplikasi disusun untuk pengeluaran. Untuk ini, kita perlu memasukkan perkara berikut:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone"
};

export default nextConfig;

Dengan cara ini, output aplikasi akan menjadi jenis kendiri.

Dockerfile

Fail yang mewakili imej Docker kami ialah Dockerfile. Biasanya fail ini diletakkan dalam akar projek. Jom buat langkah demi langkah.

Imej asas

Setiap imej Docker bermula daripada imej asas. Dalam kes ini, mana-mana projek JavaScript yang menjalankan pelayan, akan memerlukan masa jalan seperti Node.js. Kami akan mengambil sebagai asas imej Docker versi Node.js yang serasi dengan projek kami. Dalam kes saya, saya suka menggunakan versi Alpine imej, kerana ini lebih ringan. Walau bagaimanapun, kami perlu menyemak bahawa tiada isu keserasian semasa membina imej, jika tidak, kami perlu menggunakan versi imej "bukan Alpine". Untuk contoh ini, saya menggunakan imej nod:22.6.0-alpine3.19 sebagai asas.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone"
};

export default nextConfig;

Kami meletakkan alias untuk mengitar semulanya dalam langkah atau peringkat imej yang berbeza.

Kebergantungan sistem dan pnpm

Peringkat seterusnya ialah memasang kebergantungan. Dalam kes ini, hanya satu pergantungan sistem diperlukan: libc6-compat. Di sini disebutkan sebabnya.

FROM node:22.6.0-alpine3.19 AS base

Memandangkan pnpm tidak disertakan secara lalai dalam Node.js, adalah perlu untuk mengaktifkannya dan menetapkan pembolehubah persekitaran supaya pakej yang dipasang boleh dicache.

FROM base AS build-deps
RUN apk add --no-cache libc6-compat

Kemudian, kita perlu menetapkan direktori kerja supaya mempunyai pemisahan yang jelas antara folder sistem dan folder aplikasi. Dalam kes ini, kami menggunakan /app.

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"

RUN corepack enable
RUN corepack prepare pnpm@latest --activate

Kini kita perlu menyalin fail yang mengandungi maklumat kebergantungan projek dan memasangnya.

WORKDIR /app

Argumen --frozen-lockfile dan --prefer-frozen-lockfile digunakan untuk menghormati versi yang dinyatakan dalam fail kunci pnpm.

Untuk menamatkan peringkat ini, perpustakaan tajam ditambah. Ini adalah perlu untuk mengoptimumkan imej dalam persekitaran pengeluaran dalam Next.js.

COPY package.json pnpm-lock.yaml ./

RUN pnpm install --frozen-lockfile --prefer-frozen-lockfile

Pentas penuh kelihatan seperti ini:

RUN pnpm add sharp

Membina aplikasi

Peringkat seterusnya ialah menyusun aplikasi Next.js. Di sinilah letaknya kunci untuk membuat imej berfungsi, kerana Dockerfile yang lain tidak berbeza atau yang anda tidak dapati dalam mana-mana contoh lain. Pada peringkat ini adalah perlu untuk lulus sebagai argumen binaan pembolehubah persekitaran yang digunakan dalam projek dan menetapkannya sebelum menjana binaan.

Ini kerana, memandangkan terdapat dua masa aplikasi berfungsi, masa bina dan masa jalan, jika pembolehubah persekitaran tidak tersedia pada masa jalan, semua aset statik yang menggunakannya tidak akan mempunyai nilai untuknya dan aplikasi tidak akan berfungsi dengan betul. Dalam contoh ini, tiga pembolehubah persekitaran digunakan: NEXT_PUBLIC_BACKEND_URL, FRONTEND_URL dan JWT_SECRET.

FROM base AS build-deps
RUN apk add --no-cache libc6-compat

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"

RUN corepack enable
RUN corepack prepare pnpm@latest --activate

WORKDIR /app

COPY package.json pnpm-lock.yaml ./

RUN pnpm install --frozen-lockfile --prefer-frozen-lockfile

RUN pnpm add sharp

Kemudian, pnpm diaktifkan, direktori kerja ditetapkan, semua fail aplikasi disalin dan binaan dijana.

FROM base AS builder

ARG NEXT_PUBLIC_BACKEND_URL
ENV NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL

ARG FRONTEND_URL
ENV FRONTEND_URL=$FRONTEND_URL

ARG JWT_SECRET
ENV JWT_SECRET=$JWT_SECRET

Pentas penuh kelihatan seperti ini:

RUN corepack enable
RUN corepack prepare pnpm@latest --activate

WORKDIR /app

COPY --from=build-deps /app/node_modules ./node_modules

COPY . .

RUN pnpm build

Menjalankan aplikasi

Peringkat terakhir ialah menjalankan aplikasi. Untuk melakukan ini, kami mula-mula menetapkan persekitaran pengeluaran Nod:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone"
};

export default nextConfig;

Untuk pilihan peribadi, telemetri Next.js dilumpuhkan. Maksudnya, kami pada asasnya tidak menghantar data aplikasi kami kepada Vercel untuk menambah baik Next.js melalui diagnosis ralat dan metrik penggunaan.

FROM node:22.6.0-alpine3.19 AS base

Selain itu, sebagai amalan yang baik, adalah disyorkan untuk menggunakan pengguna bukan root dalam imej Docker. Ini, sebagai contoh, mengelakkan pelanggaran keselamatan sekiranya kontena mempunyai akses kepada rangkaian hos. Untuk melakukan ini, kumpulan nodejs dan pengguna nextjs ditambah dan diberikan sifat folder .next.

FROM base AS build-deps
RUN apk add --no-cache libc6-compat

Kemudian, fail yang dijana oleh binaan kendiri disalin untuk mencipta struktur yang sama bagi binaan lalai Next.js.

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"

RUN corepack enable
RUN corepack prepare pnpm@latest --activate

Memandangkan kami mencipta pengguna nextjs, kami perlu menentukan bahawa ini akan menjadi pengguna untuk digunakan.

WORKDIR /app

Begitu juga, anda perlu menentukan port terdedah bekas, serta port Nod dan nama hos yang akan digunakan, iaitu 0.0.0.0 kerana kami tidak tahu alamat yang tepat.

COPY package.json pnpm-lock.yaml ./

RUN pnpm install --frozen-lockfile --prefer-frozen-lockfile

Kemudian, pembolehubah persekitaran untuk masa jalan aplikasi ditentukan daripada argumen binaan.

RUN pnpm add sharp

Pembolehubah persekitaran yang ditentukan dalam fail docker-compose.yml boleh digunakan, serta semasa menjalankan bekas, walau bagaimanapun, ia tidak masuk akal untuk pembolehubah persekitaran dalam konteks ini berbeza pada masa bina dan masa jalan .

Akhir sekali, kami menjalankan pelayan.

FROM base AS build-deps
RUN apk add --no-cache libc6-compat

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"

RUN corepack enable
RUN corepack prepare pnpm@latest --activate

WORKDIR /app

COPY package.json pnpm-lock.yaml ./

RUN pnpm install --frozen-lockfile --prefer-frozen-lockfile

RUN pnpm add sharp

fail lengkap

Fail Docker yang lengkap kelihatan seperti ini:

FROM base AS builder

ARG NEXT_PUBLIC_BACKEND_URL
ENV NEXT_PUBLIC_BACKEND_URL=$NEXT_PUBLIC_BACKEND_URL

ARG FRONTEND_URL
ENV FRONTEND_URL=$FRONTEND_URL

ARG JWT_SECRET
ENV JWT_SECRET=$JWT_SECRET

Anda juga boleh mencari fail dalam intipati ini.

Kesimpulan

Membuat imej Docker untuk aplikasi Next.js boleh menjadi menakutkan pada mulanya kerana semua pertimbangan yang perlu kami ambil kira. Di samping itu, terdapat kepercayaan popular bahawa mengehos sendiri aplikasi Next.js, i. e., di luar Vercel, adalah rumit. Ia tidak. Dengan memahami bahagian utama, ia sebenarnya mudah.

Saya berharap dengan maklumat ini anda boleh melabuhkan aplikasi Next.js anda tanpa masalah. Dan anda tahu latihannya, jika anda mempunyai sebarang soalan atau ingin berkongsi sesuatu, tinggalkan di dalam komen :)

Atas ialah kandungan terperinci Melabuhkan Aplikasi Next.js menggunakan Binaan Kendiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!