Dockerizing Angular 2 Client App

To dockerize any app, we usually need to write a Dockerfile

A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.

To quickly brainstorm on what our angular app needs in order to run,

1. We need an image with nodejs installed on it
2. We could have the Angular CLI installed on the image, but the package.json file has it as a dependency, so it's not a requirement.
3. We can add our angular app into the image and install it's dependencies.
4. It needs to expose port 4200 so that we can access it from our host machine through localhost:4200.
5. If all these requirements are met, we can run npm start in the container, which in turn runs ng serve since it's a script in the package.json file, created from the image and our app should run.

Those are the exact instructions we are going to write in our Dockerfile.

mean-docker/angular-client/Dockerfile

# Create image based on the official Node 6 image from dockerhub
FROM node:6

# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app

# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app

# Copy dependency definitions
COPY package.json /usr/src/app

# Install dependecies
RUN npm config set registry https://registry.npm.taobao.org && npm install

# Get all the code needed to run the app
COPY . /usr/src/app

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

I've commented on the file to show what each instruction clearly does.

NOTEBefore we build the image, if you are keen, you may have noticed that the lineCOPY . /usr/src/appcopies our whole directory into the container, includingnode_modules. To ignore this, and other files that are irrelevant to our container, we can add a.dockerignorefile and list what is to be ignored. This file is usually sometimes identical to the.gitignorefile.

Create a.dockerignorefile.

mean-docker/angular-client/.dockerignore

node_modules/

One last thing we have to do before building the image, is to ensure that the app is served from the host created by the docker image. To ensure this, go into yourpackage.jsonand change thestartscript to.

mean-docker/angular-client/package.json

{
 ...
  "scripts": {
    "start": "ng serve -H 0.0.0.0",
    ...
  },
  ...
}

To build the image we will usedocker buildcommand. The syntax is

$ docker build -t <image_tag>:<tag> <directory_with_Dockerfile>

Make sure you are in themean_docker/angular-clientdirectory, then build your image.

$ cd angular-client
$ docker build -t angular-client:dev .

-t是--tag简写， and refers to the name or tag given to the image to be built. In this case the tag will beangular-client:dev.

The.(dot) at the end refers to current directory. Docker will look for the Dockerfile in our current directory and use it to build an image.

This could take a while depending on your internet connection.

Now that the image is built, we can run a container based on that image, using this syntax

$ docker run -d --name <container_name> -p <host-port:exposed-port>  <image-name>

-dflag标签告诉docker1️以detached模式运行容器. 意味着, 他将后台运行并返回主机, 不用到容器里.

$ docker run -d --name angular-client -p 4200:4200 angular-client:dev
8310253fe80373627b2c274c5a9de930dc7559b3dc8eef4abe4cb09aa1828a22

--name容器名字

-p或--portrefers 宿主机于容器的端口映射. 本例,localhost:4200指向dockerhost:4200, 所以语法是4200:4200.

在浏览器访问localhost:4200容器中的angular应用正在运行。

你可以停止容器

$ docker stop angular-client