What is nginx

Nginx, pronounced like “engine-ex”, is an open-source web server that, since its initial success as a web server, is now also used as a reverse proxy, HTTP cache, and load balancer.

How Does Nginx Work

Nginx is built to offer low memory usage and high concurrency. Rather than creating new processes for each web request, Nginx uses an asynchronous, event-driven approach where requests are handled in a single thread.

With Nginx, one master process can control multiple worker processes. The master maintains the worker processes, while the workers do the actual processing. Because Nginx is asynchronous, the worker can execute each request concurrently without blocking other requests.

How To Configure Nginx to Angular Application?

• Install Docker Desktop your Windows machine

• Create an angular application using following command

ng new AngularDockerNginx

Add following four files in your angular "src" folder

nginx.conf is the main configuration file for the Nginx web server. It is used to configure various aspects of the server, such as how it handles incoming requests, how it serves content, and how it interacts with other systems.

Dockerfile: will consist of commands which need to execute when we are building a docker image

docker-compose.yml: is a file that is used to define and configure the services that make up an application in a Docker environment. It is used in conjunction with the docker-compose command-line tool, which allows you to manage the services defined in the file.

.dockerignore: contains which file/folder we need to ignore while the docker build takes place

Please find a sample application on GitHub

nginx.conf

worker_processes 1;


events {
    worker_connections 1024;
}


http {
    server {
        listen 80;
        server_name localhost;


        root /usr/share/nginx/html;
        index index.html index.htm;
        include /etc/nginx/mime.types;


        gzip on;
        gzip_http_version 1.1;
        gzip_disable      "MSIE [1-6]\.";
        gzip_min_length   256;
        gzip_vary         on;
        gzip_proxied      expired no-cache no-store private auth;
        gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_comp_level   9;


        # location ~* \.(eot|ttf|woff|woff2|js|json)$ {
        #     add_header Access-Control-Allow-Origin *;
        # }


        # location ~ \.js {
        #     add_header Content-Type application/x-javascript;
        # }


        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

worker_processes 1; - This directive specifies the number of worker processes that Nginx should spawn.

worker_connections 1024; - This directive specifies the maximum number of connections that each worker process can handle.

http { - This block starts the configuration for the HTTP protocol.

server { - This block starts the configuration for a specific server block.

listen 80; - This directive specifies the port on which Nginx should listen for incoming requests.

**server_name localhost; **- This directive specifies the domain name that should be associated with the server block.

root /usr/share/nginx/html; - This directive specifies the directory where the Angular application's files are located.

index index.html index.htm; - This directive specifies the default file to be served when a directory is requested.

include /etc/nginx/mime.types; - This directive includes the file of mime types.

gzip on; - This directive enables gzip compression.

gzip_http_version 1.1; - This directive specifies the HTTP version that gzip should use.

gzip_disable "MSIE [1-6]."; - This directive disables gzip for certain versions of Internet Explorer.

gzip_min_length 256; - This directive specifies the minimum response size required for gzip compression.

gzip_vary on; - This directive enables the "Vary" response header.

**gzip_proxied **expired no-cache no-store private auth; - This directive specifies the types of proxy that gzip should work with.

gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; - This directive specifies the types of files that gzip should compress.

gzip_comp_level 9; - This directive specifies the compression level that gzip should use.

location / { - This block starts the configuration for the location of the Angular application.

try_files $uri $uri/ /index.html; - This directive tells Nginx to try to serve the requested file first, then the requested directory, and finally the index.html file.

} - This closing brace ends the configuration for the location of the Angular application and the server block.

Dockerfile

FROM node:19.5.0-alpine3.17 AS builder


WORKDIR /usr/src/app


COPY package*.json ./


RUN npm install


COPY . .


RUN npm run build --prod


FROM nginx:1.19-alpine


RUN rm -rf /usr/share/nginx/html/*


COPY --from=builder /usr/src/app/dist/angular-docker-nginx /usr/share/nginx/html


COPY nginx.conf /etc/nginx/nginx.conf


EXPOSE 80
EXPOSE 443

The script starts by using the "node:19.5.0-alpine3.17" image and sets it as the "builder" image. It then sets the working directory to "/usr/src/app" and copies the package.json file to that directory. Next, it runs the command "npm install" to install the application's dependencies. Then it copies the rest of the application's files to the working directory. Finally, it runs the command "npm run build --prod" to build the application.

The script then uses the "nginx:1.19-alpine" image as the base image and copies the built application files from the "builder" image to the appropriate directory in the nginx image. It also copies an nginx.conf file to the etc/nginx/ directory. The script then exposes ports 80 and 443 for the image to listen on.

docker-compose.yml

version: '3'
services:
  web:
    build: 
      context: .
      dockerfile: Dockerfile
    ports:
      - 4200:80


volumes:
  angularngixvolume:

This is a script written in the YAML format, specifically in a Compose file format. It is used to configure and run a set of services that make up a multi-container Docker application. This script specifies a single service called "web" that uses an image built from the Dockerfile in the current directory. The service maps port 4200 on the host machine to port 80 on the container.

It also specifies a named volume "angularngixvolume" which can be used to persist data, allowing data stored in the volume to survive when the services are recreated or the containers are recreated.

.dockerignore

.git
.gitignore
/node_modules

Run & Deploy

docker-compose up

Troubleshooting

Angular describes this issue https://angular.io/guide/deployment#configuring-correct-mime-type-for-javascript-assets

While writing the sample application had trouble running through the nginx server, I spent around an hour to figure it out, and finally, the fix is highlighted red in a rectangle.

Thanks for reading!