Greetings and salutations!
A while back, I developed a blog app using Next.js and JavaScript and deployed it on Vercel. A month later, having learned the fundamentals of Docker, I got a challenge to dockerize the application. This article is a breakdown of how I did the process, the benefits, the challenges, and the outcome of the project as a whole.
To be able to use Docker, I had to understand what Docker is.
What is Docker?
Docker is an automation tool used to make deployment by utilizing lightweight containers so that applications can work efficiently in different environments in isolation. It operates as a Platform-as-a-Service product that provides containers to deliver software.
Terms used in the article
Platform-as-a-Service: cloud environment that has resources such as servers and operating systems, basically everything a developer would need to build, test, and deploy their applications/packages.
Containers: standalone, executable packages of software that include everything needed to run an application.
Generally, the PaaS idea of Docker is provided to developers in the form of containers for them to build, test, and deploy their applications.
The Process
Installation
You need to install Docker on your local machine. Docker is available on Windows, Mac OS, and Linux here.
The setup installs the Docker application to your local machine. The application is used to view all Containers, Images, Volumes, and Dev Environments.
Creating a Dockerfile in the app directory
After installing Docker, you have to create a Dockerfile in your app directory. In my case, I created a Dockerfile in my Next.js App directory as below:
I also created a .dockerignore file, which serves the same purpose as .gitignore, and added 'node_modules' in it to reduce the bulk when starting the image/container.
Using the example of the Dockerfile from docker/welcome-to-docker/Dockerfile on GitHub, I modified my Dockerfile to work for my app.
# Use an official Node.js runtime as the base image FROM node:18 # Set the working directory in the container WORKDIR /app # Copy package.json and package-lock.json to the working directory COPY package*.json ./ # Copy the rest of the application code to the working directory COPY ./src ./src COPY ./public ./public # Install project dependencies RUN npm install # Build your Next.js app RUN npm run build # Expose the port your app will run on EXPOSE 3000 # Start your Next.js app CMD ["npm", "start"]Before running the command to build the docker image, ensure your package.json file contains 'build' and 'start'. After confirming they are present, run the command below to build the docker image:
Note: Ensure you have a stable internet connection when running the Docker commands and Dockerfile.
docker build -t your-image-name .Replace 'your-image-name' with the image name of your choice and give it a moment to run all processes indicated in the Dockerfile. After the command is run and complete, you can either choose to create a container from the Terminal or the Docker Desktop
Terminal option
You can run the command below:
docker run -p 3000:3000 my-nextjs-app:1.0The command maps port 3000 (which you EXPOSEd) from the container to port 3000 of your local (host) machine.
Docker Desktop option
- On the 'Actions' section, click on the play button to run the image and create the container.
The container will be present in the Containers section:
Running the container grants access to the localhost:port_number:
With that, you have finally dockerized your Next.js App. It could be a tedious job (like it had been for me) running the Dockerfile and so, I discuss the challenges:
Challenges
I faced a challenge running the Dockerfile. The Dockerfile would run up to the point of RUN npm install and stall before terminating the process. The error would read:
RUN npm install:
34.18 npm ERR! code ERR_SOCKET_TIMEOUT
34.18 npm ERR! network Socket timeout
34.19 npm ERR! network This is a problem related to network connectivity.
34.19 npm ERR! network In most cases you are behind a proxy or have bad network settings.
34.19 npm ERR! network
34.19 npm ERR! network If you are behind a proxy, please make sure that the
34.19 npm ERR! network 'proxy' config is set properly. See: 'npm help config'
34.21
34.21 npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-10-13T12_02_25_947Z-debug-0.log
------
Dockerfile:15
--------------------
13 |
14 | # Install project dependencies
15 | >>> RUN npm install
16 |
17 | # Build your Next.js app
--------------------
ERROR: failed to solve: process "/bin/sh -c npm install" did not complete successfully: exit code: 1
Or
ERROR: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
------
> [4/5] RUN npm run build:
0.752 npm ERR! code ELIFECYCLE
0.752 npm ERR! errno 1
0.755 npm ERR! @ build: `next build`
0.756 npm ERR! Exit status 1
0.756 npm ERR!
0.756 npm ERR! Failed at the @ build script.
0.756 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
0.759
0.760 npm ERR! A complete log of this run can be found in:
0.760 npm ERR! /root/.npm/_logs/2023-10-13T06_20_34_674Z-debug.log
------
Dockerfile:17
--------------------
15 |
16 | # Build your Next.js app
17 | >>> RUN npm run build
18 |
19 | # Expose the port your app will run on
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
Logs stated that it was a proxy error. Switching my connection to another one corrected the issue.
The app is already deployed on Vercel but the challenge is there to publish the image on AWS instances or Container Registry services like Google's. This is a challenge for when I am well-learned of Docker.
Note (again): Ensure you have a stable internet connection when running the Docker commands and Dockerfile
Conclusion
Docker is an interesting tool to learn, especially for parties interested in DevOps, Machine Learning, and anything involving Cloud Deployment. My advice: learn the fundamentals of Docker; it could be a life saver!