Developing apps today requires so much more than writing code. Multiple languages, frameworks, architectures, and discontinuous interfaces between tools for each lifecycle stage create enormous complexity. It helps to speed up the development and deployment processes. If you’re working with microservices, Docker makes it much easier to link together small, independent services.
I recently came up with a situation to containerize my React application, so learned the steps to containerize production-ready applications and I'm sharing the same in this log,
To create react application via the command line, you should have Node installed on your computer.
npx create-react-app my-app cd my-app npm start
That's it. Open http://localhost:3000/ to see your app.
The folder structure will look like this,
my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg
Before we containerize our application, we should create a special file that Docker understands, i.e, Dockerfile in the root of your application.
my-app/ Dockerfile <- README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg
Docker builds images automatically by reading the instructions from a
A Docker image consists of read-only layers each of which represents a Dockerfile instruction. The layers are stacked and each one is a delta of the changes from the previous layer.
Without further ado, let's write into our Dockerfile,
FROM node:13.12.0-alpine as build WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY package.json ./ RUN npm i --silent COPY . ./ RUN npm run build FROM nginx:stable-alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
Each instruction creates one layer:
FROMcreates a layer from the
COPYadds files from your Docker client’s current directory.
RUNbuilds your application with
CMDspecifies what command to run within the container.
When you run an image and generate a container, you add a new writable layer (the “container layer”) on top of the underlying layers. All changes made to the running container, such as writing new files, modifying existing files, and deleting files, are written to this thin writable container layer.
Now, let's build our Dockerfile,
docker build -f Dockerfile -t my_react_app:prod .
it pulls the image that we specified in FROM and starts executes all our commands, and generates a single page react build.
takes that build folder, pulls Nginx image from Dockerhub, and copies our build to the
/html folder we specified. Now Nginx serves our React application inside port 80 inside the container.
After all the steps/layers in Dockerfile are completed successfully, we can spin up the image using the following command,
docker run -it --rm -p 5000:80 my_react_app:prod
in this, the port 80 from container listens in 5000 in our machine, which means we can view our application on http://localhost:5000
With this, now you can able to containerize your application in a docker. The steps will be similar to all large react projects.
Follow me on twitter - https://twitter.com/sasiKdharan