Deploy your Angular app with Docker and Nginx
Deploy your app in a container
For our deployments we use Kubernetes or OpenShift. Everything has to be in a container and be part of a develop / build / deploy pipeline.
In a previous post I already explained how to deploy an Angular app in a Java artifact using a maven structure.
When we want to completely separate the frontend from the backend we have to create multiple containers.
The docker container
Dockerfile
FROM nginx
COPY nginx.conf /etc/nginx/nginx.conf
COPY ./src/dist /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 ./src/dist /usr/share/nginx/html
we copy the prod build of our Angular app.
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;
}
This configuration creates a web server that listen port 80, makes a compressions of the response and redirect to the main page if an URL is not found.