Welcome to today’s post.
Today I will be showing how to create a docker container for an Angular application that is run as a web server.
In the previous post I showed how to create a Node docker image containing an Angular application and run the application as an Angular docker container.
I will be using an Nginx image as our web server. An Nginx server is a lightweight, high performance server that can be used for many purposes, including reverse proxy, web server, and load balancer. In this case we will be using it as a web server that serves static content from an Angular application.
The Docker hub has an image repository for Nginx at https://hub.docker.com/_/nginx.
To setup an Nginx web server as a Docker image we need the following:
- Nginx image from Docker hub.
- Nginx configuration file for our web application.
- Web application folders populated with static content.
- Expose ports from the static web site to our container.
- Mapping of an external host port to the container’s static web site’s port.
As we saw in the previous post, an Angular application uses port 4200 in a development environment, however in a web server container that hosts static content, it uses localhost (port 80). After we have built our Angular application into static content, all we need to do is move it into the web server distribution folder where it can be served.
We can map the web server port to different port, which is exposed to our host environment instead of the internal port.
With an Nginx server, we not only have a web server, but also a gateway for our web application. Any additional web services and data stores that are dependent on our static Angular web application can be hosted within their own API gateway server.
To include the Nginx image within our build we refer to the guide at https://hub.docker.com/_/nginx.
The following script:
FROM nginx:1.19.7-alpine COPY /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
achieves the following:
- Pulls the Nginx image from docker hub
- Copies the application distribution folder to the Nginx HTML folder
- Exposes port 80 within the container.
- Runs the Nginx server with switch -g daemon off, which keeps Nginx server as a foreground task so that the container keeps running.
When we include the Nginx build as part of a multi-build within the DockerFile, the script will look as follows:
FROM node:12.18-alpine AS build WORKDIR /usr/src/app ENV PATH /usr/src/app/node_modules/.bin:$PATH COPY ["package.json", "package-lock.json", "./"] RUN npm install RUN npm install -g @angular/cli RUN npm install --save-dev @angular-devkit/build-angular COPY . . FROM nginx:1.19.7-alpine COPY --from=build /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
The line starting with COPY –from=build copies the Angular application distribution folder from the build stage of the build and copies it over to the Nginx HTML folder.
To create out docker image we can run the following Docker command:
>docker build -f Dockerfile -t angular_docker_app:latest .
The successful output will look as shown:
Sending build context to Docker daemon 18.55MB Step 1/12 : FROM node:12.18-alpine AS build ---> e13d60032d4d Step 2/12 : WORKDIR /usr/src/app ---> Running in a1fc451eafc7 Removing intermediate container a1fc451eafc7 ---> 83fa1ae01946 Step 3/12 : ENV PATH /usr/src/app/node_modules/.bin:$PATH ---> Running in 3d748d13b233 Removing intermediate container 3d748d13b233 ---> 180ebba60e37 Step 4/12 : COPY ["package.json", "package-lock.json", "./"] ---> cf46b209b336 Step 5/12 : RUN npm install ---> Running in ad063906ee9b Removing intermediate container ad063906ee9b ---> 77a58eef6dc8 Step 6/12 : RUN npm install -g @angular/cli ---> Running in e26077de6bc2 Removing intermediate container e26077de6bc2 ---> f29d9b47b40c Step 7/12 : RUN npm install --save-dev @angular-devkit/build-angular ---> Running in 9365fbeda245 Removing intermediate container 9365fbeda245 ---> d01c87ab22ff Step 8/12 : COPY . . ---> 61790f993bfa Step 9/12 : FROM nginx:1.19.7-alpine ---> eb9291454164 Step 10/12 : COPY --from=build /usr/src/app/dist/angular-docker-app /usr/share/nginx/html ---> 2e45d73c1e1b Step 11/12 : EXPOSE 80 ---> Running in 31a66ba5eb7b Removing intermediate container 31a66ba5eb7b ---> 2a2a84bd5590 Step 12/12 : CMD ["nginx", "-g", "daemon off;"] ---> Running in 1b708de30fc1 Removing intermediate container 1b708de30fc1 ---> e6ed60430755 Successfully built e6ed60430755 Successfully tagged angular_docker_app:latest
To run the Angular app hosted in an Nginx web server we apply the following Docker command:
>docker run --name angular_docker_app_container -d -p 63001:80 -it angular_docker_app:latest
Note that instead of using internal port 4200 as we did for an Angular container app, we use port 80 from the Nginx container web server’s port. In the command we map port 80 over to host port 63001.
When the wen application is run in our browser at the URL:
http://localhost:63001/ We can view it the same as we would for an Angular docker container app:
We have successfully hosted an Angular application within an Nginx web server within a Docker container!
In future post I will be showing how to allow environment variables to be used within our Angular container application.
That’s all for today’s post.
I hope you found this post useful and informative.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.