Building REST API with Express, TypeScript - Part 2: Docker Setup

rsbh

Rishabh Mishra

Posted on July 31, 2021

Building REST API with Express, TypeScript - Part 2: Docker Setup

In the previous post, we build a REST API server with Express and TypeScript. In this post, we will dockerize the sever.

Why Docker.

Docker helps organizations to ship and develop applications better and faster. It will be easy to set up the development environment on any new machine with docker as it abstracts out lots of complexity of setting up dependencies and environment. Docker also isolates the project from other projects in the same machine so the developer can run multiple projects without having any conflict with the required dependencies.

Docker makes it easy to configure and setup dependencies and environments for the application. As most of the companies have dedicated teams to do setup and manage infrastructure, Docker gives more power to developers to configure without depending on other teams to do the setup.

Write Dockerfile.

To Dockerize the server, we need to create a Dockerfile. A Dockerfile is just a list of instructions to create a docker image. Read more about Dockerfile here

Each line in the Dockerfile is a command and create a new image layer of its own. Docker caches the images during the build, so every rebuild will only create the new layer which got changed from the last build. Here the order of commands is very significant as it helps to reduce the build time.

Let's start writing Dockerfile for the server. Here we are taking node:12 as the base image for the server docker image. Explore dockerhub for more node image version. Here we are copying the package.json and doing npm install first, then copying the other files. Docker will cache the images of these two steps during the build and reuse them later as they change less frequently. Here we will be running the development server with the docker image, so we need to give npm run dev as the executing command.

Dockerfile

FROM node:12

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8000

CMD ["npm", "run", "dev"]
Enter fullscreen mode Exit fullscreen mode

We need to add .dockerignore to tell docker build to ignore some files during the COPY Command.

.dockerignore

node_modules
npm-debug.log
Enter fullscreen mode Exit fullscreen mode

After creating the Dockerfile, we need to run the docker build to create a docker image from the Dockerfile. Here we are naming the docker image as express-ts

docker build -t express-ts .
Enter fullscreen mode Exit fullscreen mode

We can verify the docker image by running the docker images command. Here we can see the name, size, and tag of the docker images.

docker images
REPOSITORY                        TAG                 IMAGE ID            CREATED             SIZE
express-ts                        latest              d0ce1e38958b        2 minutes ago       1.11GB
Enter fullscreen mode Exit fullscreen mode

We can run the docker image with the docker run command. Here we can mapping the system port 8000 to docker container port 8000. We can verify if the server is running or not by visiting http://localhost:8000/ping

docker run -p 8000:8000 express-ts
Enter fullscreen mode Exit fullscreen mode

Add Docker Compose

The development server is running fine inside docker, but now we need to run the docker build command every time after making any changes to the source files to update the changes during development because the nodemon inside the docker container cannot watch the src folder on the local machine. We need to mount the local src folder to the docker container folder, so every time we make any change inside the src folder, nodemon restarts the development server inside the docker container.

We will add the docker-compose.yml file to the root of the project to mount the local src folder. Read more about docker-compose here

docker-compose.yml

version: "3"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./src:/app/src
    ports:
      - "8000:8000"
Enter fullscreen mode Exit fullscreen mode

We need to run the command docker-compose up to start the server. Now the server is running in development mode with auto-restart on code changes. We can verify the server is restarting on code changes by making any code change in the TypeScript files.

docker-compose up
Enter fullscreen mode Exit fullscreen mode

The docker setup for the development server is completed. Let's rename the Dockerfile as Dockerfile.dev and update the docker-compose.yaml file. We will use the Dockerfile for the production image, which we are going to set up in the next section.

mv Dockerfile Dockerfile.dev
Enter fullscreen mode Exit fullscreen mode

docker-compose.yml

version: "3"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - ./src:/app/src
    ports:
      - "8000:8000"
Enter fullscreen mode Exit fullscreen mode

Add Production Dockerfile

Let's start building a docker image for the production server. We need to create a new Dockerfile and add the following commands. Here after copying the files, we need to build the JavaSript files and execute the npm start command.

FROM node:12

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 8000

CMD ["node", "start"]
Enter fullscreen mode Exit fullscreen mode

After running the docker build command, we can see the docker image is created for the production server.

docker images
REPOSITORY                      TAG                 IMAGE ID            CREATED             SIZE
express-ts                      latest              d0ce1e38958b        2 minutes ago       1.11GB
Enter fullscreen mode Exit fullscreen mode

Here the image size is 1.11GB, which is not optimized. Let's optimize the docker image and reduce the size.

First, instead of taking node:12 as the base image, we will be taking its alpine variant. Alpine Linux is very lightweight. Read more about alpine-docker here.

FROM node:12-alpine
Enter fullscreen mode Exit fullscreen mode

Let's build the docker image with the updated Dockerfile. Here we are tagging the docker image as alpine so we can compare the image size with the previous build.

docker build -t express-ts/alpine .
Enter fullscreen mode Exit fullscreen mode
docker images
REPOSITORY                       TAG                 IMAGE ID            CREATED             SIZE
express-ts                       alpine              2b06fcba880e        46 seconds ago      280MB
express-ts                       latest              d0ce1e38958b        2 minutes ago       1.11GB
Enter fullscreen mode Exit fullscreen mode

After running the docker images command we can see the difference in the sizes of docker images. The docker image is much leaner than the previous build.

There are still some issues with our docker image as development dependencies are there in production build and TypeScript code is there, which is not required while running the server in production. So let's optimize the docker image further with a multi-stage build.

Here we create two stages, one for building the server and the other for running the server. In the builder stage, we generate Javascript code from the Typescript files. Then in the server stage, we copy the generated files from the builder stage to the server stage. In the Server stage, we need only production dependencies, that's why we will pass the --production flag to the npm install command.

FROM node:12-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:12-alpine AS server
WORKDIR /app
COPY package* ./
RUN npm install --production
COPY --from=builder ./app/public ./public
COPY --from=builder ./app/build ./build
EXPOSE 8000
CMD ["npm", "start"]
Enter fullscreen mode Exit fullscreen mode

Let's build the docker image with the updated multi-staged Dockerfile. Here we are tagging the docker image as ms so we can compare the image sizes with the previous builds.

docker build -t express-ts/ms .
Enter fullscreen mode Exit fullscreen mode
docker images

REPOSITORY                       TAG                 IMAGE ID            CREATED             SIZE
express-ts                       alpine              2b06fcba880e        46 seconds ago      280MB
express-ts                       latest              d0ce1e38958b        2 minutes ago       1.11GB
express-ts                       ms                  26b67bfe45b0        9 minutes ago       194MB
Enter fullscreen mode Exit fullscreen mode

After running the docker images command we can see the difference in the sizes of docker images. The multi staged image is the leanest among all images.

We have dockerized the development and production version of the Express and TypeScript REST API server.

All the source code for this tutorial is available on GitHub.

Next

💖 💪 🙅 🚩
rsbh
Rishabh Mishra

Posted on July 31, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related