Rumah >hujung hadapan web >tutorial js >Cara Membuat Dockerize Apl Next.js Anda: Panduan Langkah demi Langkah
Siaran blog ini menunjukkan cara menyimpan aplikasi Next.js menggunakan Docker dan Docker Compose. Kami akan merangkumi penciptaan Dockerfile
, fail .dockerignore
(walaupun tidak ditunjukkan secara eksplisit, ia tersirat) dan mengkonfigurasi docker-compose.yml
untuk pembangunan dan penggunaan yang cekap. Ini memastikan persekitaran yang konsisten merentas semua peringkat.
Langkah 1: Sediakan Projek Next.js Anda
Mulakan dengan mencipta aplikasi Next.js baharu:
<code class="language-bash">npx create-next-app@latest my-next-app</code>
Ganti "my-next-app"
dengan nama projek yang anda inginkan. Ini menjana projek asas Next.js.
Langkah 2: Permulaan Docker
Navigasi ke direktori projek anda dan mulakan Docker. Walaupun arahan asal mencadangkan docker init
, arahan ini bukan standard. Sebaliknya, kami akan membuat fail yang diperlukan secara manual. Ini menawarkan lebih banyak kawalan dan mengelakkan potensi isu dengan arahan bukan standard.
Struktur projek yang terhasil sepatutnya menyerupai ini:
Langkah 3: Mengoptimumkan Next.js untuk Binaan Kendiri
Ubah suai next.config.ts
(atau next.config.js
) untuk menjana binaan kendiri:
<code class="language-typescript">import type { NextConfig } from 'next' const nextConfig: NextConfig = { output: 'standalone', } export default nextConfig</code>
Ini memudahkan penggunaan dengan mencipta aplikasi serba lengkap.
Langkah 4: Membina Fail Docker
Buat Dockerfile
dalam akar projek anda dengan kandungan berikut:
<code class="language-dockerfile">FROM node:20-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "run", "dev"]</code>
Ini menggunakan imej Node.js 20 Alpine, memasang kebergantungan, menyalin kod aplikasi, mendedahkan port 3000 dan memulakan pelayan pembangunan.
Langkah 5: Mengkonfigurasi docker-compose.yml
Buat fail docker-compose.yml
dalam akar projek anda:
<code class="language-yaml">version: "3.9" services: web: build: . ports: - "3000:3000" environment: - NODE_ENV=development</code>
Ini mentakrifkan perkhidmatan bernama web
yang membina imej daripada direktori semasa, memetakan port 3000 dan menetapkan NODE_ENV
kepada development
.
Mulakan aplikasi menggunakan:
<code class="language-bash">docker-compose up</code>
Kesimpulan
Pendekatan diperkemas ini menggunakan arahan Docker standard dan amalan terbaik untuk menyimpan apl Next.js anda, memudahkan penggunaan dan memastikan konsistensi merentas persekitaran. Ingat untuk menggantikan "my-next-app"
dengan nama projek sebenar anda.
Atas ialah kandungan terperinci Cara Membuat Dockerize Apl Next.js Anda: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!