Angular2 deploy in docker container disturbs routing

Question

i want to deploy my Angular2/ts app within a docker container. I found the following tutorial which works really good: Link. So my docker-compose.yml now is:

version: '2'

services:
  httpd:
    image: httpd:latest
    volumes:
      - ./:/usr/local/apache2/htdocs/
      - ./node_modules:/usr/local/apache2/htdocs/node_modules
    ports:
      - "80:80"
  npm:
    image: treyjones/npm:latest
    volumes:
      - ./:/npm
  tsc:
    image: treyjones/tsc:latest
    volumes:
      - ./:/tsc

but I have the problem that the routing does not work right.

I can reach my app via

http://localhost:80/

and it redirects me to

http://localhost:80/data

So to this point everything works great. But i I refresh my page, or try to reach it via

http://localhost:80/data

I get an error:

"GET /data HTTP/1.1" 404 205

I've already had this problem before I used a docker container, and solved it using live-server, as mentioned in Link. Which means that I added the script:

"serve": "concurrently \"live-server --port=5556 --entry-file=index.html \" \"gulp\" \"npm run tsc:w\" "

within my package.json.

But I do not know how I can integrate live-server into my docker-configuration or how I can manipulate httpd such that I can an option like the option

--entry-file=index.html

of the live-server.

Answer 1

1. You either have to configure httpd as described here https://httpd.apache.org/docs/2.4/rewrite/remapping.html. That means creating your own docker image based on httpd:latest that adds the remapping of the routes.
2. Stop using httpd and use lite-server to serve the files you want, the way you want. Again, creating your own docker image that does that.