NGINX is a free, open-source, high-performance HTTP server and reverses proxy, as well as an IMAP/POP3 proxy server. NGINX is known for its high performance, stability, rich feature set, simple configuration, and low resource consumption.

This article explains the process to deploy Angular and Spring boot apps on Nginx server. In a nutshell, the process can be divided into the following steps

1. Setup Nginx server on Ubuntu machine
2. Build the angular app
3. Build a Java app
4. Configure Nginx and add server locations

Technologies

1. Spring Boot 2.x
2. Angular 8.x
3. Nginx 1.17.x
4. MySql 8.x

Tested and deployed on Ubuntu 18.04 OS on AWS and instructions for other operating systems may differ.

Setup Nginx server

1. Following instructions were similar to Digital Ocean blog post. Refer to their blog post for detailed instructions
2. Execute the following commands on the Ubuntu machine to install Nginx server

$ sudo apt update$ sudo apt install nginx

3. Before testing Nginx, the firewall software needs to be adjusted to allow access to the service. Nginx registers itself as a service with ufw upon installation, making it straightforward to allow Nginx access.

List the application configurations that ufw knows how to work with by typing:

$ sudo ufw app list

You should get a listing of the application profiles:

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

As you can see, there are three profiles available for Nginx:

• Nginx Full: This profile opens both port 80 (normal, unencrypted web traffic) and port 443 (TLS/SSL encrypted traffic)
• Nginx HTTP: This profile opens only port 80 (normal, unencrypted web traffic)
• Nginx HTTPS: This profile opens only port 443 (TLS/SSL encrypted traffic)

It is recommended that you enable the most restrictive profile that will still allow the traffic you’ve configured. Since we haven’t configured SSL for our server yet in this guide, we will only need to allow traffic on port 80.

You can enable this by typing:

$ sudo ufw allow Nginx HTTP

You can verify the change by typing

$ sudo ufw status

4. Check the status of the webserver using the following command

$ systemctl status nginx

5. Go to http://<your_server_ip> to see Nginx home page

Setup Angular App

1. Clone the Angular app from Github
2. Build the Angular app project with ng command and it will create production-ready app in the dist folder

$ ng build --prod

Copy the location of the folder for the later use

Ex: /home/ubuntu/SpringSecurity-SpringData-UI/dist/SpringTestingUI

Setup the Spring Boot App

1. Clone the SpringBoot app from GitHub and follow the instructions from README.md file step by step to setup
2. You need MySQL or MariaDB for the database.
3. Package the project with Maven and it should create the jar file in the project target folder

$ mvn clean package -DskipTests

Configure Nginx to serve Angular and Spring apps

1. Go to /etc/nginx/nginx.conf file and replace the content with the following content

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events 
{
     worker_connections 768;
     # multi_accept on;
}

http 
{
    upstream springboot
    {
        server localhost:8080  max_conns=10;
    }

    server
    {
        listen 80;
        listen [::]:80;
        server_name     <server ip>;

        location /
        {
root /home/ubuntu/SpringSecurity-SpringData-UI/dist/SpringTestingUI;
        try_files $uri $uri/ /index.html;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
        }
        
       location /api
        {
          proxy_pass    http://springboot;
          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-Host   $host;
          proxy_set_header    X-Forwarded-Server $host;
          proxy_set_header    X-Forwarded-Port   $server_port;
          proxy_set_header    X-Forwarded-Proto  $scheme;        
        }
    }

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
}

2. First few lines and events block describes default settings of Nginx

3. The HTTP block has sub-blocks like upstream and server. The server block shows nginx listens on port 80 and server name is mandatory

server
{
        listen 80;
        listen [::]:80;
        server_name     <servername or serverip>;
}

4. Configure root value to dist/SpringTestingUI (/home/ubuntu/SpringSecurity-SpringData-UI/dist/SpringTestingUI) directory of your Angular application. location / block forwards all requests to Angular application

location /
{
 root /home/ubuntu/SpringSecurity-SpringDataUI/dist/SpringTestingUI;
 try_files $uri $uri/ /index.html;
 proxy_http_version 1.1;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 proxy_set_header X-Forwarded-Port $server_port;
}

5. Now, map all REST API requests to Spring Boot application with the following configuration. Every request that starts with /api goes to spring boot app defined in upstream

location /api
 {
     proxy_pass    http://springboot;
     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-Host   $host;
     proxy_set_header    X-Forwarded-Server $host;
     proxy_set_header    X-Forwarded-Port   $server_port;
     proxy_set_header    X-Forwarded-Proto  $scheme; 
}

6. Angular app serves frontend and Spring boot app serves backend and Nginx routes requests accordingly.

7. Now, goto http://<your_server_ip> to see Angular home page

---

Please let me know if you have any questions and happy coding 🙂