In this blog post, we’re going to explore Docker and walk through creating a multi-stage Docker build with a simple Nginx application. If you’re just starting out with Docker, don’t worry, I’ll break everything down step by step so you can follow along!

The Dockerfile

Here’s the Dockerfile we’ll be working with:

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

COPY --from=installer /app/build /usr/share/nginx/html

Unpacking the Dockerfile

Now, let’s unpack what’s happening in this Dockerfile, step by step:

1. FROM node:18-alpine AS installer

This line pulls the official Node.js image (version 18 on Alpine Linux) from Docker Hub. Think of Docker Hub as a library of images. By using this line, we specify that we want to use Node.js as our base image for the first stage of our build.

2. WORKDIR /app

This command sets the working directory inside the container to /app. You can think of this as creating a dedicated folder for your application within the container, similar to how you might organize files on your desktop.

3. COPY package*.json ./

Here, we copy the package.json and package-lock.json files from our local directory to the container's working directory. These files contain information about the dependencies our application needs.

4. RUN npm install

This command runs npm install, which installs all the dependencies specified in the package.json.

5. COPY . .

This line copies the rest of our application files into the container. It brings everything from our local directory into the /app directory inside the container.

6. RUN npm run build

Now we compile our application using the command npm run build. This step usually transforms our code (often React, in this case) into a static bundle, ready to be served to users. The output of this command will be placed in a build directory within /app.

7. FROM nginx:latest AS deployer

In this line, we switch to a new base image: Nginx. Nginx is a powerful web server that can serve static files, like the ones we just built. This is the beginning of our second stage in the multi-stage build process.

8. COPY --from=installer /app/build /usr/share/nginx/html

Here, we copy the built application files from the previous stage (installer) into the Nginx serving directory. The --from=installer flag tells Docker to grab files from the installer stage we just defined.

Running Your Docker Container

Once your Dockerfile is set up, you can build and run your Docker container with the following commands:

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

Make sure to replace your-app-name with a name of your choosing. The -dp flag will detach your container and map port 3000 on your host machine to port 80 in the container, allowing you to access your app at http://localhost:3000.

Conclusion

And there you have it! You’ve just created a multi-stage Docker build that takes your application from development to production using Nginx. If you have any questions or thoughts about the process, feel free to leave a comment below!

Gotchas: Things to Watch Out For

One common gotcha when working with this setup is forgetting to map the correct port numbers. Nginx typically listens on port 80 inside the container, but if you're trying to access the app on your local machine, you'll need to forward the correct port from the container to your machine. For example, if you want to access the app on localhost:3000, you'll need to run the container with the flag -p 3000:80 to map port 3000 on your machine to port 80 in the container.

Miss this step, and you'll find yourself wondering why everything built perfectly but you can't reach the app in your browser!

Tags and Mentions

@piyushsachdeva
Day 3 video