angulardockernginxnpmfrontend

Docker Angular+Nginx error code 403 or 500


I have a .net application on backend with mssql and frontend with angular. I have written docker files and nginx.conf, everything works except angular 17 exactly in docker, the main problem is that on the path localhost:9000 I should get back frontend but instead I get errors 500 or 403

but if I try to make a direct request post localhost:9000/api/user I am redirected to backend(proxy is set on localhost:8000) and I get a list of users in json format. When I do npm run build I get the application structure dist/feedyre/ with 2 folders browser and server. I tried to change a lot of things but no luck, maybe someone has encountered this problem? here is my docker file:

FROM node:20.10.0 as build-env

WORKDIR /app

COPY . .
RUN npm install
RUN npm run build
FROM nginx:alpine
COPY --from=build-env /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

and here is my nginx.conf:

user  nginx;
worker_processes  auto;

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


events {
    worker_connections  1024;
}

http {
    client_max_body_size 10M;
    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;
    
    keepalive_timeout  65;
    
    server {
        listen 8080;
        server_name  feedyre;
        
        root   /usr/share/nginx/html/feedyre;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        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;


        location /api/ {
            proxy_pass http://http://localhost:8000/api/;
        }
        location / {
            try_files $uri $uri/ /index.html; 
        }
    }
}

I also tried to change the paths here in the docker file but either it is wrong or not the problem still the same errors COPY --from=build-env /app/dist /usr/share/nginx/html


Solution

  • you need to change next config:

    root   /usr/share/nginx/html
    
    location /api/ {
                proxy_pass http://8000:8080/api/;
             }
    

    and dockerfile:

    COPY --from=build-env /app/dist/feedyre/browser /usr/share/nginx/html