0

I am trying to setup poc for docker with one simple project. It includes angular, express, nodejs and mongodb atlas.

angular runs on 4200 and nodejs 3000

https://github.com/changan1111/UserManagement

it is working fine in local the same setup..

When I go for docker?

I am seeing that node js is started and running.

enter image description here

When I see the list of files, I am seeing all good.

enter image description here

enter image description here

When I go for http://localhsot/user it returns values

enter image description here

But when I read the value from browser it is showing

enter image description here

enter image description here

i have tried few solutions which is given but all returns same response that failed. what is wrong with this.. can any one look in to this and let me know that what is the problem on the setup.

app.use(cors());

/*
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "req.headers.origin"); // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,GET,POST");

  next();
});*/


/*
app.use(cors({
  "origin": ['http://localhost:3000'],
  "methods": "GET,PUT,POST",
  "preflightContinue": false,
   "credentials": true
}));*/

tried with ip address http://192.168.0.103/ as well but no change Dockerfile:

enter image description here

Improve this question
6
  • Firstly you have to put EXPOSE before CMD in your Dockerfile Commented Oct 19, 2022 at 12:52
  • that is copy paste error while taking.. EXPOSE was given before CMD Commented Oct 19, 2022 at 13:20
  • Please replace images of code with real code. Commented Oct 19, 2022 at 15:32
  • In your browser you're calling localhost:3000/user and not localhost/user. And your problem is, that your app somehow is reachable on 80 instead of 3000? Commented Oct 19, 2022 at 15:43
  • Is your mapped port (the one that you can try to hit from outside) matching the exposed one? Usually you would want to specify the port when running a container with some ports exposed in it. Commented Oct 19, 2022 at 19:53

2 Answers 2

Reset to default
2
+50

It is unclear in your question but, according to the images you provided, if seems that your Angular app is unable to reach your Express backend in 127.0.0.1.

You configured http://localhost:3000 as your API endpoint, but please, be aware that from the point of view of Docker localhost refers to the container itself, and could be not the same as your actual host.

To solve the problem, you could indicate to Express that it should listen in every network interface using 0.0.0.0:

app.listen(3000, '0.0.0.0', () => {
  console.log("listening on PORT verify: 3000");
});

The solution is exemplified in the nodejs guide documentation as well.

In addition, please, try adjusting the Url variable in your environment files to the address http://localhost, without indicating the port, i.e., using port 80: according to the code you uploaded to your repository in Github your app seems to listen on port 3000, but in your screenshots you are certainly using port 80. The reasoning behind this is that if express is serving both your Angular SPA and your API, and you are able to contact both things from your host, using http://localhost/read and http://localhost/user, respectively, then probably adjusting you Url variable to http://localhost as advised could do the trick.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I changed app.listen(3000, '0.0.0.0', () => { console.log("listening on PORT verify: 3000"); }); But still i did not see any difference in behavior
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 731365201d70 106d "node server" 8 minutes ago Up 8 minutes 0.0.0.0:80->3000/tcp cranky_pasteur I have tried localhost and used ip from the hosts in browser (# Added by Docker Desktop 192.168.0.106 host.docker.internal 192.168.0.106 gateway.docker.internal)
Can u pls let me know any other details needed?
Hi @ChanGan. I am sorry to hear that it didn't work properly. Are you still facing the same issue? Exactly the same problem? As you are serving with Express both the Angular output and the API, you could try using relative routes in your apiservice.service. I mean, the env variable Url could be defined as an empty string in your environment. Perhaps this alternative approach could be of help. Ideally, your SPA should be serve by some kind of web server, like nginx. This server will probably proxy the requests issued against your API. I am uncertain about the use of Express for this purpose
initially i tried url: "/" to take it base url from the origin.. but this is serving empty in the request.. http:///user .. the origin is not getting added in the request. but it should go as http://{requestedip}/user.. since that is empty going 3 slashes
|
0

Did you try exposing your ports like this when running your container?

docker run -p 4000:4000 container_name (assuming Linux host here)

or just

docker run --network="host" container_name perhaps?

Then access via localhost:4000 from any service inside or outside Docker.

The container's internal localhost will match up with your actual host machine's localhost this way. There are some downsides to this, but I'm assuming you're not running this in a production setting, so it shouldn't really matter much.

It isn't clear whether you're trying to access your Dockerized app from outside Docker. Are both your backend and frontend sharing the same container? Are they both containerized?

EXPOSE only allows Docker's internal apps to find that port IIRC.

You need to specify ports to expose to your host.

Improve this answer

2 Comments

He has exposed the ports via docker-compose.
@akop My bad. Must have missed that, didn't dig into the repo much yet. The previous answer mentioned confusion between host and container locahost ports being a potential issue, so I figured matching them up exactly might reduce chances of mixups there (if the OP didn't do it already).

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.