Deploy your Angular app with Docker and Nginx

For our deployments we use Kubernetes or OpenShift. Everything has to be in a container and be part of a develop / build / deploy pipeline.

Your final directory structure should be something similar:

[ANGULAR-PROJECT-ROOT]/ 
|-- dist/ 
|    |-- [PROJECT-NAME]/  
|            |-- index.html 
|            |-- ... 
| 
|-- ... 
|-- Dockerfile 
|-- nginx.conf 

You have to create a Dockerfile and a nginx.conf file in the project directory of your Angular application.

The docker container

Dockerfile

FROM nginx 
COPY nginx.conf /etc/nginx/nginx.conf 
COPY ./dist/[PROJECT_NAME] /usr/share/nginx/html 

We use Nginx as web server for the deployment. In theory an Angular app is a simple Javascript application and it doesn't need a web server. An online file storage offered by a cloud provider could be enough.

Some advantages of a web server:

• own rules and filters
• compression
• resolution of the html urls (404 error after refresh)

Our docker consists in only 3 lines.

FROM nginx we use the nginx Docker image
COPY nginx.conf /etc/nginx/nginx.conf we copy our own nginx configuration.
COPY ./dist/[PROJECT_NAME] /usr/share/nginx/html we copy the prod build of our Angular app.

ng build generates the prod files in the directory ./dist/[PROJECT_NAME] you have to copy the path to this directory using the name of your project.

Nginx configuration

We have a custom configuration for nginx nginx.conf:

events { 
  worker_connections  1024;  ## Default: 1024 
} 
 
http { 
 
    ## use mime types 
    include /etc/nginx/mime.types; 
 
     server { 
        
        listen 80; 
 
        location / { 
            root /usr/share/nginx/html; 
            index  index.html; 
            ## without this our .css are not loaded 
            try_files $uri $uri/ /index.html?$query_string; 
        } 
    } 
 
    ## enable gzip compression 
    gzip on; 
    gzip_vary on; 
    gzip_min_length 256; 
    gzip_proxied any; 
 
    gzip_types 
      ## text/html is always compressed : https://nginx.org/en/docs/http/ngx_http_gzip_module.html 
      text/plain 
      text/css 
      text/javascript 
      application/javascript 
      application/x-javascript 
      application/xml 
      application/json 
      application/ld+json; 
} 

To build the Dockerfile you can use a command like:

docker build -t my-super-project-name .

when Docker complete the build of the container you can start it with:

docker run -p 80:80 my-super-project-name

Remember to specify the port or Nginx will show his default page: Welcome to nginx! If you see this page, the nginx web server is successfully installed and working. Further configuration is required.

This error could appear in case of error during the copy of your configuration file too.

With this solution you are running a web server that listen port 80, makes a compressions of the response and redirect to the main page if a URL is not found.

Limit the access to external ressources

If you want the limit the access to your website (e.g. your site is under attack) you can use the ngx_http_access_module.

The following instruction will block the access to the user with the IP address 192.168.1.1

location / { # http, server, location, limit_except 
    deny  192.168.1.1; 

To allow the access only to some addresses you can specify the allowed addresses and deny all;, the rules are evaluated in sequence.

location / { 
    allow 192.168.1.0/24; 
    deny  all; 

As alternative, you can limit the access using the combination 'username/password' with

location / { 
    auth_basic           "no access"; 
    auth_basic_user_file conf/htpasswd; 

Note that if you are using groups of addresses you have to use the CIDR format.