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
Top comments (1)
Great breakdown, you really did go over the entire line and explained everything. All the gaps the video left open you
reconcile them, making this blogs as a perfect companion to this course. I just subscribed. Keep up the great content.