Dockerized Angular/nginx app not talking to rest api

Question

I have an angluar app for my frontend and I have a rest api listening on port 3001 (dockerized rails backend).

I was running my angular app with following command:

ng serve --proxy-config proxy.conf.json

And with following proxy.conf.json file:

{
   "/server": {
     "target": "http://localhost:3001",
     "secure": false,
     "pathRewrite": {"^/server" : ""}
   },
   "/api": {
      "target": "http://localhost:3001",
      "secure": false
   },
   "/base": {
      "target": "http://localhost:3001",
      "secure": false
   },
   "/users": {
      "target": "http://localhost:3001",
      "secure": false
   }
}

This works perfectly fine - my angular app runs on port 4200 and talks properly to my dockerized backend.

I now wanted to dockerize my front end too using nginx.

This is my dockerfile:

FROM node:8.9 as node

WORKDIR /app

COPY package.json /app/

RUN npm install
COPY ./ /app/

ARG env=prod

RUN npm run build -- --prod --environment $env

FROM nginx:1.13

COPY --from=node /app/dist/ /usr/share/nginx/html

COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

And my nginx-custom.conf looks like this:

server {
  listen 80;
  server_name  localhost;
  root   /usr/share/nginx/html;
  index  index.html index.htm;

  location /server {
      proxy_pass http://localhost:3001;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_buffering off;
      proxy_set_header Accept-Encoding "";
  }
  location /api {
      proxy_pass http://localhost:3001;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_buffering off;
      proxy_set_header Accept-Encoding "";
  }
  location /base {
      proxy_pass http://localhost:3001;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_buffering off;
      proxy_set_header Accept-Encoding "";
  }
  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

I build by app with:

docker build -t client:prod .

And I start my app with:

docker run -p 80:80 client:prod

My Angular app is coming up on port 80 and I see my first screen as expected. But it doesnt talk to my rest api. In my browser I see my angular app sending html requests to 4200. I am not sure this is correct and the root cause? Since I am using nginx on port 80 - shouldnt the request from my angular app go to port 80 now?

I changed my nginx configuration to listen on port 4200 and started my dockerized app with port 4200:4200 but this doesnt work neither.

Any idea what could be wrong here?

Thanks, Michael

have you found answer for this? – Oleg Baranenko Oct 18 '19 at 15:26 — Oleg Baranenko, Oct 18 '19 at 15:26

score 1 · Answer 1 · answered Sep 19 '18 at 11:20

1

Make one docker-compose file. That will automatically create network for you. Containers on same network can access each other.

Also instead of localhost:3001 In your Nginx config. Use api:3001. “api” is a name defined in to docker-compose file. Docker will resolve that to container IP address.

Let me know if that solves your problem or need more information.

answered Sep 19 '18 at 11:20

kashpatel

656
6
17

Could you take a look at [this question](https://stackoverflow.com/q/54907790/1534017)?! I would highly appreciate some help about the `docker-compose` file. Thanks a lot! – Cleb Feb 27 '19 at 14:49
@celb Looks like you have gotten some good answers to the question you have asked on that page. Let me know if that does not work out, I can help. – kashpatel Feb 28 '19 at 02:02

score 0 · Answer 2 · answered Jul 05 '18 at 12:47

0

I think the problem is the Container are not linked ..so they don't see each other ..

try to run with --link param (it's deprecated but still work) or try to define a network for yours containers ..

something like:

docker run -p 80:80 client:prod --link nomeofyourrailsbackendcontainer

or:

docker network create my-net

then:

 docker network connect my-net client:prod

and

docker network connect my-net backendconatiner

Hope it helps you!!

answered Jul 05 '18 at 12:47

federico scamuzzi

3,518
1
15
23

While I am testing I didnt use docker for backend - I started rails directly from the console and it didnt work neither. So I thought it shouldnt be a missing container link? Shouldnt my dockerized front end be able to access any backend on its port - no matter the backend is dockerized or not? – Michael H. Jul 05 '18 at 12:54
mm i'm pretty sure you can do the opposite access a container expose app from your host .. so 4 example if your front end site run on localhost:4200 on your machine it can access a dockeraized app exposed to a specific port .. not sure for the opposite – federico scamuzzi Jul 05 '18 at 12:59
May it be local host within the angular container is not the same as localhost on my machine? If yes - any idea how to fix this? – Michael H. Jul 05 '18 at 13:11
mmm i think it's not the same ... the container are isolted .. but maybe i'm wrong . .i've just start use docker now – federico scamuzzi Jul 05 '18 at 13:18
Hi, accessing localhost within the container is definitely not working. I changed all ports now to 4200 and I am using my machines IP adress for the proxy setting. But I still get a time out from the gateway and following messages: – Michael H. Jul 06 '18 at 11:18

Dockerized Angular/nginx app not talking to rest api

2 Answers2

Linked