Deploying Your Angular App with Docker and Nginx: A Step-by-Step Tutorial

Example of dockerization of an Angular application.

In this first example the goal is to deploy an Angular application using a production web server (nginx).

There are other use cases, like build and deploy an Angular application in docker that is often presented on the web.

I personally prefer to separate the building process from the deployment. In our example we build the Angular application on our machine and we deploy the artifact in the docker image.

This solution can be adapted to a CI/CD pipeline.

Basic Angular application

We use a standard Angular project directory. It should be similar to this one (e.g. after ng new [PROJECT-NAME]):

[ANGULAR-PROJECT-ROOT]/ 
|-- dist/ 
|    |-- [PROJECT-NAME]/  
|            |-- index.html 
|            |-- ... 
| 
|-- angular.json 
|-- node_modules 
|    |-- ... 
|-- package.json 
|-- src 
|    |-- ... 
|-- ... 

The dist folder is created after we build our application with ng build.

We have to deploy the content of this directory in our docker container.

[ANGULAR-PROJECT-ROOT]/ 
... 
|-- Dockerfile 
|-- nginx.conf 

In the ROOT folder of the Angular application we need to create a Dockerfile and a nginx.conf file.

Preparing the Docker image

Here the content of our 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 official nginx Docker image.

COPY nginx.conf /etc/nginx/nginx.conf, we have a custom nginx configuration.

COPY ./dist/[PROJECT_NAME] /usr/share/nginx/html we copy the prod build of our Angular app.

Nginx configuration

We have a custom configuration for nginx nginx.conf, this is an example with some optimizations.

The content of the angular application is stored in /usr/share/nginx/html and we tell Docker that this is the root of our website.

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; 
} 

Solving the 404 error when the page is refreshed

Using nginx the problem of the 404 page not found error is automatically solved.

Usually we have this issue when we try to (re)load a page in our Angular application (e.g. [ROOT]/page2) but the server doesn't know it because the routing is handled by Angular.

NGINX does the same as our Java solution in the backend, you can find a tutorial here: https://marmo.dev/how-to-solve-the-redirection-404-error-in-angular-using-java

Build and deploy the application

To build the Docker image you need the following steps:

• Build the Angular application using ng build, this generates the prod files in the directory ./dist/[PROJECT_NAME].

• Build the Docker image: e.g. docker build -t my-super-project-name .

• Run the Docker container: e.g. 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.

Extra: Limit the access to external resources

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.