Multi-Stage Docker Build with pnpm

A brief description of your project. Explain what it does and why it is useful.

Getting Started

Follow the steps below to set up and run the project using pnpm in a multi-stage Docker build.

1. Clone the Repository

Start by cloning this repository to your local machine:

git clone https://github.com/ma5bah/Multistage_Docker_Build.git

2. Navigate to the Project Directory

Go to the folder where the repository was cloned:

cd Multistage_Docker_Build

3. Build the Docker Image

Build the Docker image using the Dockerfile included in the project:

docker build -t my-app:latest .

4. Run the Docker Container

Run the container using the built image:

docker run -p 3000:3000 my-app

• Replace <host_port> with the port you want to use on your local machine.
• Replace <container_port> with the port the application uses inside the container.
• Replace <image_name> with the name of the Docker image you built earlier.

5. Access the Application

Once the container is running, access the application by navigating to:

http://localhost:3000

Replace <host_port> with the port you specified in the previous step.

Stopping the Container

To stop the container, use the following command:

docker ps

Then, copy the container ID and run:

docker stop <container_id>

---

Multi-Stage Dockerfile Explanation

Below is an example Dockerfile that uses a multi-stage build with pnpm:

# Stage 1: Builder
FROM guergeiro/pnpm:18-10-alpine AS builder

WORKDIR /app

COPY package.json ./
RUN pnpm install

COPY . .
RUN pnpm run build

# Stage 2: Production
FROM guergeiro/pnpm:18-10-alpine AS production

WORKDIR /app

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

RUN pnpm install --prod

EXPOSE 3000

CMD ["pnpm", "run", "start"]

Stage 1: Builder

1. FROM guergeiro/pnpm:18-10-alpine AS builder
   Uses a prebuilt Docker image that bundles Node.js and pnpm on Alpine Linux.

2. WORKDIR /app
   Sets the working directory inside the container to /app.

3. COPY package.json ./
   Copies the package.json needed for installing dependencies.

4. RUN pnpm install
   Installs dependencies using pnpm.

5. COPY . .
   Copies all files and directories from the local project into the container.

6. RUN pnpm run build
   Runs the build script (e.g., compiles TypeScript, bundles assets, etc.).

---

Stage 2: Production

7. FROM guergeiro/pnpm:18-10-alpine AS production
   Starts fresh with a minimal image containing Node.js and pnpm.

8. WORKDIR /app
   Sets the working directory.

9. COPY --from=builder /app/.next ./.next
   Copies only the compiled output from the builder stage to keep the final image lean.

10. COPY package.json ./
    Copies the package definition needed for installing production dependencies.

11. COPY next.config.mjs ./next.config.mjs
    Copies the Next.js configuration file.

12. RUN pnpm install --prod
    Installs only production dependencies.

13. EXPOSE 3000
    Documentation hint that the container’s application listens on port 3000.

14. CMD ["pnpm", "run", "start"]
    Defines the command to run your production server.

---

Summary of Workflow

1. Builder Stage:

   • Installs all dependencies.
   • Copies and builds source code.

2. Production Stage:

   • Uses only the compiled output (.next) and production dependencies.
   • Excludes dev dependencies, reducing final image size.
   • Exposes and starts the application.

---

Benefits of Multi-Stage Builds

• Smaller Image Sizes: Only runtime files and production dependencies are shipped.
• Improved Security: Build tools and dev dependencies aren’t present in the final image.
• Faster Deployments: Smaller images push/pull more quickly.
• Cleaner Separation: Build environment is isolated from the production environment.