Domain pointing problem for my Web App (Nginx + Docker + Spring Boot + Angular)

I am new to deploying web apps, and I am trying to deploy my Spring Boot backend and Angular frontend using Docker and Nginx on a VPS. The app works locally on the VPS, but I am unable to access it via my custom domain.

Attention I replaced:

server-ip -> VPS ip address

my-domain.com -> purchased domain


From the Domain Provider perspective: yesterday I created two records on the DNS records: (p.s followed Domain Provider instructions)

A Record 1: Name: @ | Points to: VPS IP address | TTL: default

A Record 2: Name: www | Points to: VPS IP address | TTL: default

So, with dnschecker.org I can see that my purchased domain is pointing on my VPS Ipv4 address.

From the Docker perspective:

1) docker-compose.yaml

version: '2'

services:
app-server:
build:
context: monolith_inventory
dockerfile: Dockerfile
ports:
- "8080:8080"
restart: always
depends_on:
- db # This service depends on PostgreSQL. Start that first.
environment:
- SPRING_DATASOURCE_URL=jdbcostgresql://db:5432/inventory
- SPRING_DATASOURCE_USERNAME=test
- SPRING_DATASOURCE_PASSWORD=test
- SPRING_JPA_HIBERNATE_DDL_AUTO=none
- SPRING_PROFILES_ACTIVE=local
networks:
- backend
- frontend

# Frontend Service
app-client:
build:
context: inventory_fe
dockerfile: Dockerfile
ports:
- "8081:80"
restart: always
depends_on:
- app-server
networks:
- frontend

# Database Service (PostgreSQL)
db:
image: 'postgres:13.1-alpine'
container_name: db
restart: always
environment:
- POSTGRES_DB=inventory
- POSTGRES_USER=test
- POSTGRES_PASSWORD=test
ports:
- "5432:5432"
networks:
- backend

# Networks to be created for container communication
networks:
backend:
frontend:


2) Angular Dockerfile:

FROM node:alpine AS builder
WORKDIR /app
COPY . .
RUN npm install && npm run build
FROM nginx:alpine
COPY --from=builder /app/dist/crud_project /usr/share/nginx/html/
COPY /nginx.conf /etc/nginx/conf.d/default.conf


3) nginx.conf

upstream docker-web {
server app-server:8080;
}

server {
include /etc/nginx/extra-conf.d/*.conf;

listen 80;
server_name my-domain.com; #replaced for hid purposes

location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}

location /api/ {
proxy_pass http://docker-web;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
}
}


I opened firewall ports:

sudo ufw status
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
8080 ALLOW Anywhere
80/tcp ALLOW Anywhere
443 ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
8080 (v6) ALLOW Anywhere (v6)
80/tcp (v6) ALLOW Anywhere (v6)
443 (v6) ALLOW Anywhere (v6)


I configured CORS on the backend:

@Bean
public CorsFilter corsFilter() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.setAllowedOrigins(Arrays.asList(
"http://localhost:4200",
"https://my-domain.com",
"http://my-domain.com"));
config.setAllowedHeaders(Arrays.asList(
HttpHeaders.ORIGIN,
HttpHeaders.CONTENT_TYPE,
HttpHeaders.ACCEPT,
HttpHeaders.AUTHORIZATION
));
config.setAllowedMethods(Arrays.asList(
"GET",
"POST",
"DELETE",
"PUT",
"PATCH"
));
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);

}


I did the above configurations and I'm able to access my web app on: http://server-ip:8081, but I'm not able to access it via my-domain.com.

Also, my Angular frontend is properly communicating with the backend, and I'm able to access specific APIs via Postman. I thought that I would be able to access my web app via domain after modifying only the server_name in the nginx.conf, but it seems not.

Sorry for the lengthy problem description, but I wanted to provide a broader perspective on the issue.

Need a bit help on how to move forward.

Thank you in advance!

Continue reading...