In this article, I will show you, A complete tutorial to build an Angular application to docker production-ready image with multi-stages. And I will also run this angular docker image in a docker container.
Final this project-related files and directories structure …
. ├── dist │ └── docker-angular-app ├── Dockerfile ├── nginx │ └── default.conf ├── package.json ├── package-lock.json ├── ... └── ...
Create a angular project
In this article, I am using the fresh new angular app. But If you have any existing angular then you skip this part and you can use your existing angular application.
ng new docker-angular-app cd docker-angular-app
Build Dockerfile
In the project directory, Create Dockerfile with no extension and first latter capital.
# STAGE 1: Build app # Step 1: Pull node offical image FROM node:16.13.2-alpine as builder # Step 2: Define working dir for builder container WORKDIR /usr/local/app # Step 3: Copy package.json and package-lock.json files COPY package*.json ./ # Step 4: Install dependancy RUN npm install # Step 5: Copy all source code COPY . . # Step 6: Generate build of application RUN $(npm bin)/ng build --configuration=production --source-map=false # STAGE 2: Setup Server # Step 7: Pull nginx image FROM nginx:1.21.5-alpine # Step 8: Copy default nginx config COPY nginx/default.conf /etc/nginx/conf.d/default.conf # Step 9: Copy builded application source code COPY --from=builder /app/dist/docker-angular-app /usr/share/nginx/html # step 10: Expose container port 80 EXPOSE 80 # Step 11: Switch nginx deamon off # Note: If your container serve multiple service than don't daemon off. CMD nginx -g "daemon off;"
That is a docker snippet, I use to build for angular application to the docker image. This docker snippet has a multi-stage build.
Stage #1: Build this angular app to production ready code
Step 1: FROM node:16.13.2-alpine as builder
Pulling node runtime image, Initialize the new build stage. In my case, I used node 16.13.2 alpine version. It’s better to use your machine node version which is the angular app developed. In the development case, some developers use the node’s latest version. Which is not for production.
In the snippet, I have used the alpine version, which is lightweight more than the row node version
Step 2: WORKDIR /usr/local/app
Sets the default working directory for the present building container. After this instruction is executed, If this directory doesn’t exist, this directory will be created. the subsequent steps in the Dockerfile
The defined directory(usr/local/app) is inside the container which has its own independent file system
Step 3: COPY package*.json ./
Copy the source application dependency files (package.json and package-lock.json) on the host machine to the specified working directory(usr/local/app)
Step 4: RUN npm install
In the working directory run command, “npm install” to install all application dependencies.
Step 5: COPY . .
Copy all the current directory source codes excluding folder or directory which is defined on the .dockerigone file.
Multiple building dependencies install problem understanding*
Note: It’s solved in this snippet code.
imagine you are building the app for the first time, and it is ok to install all the dependencies. But you change a source code related to the angular app (not related to any dependencies) and then push again to build the image. and the run process installs all dependencies again. You probably don’t want to install the dependency unless some dependency is added or removed.
When your execution process copies all files and directories, Install dependency. that problem will be happen
This snippet code, step 3: copy package.json and package-lock.json which are application dependencies related. Then step 4: install dependencies and step 5: copy all source codes.
This execution process solve multiple build install dependencies, that’s used
Step 6: RUN $(npm bin)/ng build --configuration=production --source-map=false
Executes the angular build in a new layer on top of the base node image. After this instruction is executed, the build output is stored under usr/local/app/dist/docker-angular-app and the compiled image will be used for the subsequent steps in the Dockerfile
Stage #2: Serving the angular production ready app to nginx server
Step 7: FROM nginx:1.21.5-alpine
Initialize final or secondary build stage. nginx:1.21.1.5-alpine image as the base image for executing subsequent instructions relevant to nginx configuration
Step 8: COPY nginx/default.conf /etc/nginx/conf.d/default.conf
Copy our own Nginx configuration file for the angular application to the docker Nginx server image.
Note: make sure your Nginx file is “nginx” directory. Or If it is inside others directory, so make sure you use right your configuration path
Step 9: COPY –from=builder /app/dist/docker-angular-app /usr/share/nginx/html
Copies the build output generated production-ready static resource in stage 1 (--from=builder) to replace the default Nginx HTML contents.
Important Note: Angular builds production-ready static resources into ./dist/[project name]. In this example, the project name is docker-angular-app so the output directory is docker-angular-app. So make sure! you use your project name.
Step 10: EXPOSE 80
Exposing ports is a way of documenting which ports are used, but does not actually map or open any ports
Step 11: CMD nginx -g "daemon off;"
I use Nginx daemon off. Because for microservices, the directive tells Nginx to stay in the foreground. For the microservices, the best practice is for one container = one process. So one container server has only one service.
When normal production on a server, I use the default Nginx daemon on; So the Nginx server will start in the background. In this way, Nginx and other services are running and talking to each other. In this case, one server runs many services.
.dockerignore file
If you had used git, then you are so familiar with the .gitignore file. The .dockerignore file is very similar to the .gitignore file. It allows specifying a list of files or directories that Docker is to ignore during the build process. Most importantly, the .dockerignore can help you reduce the size of the image and dramatically speed up the build process.
# compiled output /dist /tmp /out-tsc # dependencies /node_modules # IDEs and editors /.idea # IDE - VSCode .vscode/* # misc /.angular/cache /.sass-cache /connect.lock /coverage /libpeerconnection.log npm-debug.log yarn-error.log testem.log /typings
Nginx configuration
This is a custom Nginx configuration snippet for our production-ready angular app.
Make sure you are using the right root path, which is a copy production-ready static resource in the container nginx path.
Create docker-angular-app/nginx/default.conf file in nginx separate folder.
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 256;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
location /health {
return 200 'I am live :)';
}
}
Docker build image
docker build -t image_name:tag . docker build -t angular-app:latest .
Check docker images
docker images
Run docker image
docker run --name container_name -d -p local_machine_port:container_port image_name:tag docker run --name docker-angular-container -d -p 4000:80 angular-app:latest
Note: nginx configuration file lister port(80) must be same of container port(80)
Check docker containers
The below command shows the running containers of docker
docker ps
Below command shows all inactive containers
docker ps -aq
