Alibaba Cloud

Docker tutorial – Build Docker image for your Angular 6 application

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

  1. 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.
  2. Once the installation of docker is over,check the installation by running following command docker run hello-world:

    Validate Docker Installation
    Image – Validate Docker Installation
  3. Run docker –version to check the version of the docker you’re running.

    Check Docker version
    Image – Check Docker version

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

Step #2. Create Dockerfile for our container

  1. 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.
  2. 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.
  3. 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 [email protected]
  4. 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/
  5.  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
  6. 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
  7. 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>
  8. Then coming back to Dockerfile,change the permissions
    #change permissions
    RUN chmod -R 755 /usr/local/apache2/htdocs/
  9. Finally add expose port command
    #expose port
    EXPOSE 4200
  10. 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.

VMWare AU/Asia Pacific
Docker build complete
Image – Docker build complete

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.

Angular application served from 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:

Cisco Learning Network Cyber Monday Sale 8am PT 11/26 - 8am PT 11/27
Summary
Docker tutorial - Build Docker image for your Angular 6 application
Article Name
Docker tutorial - Build Docker image for your Angular 6 application
Description
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).
Author
Publisher Name
Upnxtblog
Publisher Logo