Nginx container as a reverse proxy, SSL and Angular in Ubuntu server

SSL file management

1. Find the SSL related details
   • a4812ea13a89e6c5.crt → Your domain’s SSL certificate.
   • your_key_file_name.key → Your private key. File should starts with “—–BEGIN PRIVATE KEY—–“
   • gd_bundle-g2-g1.crt → Intermediate CA bundle (chain certificate).
2. You can keep the above as three separate files or
3. 2 files by combining a4812ea13a89e6c5.crt and the gd_bundle-g2-g1.crt as a one file
   • cat a4812ea13a89e6c5.crt gd_bundle-g2-g1.crt > fullchain.crt(this is recommended)
4. Copy SSL files to your sever location (Ex: /home/projects/frontend/ssl) <– this works through the docker file.
5. If required, you can verify your private key against to the SSL certificate file a4812ea13a89e6c5.crt by using
   • Go to the SSL folder that you copied the files
     • openssl x509 -noout -modulus -in a4812ea13a89e6c5.crt | openssl md5
     • openssl rsa -noout -modulus -in your_key_file_name.key| openssl md5
     • If the hashes don’t match, then your private key does not belong to the certificate, and you must find the correct key.

nginx conf file setup

1. Once copy the SSL files, next you must config your nginx.conf file according to the SSL requirement.
2. Open the nginx.conf file and apply the followings

user nginx;
worker_processes auto;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    include /etc/nginx/conf.d/*.conf;

    fastcgi_buffers 8 256k;
    fastcgi_buffer_size 256k;

      # HTTP (port 80) server block for redirect to HTTPS
    server {
        listen 80;
        server_name your_domain_name.com;

        location / {
            return 301 https://$host$request_uri;
        }
    }

    server {
        listen 443 ssl;
        server_name your_domain_name.com;

        #ssl_certificate /etc/nginx/certs/ssl/a4812ea13a89e6c5.crt;
        ssl_certificate /etc/nginx/certs/ssl/fullchain.crt;
        ssl_certificate_key /etc/nginx/certs/ssl/psm.key;
        ssl_trusted_certificate /etc/nginx/certs/ssl/gd_bundle-g2-g1.crt;

        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';
        ssl_prefer_server_ciphers on;

        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 10m;

        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

        root /usr/share/nginx/html;
        index index.html;

        location / {
            add_header 'Access-Control-Allow-Origin' 'https://your_domain_name.com' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, 
DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
            add_header 'Access-Control-Max-Age' '3600' always;

            expires 1d;
            add_header Pragma "public";
            add_header Cache-Control "public, must-revalidate, proxy-revalidate";

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


        location /be/ {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://public_ip_address8081/;

            # CORS Headers
            add_header 'Access-Control-Allow-Origin' 'https://your_domain_name.com' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, 
DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
            add_header 'Access-Control-Max-Age' '3600' always;
        }

    }
}

Dockerfile

FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*
COPY ./ssl/ /etc/nginx/certs/ssl/
COPY dist/vuexy/ /usr/share/nginx/html
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]

point need to highlight in above code is, how to copy the ssl files inside to the nginx container

Angular path setup

Go to the environment folder and set the path as follows (This should be change with your requirement)

 apiUrl: ‘https://your_domain_name/be/api/v1’,

How to Deploy the nginx container

1. Compile the Angular project and place the Dist file
2. Next create the Docker image using
   • docker build -t image_name:v18 .
     • V18 is the label that you given to the image.
     • Copying SSL files (Works automatically by executing the Dockerfile build)
     • Copy all the files in the dist file to the nginx/html folder (Command in the Dockerfile)
3. Deploy the container using
   • docker run -d -p 80:80 -p 443:443 –name container_namev18 image_name:v18
   • v18 used to identify the image version and also to the container name

In my case I used a .bash file which can do all the steps that I explained in the above as follows

#!/bin/bash
source version.txt # Keeping a version number to deploy the container number.

eval "$(ssh-agent -s)" # enable the ssh agen. otherwise, you cannot access the key used for the git access
ssh-add ~/.ssh/uni_git # Add the public key to access via the ssh (Pub key already placed in the ~/.ssh/ folder)
cd /home/projects/frontend/Frontend_angular_project/ 
git checkout master  # Get the latest from the git
git pull # Pull from the git branch
# npm install --legacy-peer-deps # If you need to initialize your angular project, just uncomment this line. 
ng build
cp -r /home/projects/frontend/Frontend_angular_project/dist /home/projects/frontend/ 
cd /home/projects/frontend/
echo "Build proces completed"


((FRONTEND_VERSION++))  # Add a 1 to the existing version number
echo $FRONTEND_VERSION  # Display the new version number
echo "FRONTEND_VERSION="$FRONTEND_VERSION >> version.txt # Save the new version number back to the version file

version=$FRONTEND_VERSION  #"${1:-latest}" # set the version number to a variable
docker build -t efl-frontend-live:"$version" . # build the container by using the Docker file which located in the current folder
docker ps -a -q --filter "name=efl-frontend-live" | xargs docker rm --force # Remove the existing containers which started from the similar name
docker run -d -p 80:80 -p 443:443  --name efl-frontend-live"$version"  efl-frontend-live:"$version" # Deploy the container

Save the file as a name_given.bash file and execute the file by using the bash command

bash name_given.bash

(Please mind about the folder paths that your going to execute the .bash file.