ERR_CONNECTION_REFUSED on angular app hosted on nginx inside a docker container?

Question

I am using Angular 9 and have an application that runs as expected.

e.g.

ng serve

I can then access it on:

http://localhost:4200/approval-edit/1573515

Now I would like to Dockerise it. I am following this tutorial: https://www.youtube.com/watch?v=J9uKG22lBwA

I have done the following:

ng build --prod

The dist directory is created.

Dockerfile

FROM nginx:1.17.1-alpine
COPY /dist/nexct-approval-ui /user/share/nginx/html
EXPOSE 4200

then I run:

docker build -t ng-nexct-approval-ui .

It looks like it builds correctly.

docker run -p 4200:4200 ng-nexct-approval-ui

When I try access http://localhost:4200/approval-edit/1573515, I get:

ERR_CONNECTION_REFUSED

Questions

1. Any ideas how I can get this working, so I can connect to http://localhost:4200/approval-edit/1573515?
2. Currently the docker container is just given a random name. How do I assign a name? (e.g. ng-nexct-approval-ui-container)

Answer 1

Answer to your question is. Nginx expose port on 8080 and Dockerfile has port 4200 to solve problem map the port to localhost port.

docker run -p 4200:8080 --name ng-nexct-approval-ui-container ng-nexct-approval-ui

Answer 2

1st question:

When you run your Angular application in the dev server, it is hosted on port 4200. Now you are using an nginx container, which does not run on port 4200, but port 80.

You should try to run the container with docker run -p 4200:80 ng-nexct-approval-ui instead.

You could also update the EXPOSE section of Dockerfile to port 80. It doesn't change the functionality however, since it merely serves as documentation.

The EXPOSE instruction does not actually publish the port. It functions as a type of documentation between the person who builds the image and the person who runs the container, about which ports are intended to be published. To actually publish the port when running the container, use the -p flag on docker run to publish and map one or more ports, or the -P flag to publish all exposed ports and map them to high-order ports.

Source

2nd question:

You can assign a name to your docker container by using the --name option, so in this case docker run --name <your name here> ng-nexct-approval-ui.