Question

Setup NGINX for angular 8, .netcore and Postgre application

Posted June 1, 2021 47 views
NginxDockerUbuntu 18.04Angular

Hi guys,

I have 2 application, one is the frontend in Angular 8 and the other one is the backend in .netcore 3.1 linked to a Postgre database.

I have all this in 3 containers and to deploy and run them i have a docker-compose.yml file

This is my docker-compose/yml

version: '3.4'

services:
  bergman-db:
    image: postgres:10.5
    container_name: XXX-db
    restart: always
    command: postgres -c 'max_connections=200'
    ports:
      - 5432:5432
    environment:
        POSTGRES_USER: XXX
        POSTGRES_PASSWORD: XXX
        POSTGRES_DB: XXX-db
    volumes:
      - pgdata:/var/lib/postgresql/data
    networks:
      - main

  app.api:
    image: XXX/XXX:api-dev
    container_name: XXX-web-api
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - logs:/app/Logs
      - templates:/app/wwwroot/templates
      - feedbacks:/app/wwwroot/feedbacks
    links:
      - bergman-db
    depends_on:
      - "bergman-db"
    ports:
      - 5002:5002
    networks:
      - main

  app.web:
    build:      
      context: .
      dockerfile: Dockerfile
    volumes:
      - certs:/etc/nginx/certs
    image: XXX/XXX:web-dev
    container_name: XXX-web
    ports:
      - 80:80
      - 443:443
    networks:
      - main

volumes:
  pgdata:
  logs:
  templates:
  feedbacks:
  certs:

networks:
  main:
    driver: bridge

And here is a list of my containers up and running

CONTAINER ID        IMAGE                      COMMAND                  CREATED             STATUS              PORTS                                      NAMES
69ede1c8d4ba        XXX/XXX:api-dev   "dotnet app.api.dll"     2 minutes ago       Up 2 minutes        0.0.0.0:5002->5002/tcp                     XXX-web-api
1c173440609f        postgres:10.5              "docker-entrypoint.s…"   2 minutes ago       Up 2 minutes        0.0.0.0:5432->5432/tcp                     XXX-db
54a1cb91ca2d        XXX/XXX:web-dev   "nginx -g 'daemon of…"   2 minutes ago       Up 2 minutes        0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp   XXX-web

I have the Angular app setup with NGINX inside the container and the container XXX-web. This app is set up over HTTPS with a certificate generate by goDaddy.

My nginx.conf file is the following:

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}


server {
  listen              443 ssl http2;
  listen              [::]:443 ssl http2;
  server_name         example.app *.example.app;
  ssl_certificate     /etc/nginx/conf.d/example.app.cert;
  ssl_certificate_key /etc/nginx/conf.d/example.app.key;
  ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers         HIGH:!aNULL:!MD5;
  sendfile            on;
  default_type        application/octet-stream;

  root /usr/share/nginx/html;
  index index.html;
  try_files $uri $uri$args $uri$args/ $uri/ /index.html;

  error_log /var/log/nginx/angular4_error.log;
  access_log /var/log/nginx/angular4_access.log;

  location /api {
    proxy_pass http://localhost:5002;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection keep-alive;
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  gzip on;
  gzip_http_version 1.0;
  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;
}

The issue that I have is related to calling the API, using the proxy in NGINX.
The call to https://example.app/api/values needs to go to http://localhost:5002/api/values , but i have the error below

2021/06/01 14:53:34 [error] 6#6: *8 connect() failed (111: Connection refused) while connecting to upstream, client: 86.124.XXX.XX, server: example.app, request: "GET /api/values HTTP/2.0", upstream: "http://127.0.0.1:5002/api/values", host: "example.app"

NGINX is in the XXX-web container and it needs to make the call to a different container but in the same network “main”.

Anyone some ideas??

Tnx in advance!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
Submit an Answer
1 answer

Hi there @glitiavlad,

As the Nginx service is running inside the Angluar container, the localhost reference is for the container itself.

To fix this, rather than using localhost in the name of the API container.

Let me know how it goes!
Regards,
Bobby