Docker tutorial — Build Docker image for your Angular 6 application

5 min readSep 19, 2018

Docker as we know,is an open platform for developers and sysadmins to build, ship, and run distributed applications, whether on laptops, data center VMs, or the cloud.In this post, we are going to take look at how to build Docker image for Angular application (typically the steps are same for any type of application).

Step #1. Setup Docker

From the docker site,install the latest version of the docker for your platform.Docker is available in two editions: Community Edition (CE) and Enterprise Edition (EE). Docker Community Edition (CE) is ideal for developers and small teams looking to get started with Docker and experimenting with container-based apps. Docker Enterprise Edition (EE) is designed for enterprise development and IT teams who build, ship, and run business critical applications in production at scale.
Once the installation of docker is over,check the installation by running following command docker run hello-world:

Run docker — version to check the version of the docker you’re running.

OK, now we have got the docker setup,next step is to define the docker container.

Step #2. Create Dockerfile for our container

Dockerfile will define what goes on in the environment inside the container. Access to resources like networking interfaces and disk drives is virtualized inside this environment, which is isolated from the rest of the system, so you have to map ports to the outside world, and be specific about what files you want to “copy in” to that environment. So that you can expect that the build of your app defined in this Dockerfile will behave exactly the same wherever it runs.
Common Dockerfile instructions start with RUN, ENV, FROM, MAINTAINER, ADD, and CMD, among others.

FROM — Specifies the base image that the Dockerfile will use to build a new image. As an example, we are going to use phusion/baseimage as our base image (this is minimal Ubuntu-based image)
MAINTAINER — Specifies the Dockerfile Author Name and his/her email.
RUN — Runs any UNIX command to build the image.
ENV — Sets the environment variables. For this post, JAVA_HOME is the variable that is set.
CMD — Provides the facility to run commands at the start of container. This can be overridden upon executing the docker run command.
ADD — This instruction copies the new files, directories into the Docker container file system at specified destination.
EXPOSE — This instruction exposes specified port to the host machine.

To begin with create a new folder and then create a file in it named “Dockerfile” with the following content.

# Dockerfile FROM httpd:2.4 MAINTAINER Author Name author@email.com

Once we have the baseimage set,next step is to copy the Angular dist folder contents (assumption here is to already you have run the ng build --prod)

#copy angular dist folder to container COPY dist/ /usr/local/apache2/htdocs/

Next is to copy custom .htaccess and httpd.conf files to the container (as below)

#copy htaccess and httpd.conf to container COPY .htaccess /usr/local/apache2/htdocs/ COPY httpd.conf /usr/local/apache2/conf/httpd.conf

Add below lines to .htaccess to add rewrite rules

RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ — [L] # If the requested resource doesn’t exist, use index.html RewriteRule ^ /index.html

Add below lines to relevant sections of httpd.conf

LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so LoadModule mpm_event_module modules/mod_mpm_event.so DocumentRoot “/usr/local/apache2/htdocs” <Directory “/usr/local/apache2/htdocs”> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory>

Then coming back to Dockerfile,change the permissions

#change permissions RUN chmod -R 755 /usr/local/apache2/htdocs/

Finally add expose port command

#expose port EXPOSE 4200

Docker file would now be looking like the one below

FROM httpd:2.4 #copy angular dist folder to container COPY dist/ /usr/local/apache2/htdocs/ #copy htaccess and httpd.conf to container COPY .htaccess /usr/local/apache2/htdocs/ COPY httpd.conf /usr/local/apache2/conf/httpd.conf #change permissions RUN chmod -R 755 /usr/local/apache2/htdocs/ #expose port EXPOSE 4200

Step #3. Build Docker Image

Now that we have completed Dockerfile, next step is to build Docker image by docker build command

docker build -f UIDockerfile -t angularapp .

Here -t specifies the name of the image and -f specifies the name of the Dockerfile. Image tag I have left it empty.

Congrats! You’ve successfully built container for your Angular application.

Step #4. Test Docker Image

To run the Docker image,execute the following commands

docker run -p 4200:4200 angularapp

Here -p specifies the port container:host mapping.

Launch your browser and hit http://localhost:4200 to access the application running on your container.

Image — Angular application served from container

Step #5. Ngnix Dockerfile

If you want to use Ngnix instead of Apache then here is sample Dockerfile

FROM nginx
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/prod /usr/share/nginx/html

As you can see we are copying all the files from our dist folder and we are also replacing the Nginx configuration with our own custom configuration (like the one below)

Ngnix sample configuration

server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}

Congrats! You’ve successfully built and run container for your Angular application.There is much more to the Docker platform than what was covered here, but now you would have got a good idea of the basics of building containers for an application.

Like this post? Don’t forget to share it!

Additional Resources:

Official documentation as a reference to understand any command.
Docker build reference
Docker run reference
Best Practices article on writing Docker files.
Test your knowledge on Dockerfile.

Originally published at @upnxtblog.