Angular2 Deploy in Docker Container stört Routing

Question

Ich möchte meine Angular2/ts App in einem Andock-Container bereitstellen. Ich fand das folgende Tutorial, das wirklich gut funktioniert: Link. Also meine Docker-compose.yml ist jetzt:

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 

aber ich habe das Problem, dass das Routing nicht richtig funktioniert.

Ich kann meine App über

http://localhost:80/

und es leitet mich zu

http://localhost:80/data

So zu diesem Punkt alles funktioniert gut erreichen. Aber ich refresh ich meine Seite, oder versuchen, es zu erreichen über

http://localhost:80/data

ich einen Fehler:

"GET /data HTTP/1.1" 404 205

Ich habe bereits dieses Problem hatte, bevor ich einen Docker-Container verwendet, und löste es mit Live-Server, wie in Link erwähnt. Was bedeutet, dass ich das Skript hinzugefügt:

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

innerhalb meiner package.json.

Aber ich weiß nicht, wie ich Live-Server in meine Docker-Konfiguration integrieren kann oder wie ich httpd, so dass ich kann eine Option wie die Option

--entry-file=index.html

des Live-Server manipulieren kann.

Answer 1

1. Sie müssen entweder httpd wie hier beschrieben konfigurieren https://httpd.apache.org/docs/2.4/rewrite/remapping.html. Das bedeutet, dass Sie ein eigenes Docker-Image basierend auf httpd:latest erstellen, das die Neuzuordnung der Routen hinzufügt.
2. Beenden Sie die Verwendung von httpd und verwenden Sie lite-server, um die gewünschten Dateien so zu liefern, wie Sie möchten. Erstellen Sie erneut Ihr eigenes Docker-Image, das das tut.