nginx configuration for spring boot and angular project-CodePudding

I am trying to create a app using mongodb and spring-boot as backend and angular as frontend.

Using command to run my app:

docker run -d -e APP_OPTIONS="--spring.data.mongodb.host=172.17.0.2" -p 8443:8443 my-webapp

I am able to launch my app at http://localhost/api/swagger-ui.html successfully(I have configured swagger for backend). Using server.port=8443 and server.servlet.context-path=/api. I am also able to add/update data to mangodb from swagger APIs.

My frontend is in angular and using a proxy.config.json file to connect to backend:

{
"/api": {
    "target": "http://localhost:8443/",
    "secure": false,
    "loglevel": "debug",
    "changeOrigin": true
   }
}

Also using ng serve --proxy-config proxy.config.json command, I am able to launch angular UI and able to fetch data from database/backend successfully.

The problem arising when I am making UI component as docker container using DockerFile

FROM nginx:alpine
COPY prod.nginx.proxy.conf /etc/nginx/conf.d/default.conf
COPY dist/my-webui /usr/share/nginx/html
EXPOSE 80

prod.nginx.proxy.conf

server {
  listen 80;
  server_name frontend;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
  location /api/ {
    proxy_pass http://localhost:8443/;
  }
}

Command I using to build and run as docker container:

docker build -f Dockerfile -t my-webui .
docker run -d -p 80:80 my-webui

http://localhost:80/ is launching the angular index pages but not able to fetch the backend data , I am guessing some issue with the nginx configuration. Please help to find equivalent nginx config for my proxy.config.json

Error is 502 Bad Gateway and also It is making http POST call to http://localhost/api/user/authenticate rather http://localhost:8443/api/user/authenticate, also for FYI in header I can see Remote Address: [::1]:80 instead of Remote Address: 127.0.0.1

CodePudding user response：

This is due to how docker networking works. To communicate between them using localhost (which you do in the proxy_pass), you need to change default networking. I'm no expert but I believe you need to set networking to host on both container for this to work.

When connecting multiple containers, I usually go with docker-compose there you can use the name of the service as hostname in the other containers.

CodePudding user response：

This prod.nginx.proxy.conf resolved my issue. But yes I should have used docker compose for networking. This may be a solution for manual prod deployment.

server {
  listen 80;
  listen [::]:80;
  server_name frontend;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
  location /api {
    proxy_pass http://172.17.0.3:8443;
  }
}